Scopes: Add `ScopesBridge` object #990

bfmatei · 2024-12-04T13:43:59Z

Continuing the discussion from here: grafana/grafana#97176

So what this PR brings: allow SceneObjects to consume React Contexts.

📦 Published PR as canary version: 5.29.1--canary.990.12238644149.0

✨ Test out this PR locally via:

npm install @grafana/[email protected]
npm install @grafana/[email protected]
# or 
yarn add @grafana/[email protected]
yarn add @grafana/[email protected]

torkelo

I think this is really cool, but until we have more examples / stronger need for this for many contexts I would recommend a more simple specific implementation for the ScopeContext specifically (maybe a base class that can handle some generic stuff).

Like a ScopeContextConsumer scene object that you can add to your scene (we would add it to DashboardScene), maybe we add it as an optional state prop to EmbeddeddScene or SceneApp (DashboardSceneRenderer would have render the ScopeContextConsumer component to make the context => scene state active).

Adding this to all scene objects, and to ComponentWrapper feels a bit too drastic until we know how much this will be used

torkelo · 2024-12-04T15:15:16Z

But I do think something like ScopesContextConsumer or ScopesSceneBridge (whatever we call it), could be something we add to scenes lib (and it depends on the context in runtime). And then scene app plugins can use it

dprokop

Agree with Torkel overall, this is a neat addition, but maybe would be worth talking it trough more widely if there's really a library need for this. It introduces quite a bit of complexity, and I'm not sure if we should solve this problem in classic scenes, but rather in react-scenes.

dprokop · 2024-12-05T08:54:13Z

packages/scenes/src/core/SceneComponentWrapper.tsx

+function SceneComponentWrapperWithoutMemo<T extends SceneObject>({ model, ...otherProps }: SceneComponentProps<T>) {
+  return [
+    <ContextsConsumer key="contexts" model={model} />,
+    <ComponentRenderer key="component" model={model} {...otherProps} />,
+  ];
+}
+


Took me a bit to udnerstand this 🤔

bfmatei · 2024-12-05T16:13:18Z

@torkelo @dprokop

I refactored this to only use React Context for Scopes (added a bridge between scopes and scenes).

A couple of notes:

SceneApp seems the best place to place the bridge as it's top level, meaning that all nested scene objects can get it
SceneAppPage have a useScopes flag that control wether a page should or should not show the scopes selector
the bridge also handles URL sync as it's way better than controlling it via the service (I can change this tho')
added usage for SceneQueryRunner as well as adhoc variables and groupby variables. No more double queries and no more data/filters enriching needed
the context is defined here for testing purposes as it's easier than to link runtime to scopes and then scopes to grafana while doing development
the useScopes hook has to spread the context as simply returning the context won't take effect for use-cases like

useEffect(() => {
  console.log(context);
}, [context]);

the context has to be a service as it's way easier to offer interoperability between scopes dashboards, scopes selector and the scopes "facade"
we need to do something with Prettier. Apparently there are a lot of files which are not formatted correctly 😢

torkelo

I think this looking really good

I think the isScopesLoading code added to AdHocFilters and GroupByVarable feel a bit on the "too complex" / detail that it should not have to care so deeply about (ie subscribe to state etc).

Wonder if we can skip that for now, and if it becomes a problem find a less invasive solution (like a loading spinner on the whole scene until scopes have initialized)

packages/scenes/src/core/SceneScopesBridge.ts

packages/scenes/src/variables/adhoc/AdHocFiltersVariable.tsx

torkelo · 2024-12-06T05:27:44Z

packages/scenes/src/querying/SceneQueryRunner.ts

