From c7828e718d303b2f8ffb2d80b4b4f937a91c39ab Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 18 Dec 2024 14:48:06 +0100 Subject: [PATCH 01/20] Selector to collect nodes in the main graph --- .../graph-editor/src/redux/selectors/graph.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/graph-editor/src/redux/selectors/graph.ts b/packages/graph-editor/src/redux/selectors/graph.ts index 94a70e03c..221f9e900 100644 --- a/packages/graph-editor/src/redux/selectors/graph.ts +++ b/packages/graph-editor/src/redux/selectors/graph.ts @@ -1,3 +1,4 @@ +import { Graph, Node } from '@tokens-studio/graph-engine'; import { MAIN_GRAPH_ID } from '@/constants.js'; import { createSelector } from 'reselect'; import { graph } from './roots.js'; @@ -18,6 +19,27 @@ export const mainGraphSelector = createSelector( (state) => state.panels[MAIN_GRAPH_ID], ); +const collectNodes = function (graph: Graph, coll: Record = {}) { + for (let id in graph.nodes) { + const node = graph.nodes[id]; + const innerGraph = node._innerGraph; + coll[id] = node; + + if (innerGraph) { + collectNodes(innerGraph, coll); + } + } + return coll; +}; + +export const graphNodesSelector = createSelector(graph, (state) => { + const graph = state.panels[MAIN_GRAPH_ID]?.graph; + + if (!graph) return; + + return collectNodes(graph); +}); + export const graphEditorSelector = createSelector( graph, (state) => state.currentPanel?.ref, From 50652df310ea4b236c924063566e68ced3c79af3 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 18 Dec 2024 16:57:16 +0100 Subject: [PATCH 02/20] Add navigator panel --- .../src/components/panels/index.tsx | 1 + .../src/components/panels/navigator/index.tsx | 31 +++++++++++++++++++ .../components/toolbar/dropdowns/layout.tsx | 3 ++ .../src/components/toolbar/layoutButtons.tsx | 6 ++++ 4 files changed, 41 insertions(+) create mode 100644 packages/graph-editor/src/components/panels/navigator/index.tsx diff --git a/packages/graph-editor/src/components/panels/index.tsx b/packages/graph-editor/src/components/panels/index.tsx index af9aad22d..03adb9410 100644 --- a/packages/graph-editor/src/components/panels/index.tsx +++ b/packages/graph-editor/src/components/panels/index.tsx @@ -9,3 +9,4 @@ export * from './nodeSettings/index.js'; export * from './output/index.js'; export * from './play/index.js'; export * from './settings/index.js'; +export * from './navigator/index.js'; diff --git a/packages/graph-editor/src/components/panels/navigator/index.tsx b/packages/graph-editor/src/components/panels/navigator/index.tsx new file mode 100644 index 000000000..c3ce6eac0 --- /dev/null +++ b/packages/graph-editor/src/components/panels/navigator/index.tsx @@ -0,0 +1,31 @@ +import { Label, Stack, Text, TextInput, Textarea } from '@tokens-studio/ui'; +import React, { useCallback, useMemo } from 'react'; + +import { Node } from '@tokens-studio/graph-engine'; +import { currentNode, graphNodesSelector } from '@/redux/selectors/graph.js'; +import { description, title } from '@/annotations/index.js'; +import { observer } from 'mobx-react-lite'; +import { useGraph } from '@/hooks/useGraph.js'; +import { useSelector } from 'react-redux'; + +export const Navigator = () => { + const graph = useGraph(); + const nodes = useSelector(graphNodesSelector); + + console.log(nodes); + + return ( + +
Yaw
+ + ); +}; diff --git a/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx b/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx index 4a51af251..4718a06a3 100644 --- a/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx +++ b/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx @@ -77,6 +77,9 @@ export const LayoutDropdown = () => { onClick('dropPanel')}> Nodes + onClick('navigator')}> + Navigator + diff --git a/packages/graph-editor/src/components/toolbar/layoutButtons.tsx b/packages/graph-editor/src/components/toolbar/layoutButtons.tsx index 8a7ff794d..531a76902 100644 --- a/packages/graph-editor/src/components/toolbar/layoutButtons.tsx +++ b/packages/graph-editor/src/components/toolbar/layoutButtons.tsx @@ -5,6 +5,7 @@ import { Inputsheet } from '../panels/inputs/index.js'; import { Legend } from '../panels/legend/index.js'; import { LogsPanel } from '../panels/logs/index.js'; import { NodeSettingsPanel } from '../panels/nodeSettings/index.js'; +import { Navigator } from '../panels/navigator/index.js'; import { OutputSheet } from '../panels/output/index.js'; import { Settings } from '../panels/settings/index.js'; import React from 'react'; @@ -55,6 +56,11 @@ export const layoutButtons = { title: 'Nodes', content: , }, + navigator: { + id: 'navigator', + title: 'Navigator', + content: , + }, }; export type LayoutButtons = keyof typeof layoutButtons; From 4e266e10dc69018b463ac0804005d1c7413a6cf4 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 18 Dec 2024 17:39:33 +0100 Subject: [PATCH 03/20] Make subgraphs navigateable --- .../src/components/panels/navigator/index.tsx | 91 +++++++++++++++++-- 1 file changed, 85 insertions(+), 6 deletions(-) diff --git a/packages/graph-editor/src/components/panels/navigator/index.tsx b/packages/graph-editor/src/components/panels/navigator/index.tsx index c3ce6eac0..09fd8ae8f 100644 --- a/packages/graph-editor/src/components/panels/navigator/index.tsx +++ b/packages/graph-editor/src/components/panels/navigator/index.tsx @@ -1,18 +1,90 @@ import { Label, Stack, Text, TextInput, Textarea } from '@tokens-studio/ui'; import React, { useCallback, useMemo } from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; +import { GraphEditor } from '@/editor/graphEditor.js'; +import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js'; import { Node } from '@tokens-studio/graph-engine'; -import { currentNode, graphNodesSelector } from '@/redux/selectors/graph.js'; -import { description, title } from '@/annotations/index.js'; +import { + currentNode, + graphNodesSelector, + currentPanelIdSelector, +} from '@/redux/selectors/graph.js'; +import { dockerSelector } from '@/redux/selectors/refs.js'; +import { description, title as annotatedTitle } from '@/annotations/index.js'; import { observer } from 'mobx-react-lite'; import { useGraph } from '@/hooks/useGraph.js'; +import { useDispatch } from '@/hooks/useDispatch.js'; import { useSelector } from 'react-redux'; +const switchOrCreateGraphTab = function (node) { + const graphId = innerGraph.annotations['engine.id']; + const title = + node.annotations[annotatedTitle] || + innerGraph.annotations['engine.title'] || + 'Subgraph'; + const existing = dockerRef.current.find(graphId); +}; + +const useSubgraphExplorerCallback = (node) => { + const dockerRef = useSelector(dockerSelector); + const callback = useCallback(() => { + if (!dockerRef?.current) { + return; + } + + let oneShot = false; + const innerGraph = node._innerGraph; + const graphId = innerGraph.annotations['engine.id']; + const title = + node.annotations[annotatedTitle] || + innerGraph.annotations['engine.title'] || + 'Subgraph'; + const existing = dockerRef.current.find(graphId); + + const ref = (o: ImperativeEditorRef) => { + if (o && !oneShot) { + o.load(innerGraph); + oneShot = true; + } + }; + + if (!existing) { + const newTab = { + cached: true, + closable: true, + id: graphId, + group: 'graph', + title, + content: ( + }> + + + ), + }; + dockerRef.current.dockMove(newTab, 'graphs', 'middle'); + } else { + dockerRef.current.updateTab(graphId, null, true); + } + }, [dockerRef, node._innerGraph, node.annotations]); + + return callback; +}; + +const SubgraphNodeItem = function ({ node }) { + const nodeType = node.nodeType(); + const onNodeClick = useSubgraphExplorerCallback(node); + + return ( +
  • + {nodeType} +
    • + ); +}; + export const Navigator = () => { - const graph = useGraph(); const nodes = useSelector(graphNodesSelector); - - console.log(nodes); + const dispatch = useDispatch(); return ( { overflow: 'auto', }} > -
    Yaw
    +
    +
      + {Object.values(nodes).map((node) => { + if (!node._innerGraph) return null; + return ; + })} +
    +
    ); }; From 0eff226cac1ae34e61f0723acb517131c07a6d3f Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 18 Dec 2024 17:58:55 +0100 Subject: [PATCH 04/20] Extract callback --- .../src/components/panels/navigator/index.tsx | 73 +------------------ .../graph-editor/src/registry/specifics.tsx | 29 +++++--- 2 files changed, 21 insertions(+), 81 deletions(-) diff --git a/packages/graph-editor/src/components/panels/navigator/index.tsx b/packages/graph-editor/src/components/panels/navigator/index.tsx index 09fd8ae8f..3bb620e6e 100644 --- a/packages/graph-editor/src/components/panels/navigator/index.tsx +++ b/packages/graph-editor/src/components/panels/navigator/index.tsx @@ -1,75 +1,10 @@ -import { Label, Stack, Text, TextInput, Textarea } from '@tokens-studio/ui'; -import React, { useCallback, useMemo } from 'react'; +import { Stack } from '@tokens-studio/ui'; +import React from 'react'; -import { ErrorBoundary } from 'react-error-boundary'; -import { GraphEditor } from '@/editor/graphEditor.js'; -import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js'; -import { Node } from '@tokens-studio/graph-engine'; -import { - currentNode, - graphNodesSelector, - currentPanelIdSelector, -} from '@/redux/selectors/graph.js'; -import { dockerSelector } from '@/redux/selectors/refs.js'; -import { description, title as annotatedTitle } from '@/annotations/index.js'; -import { observer } from 'mobx-react-lite'; -import { useGraph } from '@/hooks/useGraph.js'; +import { graphNodesSelector } from '@/redux/selectors/graph.js'; import { useDispatch } from '@/hooks/useDispatch.js'; import { useSelector } from 'react-redux'; - -const switchOrCreateGraphTab = function (node) { - const graphId = innerGraph.annotations['engine.id']; - const title = - node.annotations[annotatedTitle] || - innerGraph.annotations['engine.title'] || - 'Subgraph'; - const existing = dockerRef.current.find(graphId); -}; - -const useSubgraphExplorerCallback = (node) => { - const dockerRef = useSelector(dockerSelector); - const callback = useCallback(() => { - if (!dockerRef?.current) { - return; - } - - let oneShot = false; - const innerGraph = node._innerGraph; - const graphId = innerGraph.annotations['engine.id']; - const title = - node.annotations[annotatedTitle] || - innerGraph.annotations['engine.title'] || - 'Subgraph'; - const existing = dockerRef.current.find(graphId); - - const ref = (o: ImperativeEditorRef) => { - if (o && !oneShot) { - o.load(innerGraph); - oneShot = true; - } - }; - - if (!existing) { - const newTab = { - cached: true, - closable: true, - id: graphId, - group: 'graph', - title, - content: ( - }> - - - ), - }; - dockerRef.current.dockMove(newTab, 'graphs', 'middle'); - } else { - dockerRef.current.updateTab(graphId, null, true); - } - }, [dockerRef, node._innerGraph, node.annotations]); - - return callback; -}; +import { useSubgraphExplorerCallback } from '@/registry/specifics.js'; const SubgraphNodeItem = function ({ node }) { const nodeType = node.nodeType(); diff --git a/packages/graph-editor/src/registry/specifics.tsx b/packages/graph-editor/src/registry/specifics.tsx index efb719c7c..0dceddf25 100644 --- a/packages/graph-editor/src/registry/specifics.tsx +++ b/packages/graph-editor/src/registry/specifics.tsx @@ -16,9 +16,10 @@ import { useSelector } from 'react-redux'; import Eye from '@tokens-studio/icons/Eye.js'; import React, { useCallback } from 'react'; -const SubgraphExplorer = ({ node }) => { +export const useSubgraphExplorerCallback = (node) => { const dockerRef = useSelector(dockerSelector); - const onToggle = useCallback(() => { + + const callback = useCallback(() => { if (!dockerRef?.current) { return; } @@ -30,17 +31,16 @@ const SubgraphExplorer = ({ node }) => { node.annotations[annotatedTitle] || innerGraph.annotations['engine.title'] || 'Subgraph'; - //Find the container const existing = dockerRef.current.find(graphId); - const ref = (o: ImperativeEditorRef) => { - if (o && !oneShot) { - o.load(innerGraph); - oneShot = true; - } - }; - if (!existing) { + const ref = (o: ImperativeEditorRef) => { + if (o && !oneShot) { + o.load(innerGraph); + oneShot = true; + } + }; + const newTab = { cached: true, closable: true, @@ -53,15 +53,20 @@ const SubgraphExplorer = ({ node }) => { ), }; - dockerRef.current.dockMove(newTab, 'graphs', 'middle'); } else { dockerRef.current.updateTab(graphId, null, true); } }, [dockerRef, node._innerGraph, node.annotations]); + return callback; +}; + +const SubgraphExplorer = ({ node }: { node: Node }) => { + const onClick = useSubgraphExplorerCallback(node); + return ( - ); From 52b3447e52249285ee231a8a574aab66a8dc8e1a Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 18 Dec 2024 18:21:08 +0100 Subject: [PATCH 05/20] Silence ts innerGraph errors --- .../graph-editor/src/components/panels/navigator/index.tsx | 4 ++-- packages/graph-editor/src/redux/selectors/graph.ts | 6 +++--- packages/graph-editor/src/registry/specifics.tsx | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/graph-editor/src/components/panels/navigator/index.tsx b/packages/graph-editor/src/components/panels/navigator/index.tsx index 3bb620e6e..f47146fc9 100644 --- a/packages/graph-editor/src/components/panels/navigator/index.tsx +++ b/packages/graph-editor/src/components/panels/navigator/index.tsx @@ -34,8 +34,8 @@ export const Navigator = () => { >
      - {Object.values(nodes).map((node) => { - if (!node._innerGraph) return null; + {Object.values(nodes || {}).map((node) => { + if (!node['_innerGraph']) return null; return ; })}
    diff --git a/packages/graph-editor/src/redux/selectors/graph.ts b/packages/graph-editor/src/redux/selectors/graph.ts index 221f9e900..b73dd881a 100644 --- a/packages/graph-editor/src/redux/selectors/graph.ts +++ b/packages/graph-editor/src/redux/selectors/graph.ts @@ -20,9 +20,9 @@ export const mainGraphSelector = createSelector( ); const collectNodes = function (graph: Graph, coll: Record = {}) { - for (let id in graph.nodes) { - const node = graph.nodes[id]; - const innerGraph = node._innerGraph; + for (const id in graph.nodes) { + const node: Node = graph.nodes[id]; + const innerGraph = node['_innerGraph']; coll[id] = node; if (innerGraph) { diff --git a/packages/graph-editor/src/registry/specifics.tsx b/packages/graph-editor/src/registry/specifics.tsx index 0dceddf25..3b465ad08 100644 --- a/packages/graph-editor/src/registry/specifics.tsx +++ b/packages/graph-editor/src/registry/specifics.tsx @@ -25,7 +25,7 @@ export const useSubgraphExplorerCallback = (node) => { } let oneShot = false; - const innerGraph = node._innerGraph; + const innerGraph = node['_innerGraph']; const graphId = innerGraph.annotations['engine.id']; const title = node.annotations[annotatedTitle] || @@ -57,7 +57,7 @@ export const useSubgraphExplorerCallback = (node) => { } else { dockerRef.current.updateTab(graphId, null, true); } - }, [dockerRef, node._innerGraph, node.annotations]); + }, [dockerRef, node['_innerGraph'], node.annotations]); return callback; }; From e9c7f66b51e0d563dc441c4ef454290debf6c7a8 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 20 Dec 2024 16:22:15 +0100 Subject: [PATCH 06/20] Rename --- packages/graph-editor/src/components/panels/index.tsx | 2 +- .../panels/{navigator => navigation}/index.tsx | 4 ++-- .../src/components/toolbar/dropdowns/layout.tsx | 2 +- .../src/components/toolbar/layoutButtons.tsx | 10 +++++----- 4 files changed, 9 insertions(+), 9 deletions(-) rename packages/graph-editor/src/components/panels/{navigator => navigation}/index.tsx (89%) diff --git a/packages/graph-editor/src/components/panels/index.tsx b/packages/graph-editor/src/components/panels/index.tsx index 03adb9410..3ac76bf0a 100644 --- a/packages/graph-editor/src/components/panels/index.tsx +++ b/packages/graph-editor/src/components/panels/index.tsx @@ -9,4 +9,4 @@ export * from './nodeSettings/index.js'; export * from './output/index.js'; export * from './play/index.js'; export * from './settings/index.js'; -export * from './navigator/index.js'; +export * from './navigation/index.js'; diff --git a/packages/graph-editor/src/components/panels/navigator/index.tsx b/packages/graph-editor/src/components/panels/navigation/index.tsx similarity index 89% rename from packages/graph-editor/src/components/panels/navigator/index.tsx rename to packages/graph-editor/src/components/panels/navigation/index.tsx index f47146fc9..3c0702e3a 100644 --- a/packages/graph-editor/src/components/panels/navigator/index.tsx +++ b/packages/graph-editor/src/components/panels/navigation/index.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { graphNodesSelector } from '@/redux/selectors/graph.js'; import { useDispatch } from '@/hooks/useDispatch.js'; import { useSelector } from 'react-redux'; -import { useSubgraphExplorerCallback } from '@/registry/specifics.js'; +import { useSubgraphExplorerCallback } from '@/hooks/useSubgraphExplorerCallback.js'; const SubgraphNodeItem = function ({ node }) { const nodeType = node.nodeType(); @@ -17,7 +17,7 @@ const SubgraphNodeItem = function ({ node }) { ); }; -export const Navigator = () => { +export const NavigationPanel = () => { const nodes = useSelector(graphNodesSelector); const dispatch = useDispatch(); diff --git a/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx b/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx index 4718a06a3..47b3d275c 100644 --- a/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx +++ b/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx @@ -77,7 +77,7 @@ export const LayoutDropdown = () => { onClick('dropPanel')}> Nodes - onClick('navigator')}> + onClick('navigationPanel')}> Navigator diff --git a/packages/graph-editor/src/components/toolbar/layoutButtons.tsx b/packages/graph-editor/src/components/toolbar/layoutButtons.tsx index 531a76902..c358db5a4 100644 --- a/packages/graph-editor/src/components/toolbar/layoutButtons.tsx +++ b/packages/graph-editor/src/components/toolbar/layoutButtons.tsx @@ -5,7 +5,7 @@ import { Inputsheet } from '../panels/inputs/index.js'; import { Legend } from '../panels/legend/index.js'; import { LogsPanel } from '../panels/logs/index.js'; import { NodeSettingsPanel } from '../panels/nodeSettings/index.js'; -import { Navigator } from '../panels/navigator/index.js'; +import { NavigationPanel } from '../panels/navigation/index.js'; import { OutputSheet } from '../panels/output/index.js'; import { Settings } from '../panels/settings/index.js'; import React from 'react'; @@ -56,10 +56,10 @@ export const layoutButtons = { title: 'Nodes', content: , }, - navigator: { - id: 'navigator', - title: 'Navigator', - content: , + navigationPanel: { + id: 'navigationPanel', + title: 'Navigation', + content: , }, }; From 0f3993748950c75175edf12bd1281d6a85870af0 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 20 Dec 2024 16:22:20 +0100 Subject: [PATCH 07/20] Hacky work-around for circular dependency --- packages/graph-editor/src/editor/graphEditor.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/graph-editor/src/editor/graphEditor.tsx b/packages/graph-editor/src/editor/graphEditor.tsx index c9ebe960a..921423c34 100644 --- a/packages/graph-editor/src/editor/graphEditor.tsx +++ b/packages/graph-editor/src/editor/graphEditor.tsx @@ -1,6 +1,8 @@ import { EditorApp } from './graph.js'; import { GraphEditorProps, ImperativeEditorRef } from './editorTypes.js'; import { ReactFlowProvider } from 'reactflow'; +import { ErrorBoundary } from 'react-error-boundary'; +import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js'; import React from 'react'; /** @@ -16,3 +18,15 @@ export const GraphEditor = React.forwardRef< ); }); + +// HACK: Workaround for circular dependency not allowed for nextjs +// E.g.: when trying to create a new graph editor instance as a tab +if (window) { + window['newGraphEditor'] = function (ref, id) { + return ( + }> + + + ); + }; +} From 24cec3d2b8e69e8935a69322242d40bd233409ee Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 20 Dec 2024 16:40:15 +0100 Subject: [PATCH 08/20] Highlight currently selected graph --- .../components/panels/navigation/index.tsx | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/graph-editor/src/components/panels/navigation/index.tsx b/packages/graph-editor/src/components/panels/navigation/index.tsx index 3c0702e3a..8342fc62b 100644 --- a/packages/graph-editor/src/components/panels/navigation/index.tsx +++ b/packages/graph-editor/src/components/panels/navigation/index.tsx @@ -1,17 +1,25 @@ import { Stack } from '@tokens-studio/ui'; import React from 'react'; +import { dockerSelector } from '@/redux/selectors/refs.js'; import { graphNodesSelector } from '@/redux/selectors/graph.js'; import { useDispatch } from '@/hooks/useDispatch.js'; import { useSelector } from 'react-redux'; import { useSubgraphExplorerCallback } from '@/hooks/useSubgraphExplorerCallback.js'; +import { currentPanelIdSelector } from '@/redux/selectors/graph.js'; -const SubgraphNodeItem = function ({ node }) { +const SubgraphNodeItem = function ({ node, isSelected }) { const nodeType = node.nodeType(); const onNodeClick = useSubgraphExplorerCallback(node); + console.log(isSelected); + return ( -
  • +
  • {nodeType}
    • ); @@ -19,6 +27,8 @@ const SubgraphNodeItem = function ({ node }) { export const NavigationPanel = () => { const nodes = useSelector(graphNodesSelector); + const activeGraphId = useSelector(currentPanelIdSelector); + const dispatch = useDispatch(); return ( @@ -35,8 +45,18 @@ export const NavigationPanel = () => {
      {Object.values(nodes || {}).map((node) => { - if (!node['_innerGraph']) return null; - return ; + const innerGraph = node['_innerGraph']; + if (!innerGraph) return null; + console.log('HEY', activeGraphId, node.id, node); + return ( + + ); })}
    From b994acc879189c535ac169253d1f351cdf2c6f00 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 20 Dec 2024 17:00:46 +0100 Subject: [PATCH 09/20] Show root graph --- .../components/panels/navigation/index.tsx | 39 ++++++++++++++----- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/packages/graph-editor/src/components/panels/navigation/index.tsx b/packages/graph-editor/src/components/panels/navigation/index.tsx index 8342fc62b..f3f64da35 100644 --- a/packages/graph-editor/src/components/panels/navigation/index.tsx +++ b/packages/graph-editor/src/components/panels/navigation/index.tsx @@ -1,27 +1,46 @@ import { Stack } from '@tokens-studio/ui'; import React from 'react'; +import { MAIN_GRAPH_ID } from '@/constants.js'; import { dockerSelector } from '@/redux/selectors/refs.js'; import { graphNodesSelector } from '@/redux/selectors/graph.js'; import { useDispatch } from '@/hooks/useDispatch.js'; import { useSelector } from 'react-redux'; import { useSubgraphExplorerCallback } from '@/hooks/useSubgraphExplorerCallback.js'; import { currentPanelIdSelector } from '@/redux/selectors/graph.js'; +import styles from './index.module.css'; + +const ListItem = function ({ label, isSelected, onClick }) { + return ( +
  • + {label} +
    • + ); +}; const SubgraphNodeItem = function ({ node, isSelected }) { const nodeType = node.nodeType(); const onNodeClick = useSubgraphExplorerCallback(node); - console.log(isSelected); + return ( + + ); +}; + +const RootGraphNodeItem = function ({}) { + const dockerRef = useSelector(dockerSelector); + const activeGraphId = useSelector(currentPanelIdSelector); return ( -
  • - {nodeType} -
    • + dockerRef.current.updateTab(MAIN_GRAPH_ID, null, true)} + /> ); }; @@ -43,11 +62,11 @@ export const NavigationPanel = () => { }} >
    -
      +
        + {Object.values(nodes || {}).map((node) => { const innerGraph = node['_innerGraph']; if (!innerGraph) return null; - console.log('HEY', activeGraphId, node.id, node); return ( Date: Fri, 20 Dec 2024 17:17:42 +0100 Subject: [PATCH 10/20] Depth styling & Pretty title --- .../components/panels/navigation/index.tsx | 21 +++++++++++++------ packages/graph-editor/src/data/version.ts | 2 +- .../graph-editor/src/editor/graphEditor.tsx | 2 +- .../graph-editor/src/redux/selectors/graph.ts | 15 ++++++++++--- 4 files changed, 29 insertions(+), 11 deletions(-) diff --git a/packages/graph-editor/src/components/panels/navigation/index.tsx b/packages/graph-editor/src/components/panels/navigation/index.tsx index f3f64da35..7d4af8175 100644 --- a/packages/graph-editor/src/components/panels/navigation/index.tsx +++ b/packages/graph-editor/src/components/panels/navigation/index.tsx @@ -10,24 +10,32 @@ import { useSubgraphExplorerCallback } from '@/hooks/useSubgraphExplorerCallback import { currentPanelIdSelector } from '@/redux/selectors/graph.js'; import styles from './index.module.css'; -const ListItem = function ({ label, isSelected, onClick }) { +const ListItem = function ({ label, isSelected, onClick, depth }) { return (
      • {label}
        • ); }; -const SubgraphNodeItem = function ({ node, isSelected }) { - const nodeType = node.nodeType(); +const SubgraphNodeItem = function ({ node, isSelected, depth }) { + const nodeType = node.factory.title || node.nodeType(); const onNodeClick = useSubgraphExplorerCallback(node); return ( - + ); }; @@ -64,7 +72,7 @@ export const NavigationPanel = () => {
          - {Object.values(nodes || {}).map((node) => { + {Object.values(nodes || {}).map(({ node, depth }) => { const innerGraph = node['_innerGraph']; if (!innerGraph) return null; return ( @@ -74,6 +82,7 @@ export const NavigationPanel = () => { activeGraphId === innerGraph?.annotations['engine.id'] } node={node} + depth={depth} /> ); })} diff --git a/packages/graph-editor/src/data/version.ts b/packages/graph-editor/src/data/version.ts index 065128b05..23911495f 100644 --- a/packages/graph-editor/src/data/version.ts +++ b/packages/graph-editor/src/data/version.ts @@ -1 +1 @@ -export const version = '4.3.9'; +export const version = '4.3.6'; diff --git a/packages/graph-editor/src/editor/graphEditor.tsx b/packages/graph-editor/src/editor/graphEditor.tsx index 921423c34..2291184cb 100644 --- a/packages/graph-editor/src/editor/graphEditor.tsx +++ b/packages/graph-editor/src/editor/graphEditor.tsx @@ -21,7 +21,7 @@ export const GraphEditor = React.forwardRef< // HACK: Workaround for circular dependency not allowed for nextjs // E.g.: when trying to create a new graph editor instance as a tab -if (window) { +if (!!window) { window['newGraphEditor'] = function (ref, id) { return ( }> diff --git a/packages/graph-editor/src/redux/selectors/graph.ts b/packages/graph-editor/src/redux/selectors/graph.ts index b73dd881a..d798132ae 100644 --- a/packages/graph-editor/src/redux/selectors/graph.ts +++ b/packages/graph-editor/src/redux/selectors/graph.ts @@ -19,14 +19,23 @@ export const mainGraphSelector = createSelector( (state) => state.panels[MAIN_GRAPH_ID], ); -const collectNodes = function (graph: Graph, coll: Record = {}) { +export type TreeNode = { + node: Node; + depth: number; +}; + +const collectNodes = function ( + graph: Graph, + coll: Record = {}, + depth = 1, +): TreeNode { for (const id in graph.nodes) { const node: Node = graph.nodes[id]; const innerGraph = node['_innerGraph']; - coll[id] = node; + coll[id] = { node, depth } as TreeNode; if (innerGraph) { - collectNodes(innerGraph, coll); + collectNodes(innerGraph, coll, ++depth); } } return coll; From 242fe677e97d1a6fe619147a368f7bfa3ef50efa Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 20 Dec 2024 17:40:52 +0100 Subject: [PATCH 11/20] Show node count --- .../src/components/panels/navigation/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/graph-editor/src/components/panels/navigation/index.tsx b/packages/graph-editor/src/components/panels/navigation/index.tsx index 7d4af8175..663aa79d0 100644 --- a/packages/graph-editor/src/components/panels/navigation/index.tsx +++ b/packages/graph-editor/src/components/panels/navigation/index.tsx @@ -9,8 +9,9 @@ import { useSelector } from 'react-redux'; import { useSubgraphExplorerCallback } from '@/hooks/useSubgraphExplorerCallback.js'; import { currentPanelIdSelector } from '@/redux/selectors/graph.js'; import styles from './index.module.css'; +import { get, size, flow } from 'lodash-es'; -const ListItem = function ({ label, isSelected, onClick, depth }) { +const ListItem = function ({ label, count, isSelected, onClick, depth }) { return (
        • {label} + {count && ({count})}
          • ); }; @@ -28,6 +30,10 @@ const ListItem = function ({ label, isSelected, onClick, depth }) { const SubgraphNodeItem = function ({ node, isSelected, depth }) { const nodeType = node.factory.title || node.nodeType(); const onNodeClick = useSubgraphExplorerCallback(node); + const childNodesCount = flow( + (x) => get(x, ['_innerGraph', 'nodes'], []), + size, + )(node); return ( 0 && childNodesCount} /> ); }; From c0e6a98802b9cbe266572674be57038c96d68e58 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 20 Dec 2024 17:56:45 +0100 Subject: [PATCH 12/20] Fix forgotten file --- .../src/hooks/useSubgraphExplorerCallback.ts | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts diff --git a/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts b/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts new file mode 100644 index 000000000..7a4cc22fa --- /dev/null +++ b/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts @@ -0,0 +1,52 @@ +import { ErrorBoundary } from 'react-error-boundary'; +import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js'; +import { ImperativeEditorRef } from '../index.js'; +import { title as annotatedTitle } from '@/annotations/index.js'; +import { dockerSelector } from '@/redux/selectors/refs.js'; +import { useSelector } from 'react-redux'; +import React, { useCallback } from 'react'; + +export const useSubgraphExplorerCallback = (node) => { + const dockerRef = useSelector(dockerSelector); + + const callback = useCallback(() => { + if (!dockerRef?.current) { + return; + } + + let oneShot = false; + const innerGraph = node['_innerGraph']; + const graphId = innerGraph.annotations['engine.id']; + const title = + node.annotations[annotatedTitle] || + innerGraph.annotations['engine.title'] || + 'Subgraph'; + const existing = dockerRef.current.find(graphId); + + if (!existing) { + const ref = (o: ImperativeEditorRef) => { + if (o && !oneShot) { + o.load(innerGraph); + oneShot = true; + } + }; + + console.log(window['newGraphEditor']()); + + const newTab = { + cached: true, + closable: true, + id: graphId, + group: 'graph', + title, + content: window && window['newGraphEditor'](ref, graphId), + }; + console.log(newTab); + dockerRef.current.dockMove(newTab, 'graphs', 'middle'); + } else { + dockerRef.current.updateTab(graphId, null, true); + } + }, [dockerRef, node['_innerGraph'], node.annotations]); + + return callback; +}; From 1e024af123919425131017d6c4db6bbbbfcb2235 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 20 Dec 2024 18:06:19 +0100 Subject: [PATCH 13/20] Fix condition --- packages/graph-editor/src/editor/graphEditor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/graph-editor/src/editor/graphEditor.tsx b/packages/graph-editor/src/editor/graphEditor.tsx index 2291184cb..fb05887a2 100644 --- a/packages/graph-editor/src/editor/graphEditor.tsx +++ b/packages/graph-editor/src/editor/graphEditor.tsx @@ -21,7 +21,7 @@ export const GraphEditor = React.forwardRef< // HACK: Workaround for circular dependency not allowed for nextjs // E.g.: when trying to create a new graph editor instance as a tab -if (!!window) { +if (typeof window !== 'undefined') { window['newGraphEditor'] = function (ref, id) { return ( }> From c373a864e689aabb6966afa5084fab9344323718 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 20 Dec 2024 18:21:03 +0100 Subject: [PATCH 14/20] Fix ts errors --- .../components/panels/navigation/index.tsx | 40 ++++++++++++------- .../graph-editor/src/redux/selectors/graph.ts | 4 +- 2 files changed, 27 insertions(+), 17 deletions(-) diff --git a/packages/graph-editor/src/components/panels/navigation/index.tsx b/packages/graph-editor/src/components/panels/navigation/index.tsx index 663aa79d0..994e4e7ab 100644 --- a/packages/graph-editor/src/components/panels/navigation/index.tsx +++ b/packages/graph-editor/src/components/panels/navigation/index.tsx @@ -1,26 +1,38 @@ -import { Stack } from '@tokens-studio/ui'; import React from 'react'; +import { Stack, IconButton, Tooltip } from '@tokens-studio/ui'; import { MAIN_GRAPH_ID } from '@/constants.js'; import { dockerSelector } from '@/redux/selectors/refs.js'; -import { graphNodesSelector } from '@/redux/selectors/graph.js'; -import { useDispatch } from '@/hooks/useDispatch.js'; +import { graphNodesSelector, TreeNode } from '@/redux/selectors/graph.js'; import { useSelector } from 'react-redux'; import { useSubgraphExplorerCallback } from '@/hooks/useSubgraphExplorerCallback.js'; import { currentPanelIdSelector } from '@/redux/selectors/graph.js'; import styles from './index.module.css'; import { get, size, flow } from 'lodash-es'; +import ArrowsUpFromLine from '@tokens-studio/icons/ArrowsUpFromLine.js'; + +type ListItemProps = { + label: string; + count?: number; + isSelected?: boolean; + onClick?: () => void; + depth?: number; +}; + +const ListItem = function ({ + label, + count, + isSelected, + onClick, + depth = 0, +}: ListItemProps) { + const style = { + '--tree-depth': depth, + fontWeight: isSelected && 'bold', + } as React.CSSProperties; -const ListItem = function ({ label, count, isSelected, onClick, depth }) { return ( -
        • +
        • {label} {count && ({count})}
          • @@ -63,8 +75,6 @@ export const NavigationPanel = () => { const nodes = useSelector(graphNodesSelector); const activeGraphId = useSelector(currentPanelIdSelector); - const dispatch = useDispatch(); - return ( {
            - {Object.values(nodes || {}).map(({ node, depth }) => { + {Object.values(nodes || {}).map(({ node, depth }: TreeNode) => { const innerGraph = node['_innerGraph']; if (!innerGraph) return null; return ( diff --git a/packages/graph-editor/src/redux/selectors/graph.ts b/packages/graph-editor/src/redux/selectors/graph.ts index d798132ae..945019ecb 100644 --- a/packages/graph-editor/src/redux/selectors/graph.ts +++ b/packages/graph-editor/src/redux/selectors/graph.ts @@ -26,9 +26,9 @@ export type TreeNode = { const collectNodes = function ( graph: Graph, - coll: Record = {}, + coll: Record = {}, depth = 1, -): TreeNode { +): Record { for (const id in graph.nodes) { const node: Node = graph.nodes[id]; const innerGraph = node['_innerGraph']; From 8ce784d0d9d6b308c123166eb8fbd0c1f23a6458 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 20 Dec 2024 18:48:27 +0100 Subject: [PATCH 15/20] Cleanup --- packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts b/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts index 7a4cc22fa..bd2f7e361 100644 --- a/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts +++ b/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts @@ -31,8 +31,6 @@ export const useSubgraphExplorerCallback = (node) => { } }; - console.log(window['newGraphEditor']()); - const newTab = { cached: true, closable: true, From e2289c0612e7a607ff57e2cdb8ab8e02dfcfb1fb Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 3 Jan 2025 15:00:23 +0100 Subject: [PATCH 16/20] Lint --- .../src/components/panels/navigation/index.tsx | 11 +++++------ .../src/components/toolbar/layoutButtons.tsx | 2 +- packages/graph-editor/src/editor/graphEditor.tsx | 4 ++-- .../src/hooks/useSubgraphExplorerCallback.ts | 4 +--- 4 files changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/graph-editor/src/components/panels/navigation/index.tsx b/packages/graph-editor/src/components/panels/navigation/index.tsx index 994e4e7ab..ac9f6cc55 100644 --- a/packages/graph-editor/src/components/panels/navigation/index.tsx +++ b/packages/graph-editor/src/components/panels/navigation/index.tsx @@ -1,15 +1,14 @@ import React from 'react'; -import { Stack, IconButton, Tooltip } from '@tokens-studio/ui'; import { MAIN_GRAPH_ID } from '@/constants.js'; +import { Stack } from '@tokens-studio/ui'; +import { TreeNode, graphNodesSelector } from '@/redux/selectors/graph.js'; +import { currentPanelIdSelector } from '@/redux/selectors/graph.js'; import { dockerSelector } from '@/redux/selectors/refs.js'; -import { graphNodesSelector, TreeNode } from '@/redux/selectors/graph.js'; +import { flow, get, size } from 'lodash-es'; import { useSelector } from 'react-redux'; import { useSubgraphExplorerCallback } from '@/hooks/useSubgraphExplorerCallback.js'; -import { currentPanelIdSelector } from '@/redux/selectors/graph.js'; import styles from './index.module.css'; -import { get, size, flow } from 'lodash-es'; -import ArrowsUpFromLine from '@tokens-studio/icons/ArrowsUpFromLine.js'; type ListItemProps = { label: string; @@ -58,7 +57,7 @@ const SubgraphNodeItem = function ({ node, isSelected, depth }) { ); }; -const RootGraphNodeItem = function ({}) { +const RootGraphNodeItem = function () { const dockerRef = useSelector(dockerSelector); const activeGraphId = useSelector(currentPanelIdSelector); diff --git a/packages/graph-editor/src/components/toolbar/layoutButtons.tsx b/packages/graph-editor/src/components/toolbar/layoutButtons.tsx index c358db5a4..319779034 100644 --- a/packages/graph-editor/src/components/toolbar/layoutButtons.tsx +++ b/packages/graph-editor/src/components/toolbar/layoutButtons.tsx @@ -4,8 +4,8 @@ import { GraphPanel } from '../panels/graph/index.js'; import { Inputsheet } from '../panels/inputs/index.js'; import { Legend } from '../panels/legend/index.js'; import { LogsPanel } from '../panels/logs/index.js'; -import { NodeSettingsPanel } from '../panels/nodeSettings/index.js'; import { NavigationPanel } from '../panels/navigation/index.js'; +import { NodeSettingsPanel } from '../panels/nodeSettings/index.js'; import { OutputSheet } from '../panels/output/index.js'; import { Settings } from '../panels/settings/index.js'; import React from 'react'; diff --git a/packages/graph-editor/src/editor/graphEditor.tsx b/packages/graph-editor/src/editor/graphEditor.tsx index fb05887a2..34c49b6db 100644 --- a/packages/graph-editor/src/editor/graphEditor.tsx +++ b/packages/graph-editor/src/editor/graphEditor.tsx @@ -1,8 +1,8 @@ import { EditorApp } from './graph.js'; -import { GraphEditorProps, ImperativeEditorRef } from './editorTypes.js'; -import { ReactFlowProvider } from 'reactflow'; import { ErrorBoundary } from 'react-error-boundary'; import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js'; +import { GraphEditorProps, ImperativeEditorRef } from './editorTypes.js'; +import { ReactFlowProvider } from 'reactflow'; import React from 'react'; /** diff --git a/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts b/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts index bd2f7e361..4cdea0502 100644 --- a/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts +++ b/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts @@ -1,10 +1,8 @@ -import { ErrorBoundary } from 'react-error-boundary'; -import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js'; import { ImperativeEditorRef } from '../index.js'; import { title as annotatedTitle } from '@/annotations/index.js'; import { dockerSelector } from '@/redux/selectors/refs.js'; +import { useCallback } from 'react'; import { useSelector } from 'react-redux'; -import React, { useCallback } from 'react'; export const useSubgraphExplorerCallback = (node) => { const dockerRef = useSelector(dockerSelector); From ca62fba785e9e7b62fb7d0340f166d9586078879 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 3 Jan 2025 15:32:06 +0100 Subject: [PATCH 17/20] Remove console.log --- packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts b/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts index 4cdea0502..bdb25ce5d 100644 --- a/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts +++ b/packages/graph-editor/src/hooks/useSubgraphExplorerCallback.ts @@ -37,7 +37,6 @@ export const useSubgraphExplorerCallback = (node) => { title, content: window && window['newGraphEditor'](ref, graphId), }; - console.log(newTab); dockerRef.current.dockMove(newTab, 'graphs', 'middle'); } else { dockerRef.current.updateTab(graphId, null, true); From f5e35f484887d62d2f52f208e394dc13c3824f03 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 3 Jan 2025 15:42:41 +0100 Subject: [PATCH 18/20] Restore css file --- .../panels/navigation/index.module.css | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 packages/graph-editor/src/components/panels/navigation/index.module.css diff --git a/packages/graph-editor/src/components/panels/navigation/index.module.css b/packages/graph-editor/src/components/panels/navigation/index.module.css new file mode 100644 index 000000000..4b95199e6 --- /dev/null +++ b/packages/graph-editor/src/components/panels/navigation/index.module.css @@ -0,0 +1,23 @@ +.listWrapper { + display: flex; + flex-direction: column; + font-size: var(--fontSizes-small); + gap: var(--component-spacing-xs); + list-style-type: none; + margin: 0; + padding: 0; + user-select: none; +} + +.listItem { + cursor: pointer; + display: inline-flex; + gap: 0.5ch; + padding-left: 0; + padding-left: calc(var(--tree-depth, 0) * var(--component-spacing-xs, 1)); +} + +.listItemCount { + opacity: 0.5; + font-weight: normal; +} From ee5810d5ba1f837192311c0a2a135bc0ffab5650 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 8 Jan 2025 10:23:50 +0100 Subject: [PATCH 19/20] Review changes --- .../panels/navigation/index.module.css | 21 ++++++++++++++--- .../components/panels/navigation/index.tsx | 23 ++++++++----------- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/graph-editor/src/components/panels/navigation/index.module.css b/packages/graph-editor/src/components/panels/navigation/index.module.css index 4b95199e6..223284601 100644 --- a/packages/graph-editor/src/components/panels/navigation/index.module.css +++ b/packages/graph-editor/src/components/panels/navigation/index.module.css @@ -1,7 +1,18 @@ +.scrollWrapper { + height: 100%; + flex: 1; + padding: var(--component-spacing-md); + overflow: auto; +} + +.componentSpacingWrapper { + padding: var(--component-spacing-md); +} + .listWrapper { display: flex; flex-direction: column; - font-size: var(--fontSizes-small); + font-size: var(--font-body-small-default); gap: var(--component-spacing-xs); list-style-type: none; margin: 0; @@ -12,9 +23,13 @@ .listItem { cursor: pointer; display: inline-flex; - gap: 0.5ch; + gap: var(--component-spacing-sm); padding-left: 0; - padding-left: calc(var(--tree-depth, 0) * var(--component-spacing-xs, 1)); + padding-left: calc(var(--tree-depth, 0px) * var(--component-spacing-xs, 1px)); +} + +.listItemSelected { + font-weight: bold; } .listItemCount { diff --git a/packages/graph-editor/src/components/panels/navigation/index.tsx b/packages/graph-editor/src/components/panels/navigation/index.tsx index ac9f6cc55..bab3f8e78 100644 --- a/packages/graph-editor/src/components/panels/navigation/index.tsx +++ b/packages/graph-editor/src/components/panels/navigation/index.tsx @@ -8,6 +8,7 @@ import { dockerSelector } from '@/redux/selectors/refs.js'; import { flow, get, size } from 'lodash-es'; import { useSelector } from 'react-redux'; import { useSubgraphExplorerCallback } from '@/hooks/useSubgraphExplorerCallback.js'; +import cx from 'classnames'; import styles from './index.module.css'; type ListItemProps = { @@ -27,11 +28,16 @@ const ListItem = function ({ }: ListItemProps) { const style = { '--tree-depth': depth, - fontWeight: isSelected && 'bold', } as React.CSSProperties; return ( -
          • +
          • {label} {count && ({count})}
            • @@ -75,17 +81,8 @@ export const NavigationPanel = () => { const activeGraphId = useSelector(currentPanelIdSelector); return ( - -
            + +
              {Object.values(nodes || {}).map(({ node, depth }: TreeNode) => { From 327c0f13791402734020d176dc9f79916cb53dc8 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 8 Jan 2025 11:12:52 +0100 Subject: [PATCH 20/20] Review changes --- .../src/components/panels/navigation/index.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/graph-editor/src/components/panels/navigation/index.module.css b/packages/graph-editor/src/components/panels/navigation/index.module.css index 223284601..b24e91c10 100644 --- a/packages/graph-editor/src/components/panels/navigation/index.module.css +++ b/packages/graph-editor/src/components/panels/navigation/index.module.css @@ -33,6 +33,6 @@ } .listItemCount { - opacity: 0.5; + color: var(--fg-subtle); font-weight: normal; }