@@ -140,6 +143,7 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
  private _onActivate() {
    if (this.isQueryModeAuto()) {
      const timeRange = sceneGraph.getTimeRange(this);
+      const scopesBridge = sceneGraph.getScopesBridge(this);


Long term I think it would be cool to generalize this concept with a special variable type that all query runners and variables depend on by default (so will block initial query execution), and the variable can then modify the query.

I tried to start a poc around it, a QueryEnhancerVariable but did not get very far.

But I think this implementation is also ok, just a shame it adds more complexity to this already complex class :)

I have something in mind regarding this. I'll start a PoC in the next weeks 🤔 .

bfmatei

I'll just continue doing testing for this and see how it goes. I also need to fix the code in core and test that out as well.

packages/scenes-app/src/components/SomeReactContext.tsx

bfmatei · 2024-12-06T09:10:19Z

packages/scenes/src/querying/SceneQueryRunner.ts

@@ -140,6 +143,7 @@ export class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implemen
  private _onActivate() {
    if (this.isQueryModeAuto()) {
      const timeRange = sceneGraph.getTimeRange(this);
+      const scopesBridge = sceneGraph.getScopesBridge(this);


I have something in mind regarding this. I'll start a PoC in the next weeks 🤔 .

packages/scenes/src/core/SceneScopesBridge.ts

packages/scenes/src/variables/adhoc/AdHocFiltersVariable.tsx

torkelo · 2024-12-09T13:29:39Z

packages/scenes/src/components/SceneApp/types.ts

@@ -69,6 +71,9 @@ export interface SceneAppPageState extends SceneObjectState {
  getFallbackPage?: () => SceneAppPageLike;

  layout?: PageLayoutType;
+
+  // Whether to use scopes for this page
+  useScopes?: boolean;


do we really need this as a page level prop?

I'm thinking that some pages might not want scopes to be shown for various reasons 🤔

dprokop

@bfmatei - this looks good now! Excellent job on bringing this to scenes. I've left just a few nits to consider.

packages/scenes/src/core/SceneScopesBridge.ts

packages/scenes/src/components/SceneApp/SceneAppPage.tsx

packages/scenes/src/core/SceneScopesBridge.ts

dprokop · 2024-12-09T13:28:10Z

packages/scenes/src/querying/SceneQueryRunner.ts

    }

-    this.runWithTimeRange(timeRange);
+    this.runWithTimeRangeAndScopes(timeRange, scopesBridge);


Let's add tests for making sure the SQR works as expected w/ scopes.

bfmatei requested review from torkelo and dprokop December 4, 2024 13:43

bfmatei self-assigned this Dec 4, 2024

bfmatei mentioned this pull request Dec 4, 2024

Scopes: Refactor scopes to plain React and move it to runtime grafana/grafana#97176

Open

3 tasks

torkelo reviewed Dec 4, 2024

View reviewed changes

dprokop reviewed Dec 5, 2024

View reviewed changes

torkelo reviewed Dec 6, 2024

View reviewed changes

bfmatei commented Dec 6, 2024

View reviewed changes

bfmatei mentioned this pull request Dec 6, 2024

Scopes: Add ScopesContext to @grafana/runtime grafana/grafana#97566

Merged

3 tasks

torkelo reviewed Dec 9, 2024

View reviewed changes

dprokop reviewed Dec 9, 2024

View reviewed changes

bfmatei added 8 commits December 9, 2024 16:38

ReactContexts: PoC

3348dd5

Remove unused useContext hook

d9be47d

Refactor

4fe7683

Refactor

fc6363a

Refactor

f5c0b23

Refactor

ad7c523

Remove complexity

26f1979

Update to latest ScopesContext

c3a4b47

bfmatei force-pushed the bogdan/react-contexts-bindings-poc branch from 6265009 to c3a4b47 Compare December 9, 2024 14:40

Refactors

691e059

bfmatei added patch Increment the patch version when merged release Create a release when this pr is merged labels Dec 9, 2024

bfmatei added 2 commits December 9, 2024 17:14

Fix tests

492764b

Fix typecheck

6412637

bfmatei changed the title ~~ReactContexts: PoC~~ Scopes: Add ScopesBridge object Dec 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scopes: Add `ScopesBridge` object #990

Scopes: Add `ScopesBridge` object #990

bfmatei commented Dec 4, 2024 •

edited by scenes-repo-bot-access-token bot

Loading

torkelo left a comment

torkelo commented Dec 4, 2024 •

edited

Loading

dprokop left a comment

dprokop Dec 5, 2024

bfmatei commented Dec 5, 2024

torkelo left a comment

torkelo Dec 6, 2024

bfmatei Dec 6, 2024

bfmatei left a comment

bfmatei Dec 6, 2024

torkelo Dec 9, 2024

bfmatei Dec 9, 2024

dprokop left a comment

dprokop Dec 9, 2024

Scopes: Add ScopesBridge object #990

Are you sure you want to change the base?

Scopes: Add ScopesBridge object #990

Conversation

bfmatei commented Dec 4, 2024 • edited by scenes-repo-bot-access-token bot Loading

torkelo left a comment

Choose a reason for hiding this comment

torkelo commented Dec 4, 2024 • edited Loading

dprokop left a comment

Choose a reason for hiding this comment

dprokop Dec 5, 2024

Choose a reason for hiding this comment

bfmatei commented Dec 5, 2024

torkelo left a comment

Choose a reason for hiding this comment

torkelo Dec 6, 2024

Choose a reason for hiding this comment

bfmatei Dec 6, 2024

Choose a reason for hiding this comment

bfmatei left a comment

Choose a reason for hiding this comment

bfmatei Dec 6, 2024

Choose a reason for hiding this comment

torkelo Dec 9, 2024

Choose a reason for hiding this comment

bfmatei Dec 9, 2024

Choose a reason for hiding this comment

dprokop left a comment

Choose a reason for hiding this comment

dprokop Dec 9, 2024

Choose a reason for hiding this comment

Scopes: Add `ScopesBridge` object #990

Scopes: Add `ScopesBridge` object #990

bfmatei commented Dec 4, 2024 •

edited by scenes-repo-bot-access-token bot

Loading

torkelo commented Dec 4, 2024 •

edited

Loading