From b7eddbc20bc23701eb828606873128b63257c32b Mon Sep 17 00:00:00 2001 From: Wes Date: Mon, 25 Mar 2024 18:30:45 -0700 Subject: [PATCH] fix: remove unused code and fix light mode styles (#1139) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ![Screenshot 2024-03-25 at 5 47 39 PM](https://github.com/TBD54566975/ftl/assets/51647/0c52fa06-db8e-46f2-a086-150569da6966) --- frontend/src/App.tsx | 3 - frontend/src/features/console/ConsolePage.tsx | 15 +- frontend/src/features/console/ConsolePane.tsx | 138 ------------------ frontend/src/features/console/TopBar.tsx | 7 - frontend/src/features/console/graph.ts | 40 ----- .../console/right-panel/RightPanelHeader.tsx | 2 +- frontend/src/features/graph/GraphPage.tsx | 17 --- frontend/src/features/graph/GraphPane.tsx | 23 ++- frontend/src/features/graph/GroupNode.tsx | 6 +- .../src/layout/navigation/navigation-items.ts | 5 +- 10 files changed, 30 insertions(+), 226 deletions(-) delete mode 100644 frontend/src/features/console/ConsolePane.tsx delete mode 100644 frontend/src/features/console/TopBar.tsx delete mode 100644 frontend/src/features/console/graph.ts delete mode 100644 frontend/src/features/graph/GraphPage.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 710a8fd942..27a751c976 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -6,7 +6,6 @@ import { VerbPage } from './features/verbs/VerbPage.tsx' import { Layout } from './layout/Layout.tsx' import { NotFoundPage } from './layout/NotFoundPage.tsx' import ConsolePage from './features/console/ConsolePage.tsx' -import { GraphPage } from './features/graph/GraphPage.tsx' export const App = () => { return ( @@ -18,8 +17,6 @@ export const App = () => { } /> } /> } /> - - } /> } /> } /> diff --git a/frontend/src/features/console/ConsolePage.tsx b/frontend/src/features/console/ConsolePage.tsx index 4387fa8116..2eeec00580 100644 --- a/frontend/src/features/console/ConsolePage.tsx +++ b/frontend/src/features/console/ConsolePage.tsx @@ -1,19 +1,18 @@ import React, { useContext, useState } from 'react' import RightPanel from './right-panel/RightPanel' import BottomPanel from './BottomPanel' -import { FTLNode } from '../graph/GraphPage' import { Config, Module, Secret, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb' import { ExpandablePanelProps } from './ExpandablePanel' -import { headerForNode } from './right-panel/RightPanelHeader' -import { modulePanels } from './right-panel/ModulePanels' -import { GraphPane } from '../graph/GraphPane' +import { FTLNode, GraphPane } from '../graph/GraphPane' import { Page } from '../../layout' import { CubeTransparentIcon } from '@heroicons/react/24/outline' import { verbPanels } from './right-panel/VerbPanels' -import { secretPanels } from './right-panel/SecretPanels' -import { configPanels } from './right-panel/ConfigPanels' import { modulesContext } from '../../providers/modules-provider' import { NavigateFunction, useNavigate } from 'react-router-dom' +import { headerForNode } from './right-panel/RightPanelHeader' +import { modulePanels } from './right-panel/ModulePanels' +import { secretPanels } from './right-panel/SecretPanels' +import { configPanels } from './right-panel/ConfigPanels' const MIN_RIGHT_PANEL_WIDTH = 200 const MIN_BOTTOM_PANEL_HEIGHT = 200 @@ -58,7 +57,7 @@ const ConsolePage = () => { return ( - } title='Graph' /> + } title='Console' />
{ onMouseLeave={stopDragging} >
-
+
{ - const modules = useContext(modulesContext) - const [layout, setLayout] = useState(null) - const [nodes, setNodes] = useState([]) - const [edges, setEdges] = useState([]) - const svgRef = useRef(null) - - useEffect(() => { - let panZoomInstance: SvgPanZoom.Instance | null = null - - if (svgRef.current) { - panZoomInstance = svgPanZoom(svgRef.current, { - zoomEnabled: true, - controlIconsEnabled: true, - fit: true, - center: true, - }) - } - - return () => panZoomInstance?.destroy() - }, []) - - useEffect(() => { - const { nodes, edges } = layoutNodes(modules.modules) - setNodes(nodes) - setEdges(edges) - }, [modules]) - - useEffect(() => { - const graph = { - id: 'root', - layoutOptions: { - 'elk.algorithm': 'layered', - }, - children: nodes.map((node) => ({ - ...node, - layoutOptions: { - 'elk.nodeKind': 'group', - 'elk.padding': '[top=20,left=20,bottom=20,right=20]', // Group padding - }, - })), - edges: edges, - } - - elk - .layout(graph) - .then((result) => { - setLayout(result) - }) - .catch((error) => console.error('ELK Layout calculation failed', error)) - }, [nodes, edges]) - - if (!layout) { - return
Loading graph...
- } - - return ( -
- - - - - - - - {layout.children?.map((moduleNode) => ( - - - - {moduleNode.labels?.map((label, labelIndex) => ( - - {label.text} - - ))} - {moduleNode.children?.map((verbNode) => ( - - {' '} - {verbNode.labels?.map((label, labelIndex) => ( - - {label.text} - - ))} - - ))} - - ))} - - {/* Edges */} - {layout.edges?.map((edge, index) => { - const x1 = edge.sections?.[0]?.startPoint.x ?? 0 - const y1 = edge.sections?.[0]?.startPoint.y ?? 0 - const x2 = edge.sections?.[0]?.endPoint.x ?? 0 - const y2 = edge.sections?.[0]?.endPoint.y ?? 0 - - return ( - - ) - })} - -
- ) -} - -export default ConsolePane diff --git a/frontend/src/features/console/TopBar.tsx b/frontend/src/features/console/TopBar.tsx deleted file mode 100644 index 84e3b0c87b..0000000000 --- a/frontend/src/features/console/TopBar.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' - -const TopBar: React.FC = () => { - return
Top Bar Content
-} - -export default TopBar diff --git a/frontend/src/features/console/graph.ts b/frontend/src/features/console/graph.ts deleted file mode 100644 index 761cca2bcf..0000000000 --- a/frontend/src/features/console/graph.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { ElkExtendedEdge, ElkNode } from 'elkjs' -import { Module } from '../../protos/xyz/block/ftl/v1/console/console_pb' -import { MetadataCalls } from '../../protos/xyz/block/ftl/v1/schema/schema_pb' - -export const layoutNodes = (modules: Module[]) => { - const nodes: ElkNode[] = [] - const edges: ElkExtendedEdge[] = [] - - modules.forEach((module) => { - const verbs = module.verbs - - verbs.forEach((verb) => { - const calls = verb?.verb?.metadata - .filter((meta) => meta.value.case === 'calls') - .map((meta) => meta.value.value as MetadataCalls) - - nodes.push({ - id: `${module.name}-${verb.verb?.name}`, - width: 200, - height: 50, - labels: [{ text: `${module.name}.${verb.verb?.name}` }], - }) - - const uniqueEdgeIds = new Set() - calls?.forEach((call) => - call.calls.forEach((call) => { - const sourceNode = `${module.name}-${verb.verb?.name}` - const targetNode = `${call.module}-${call.name}` - const edgeId = `${sourceNode}-${targetNode}` - if (!uniqueEdgeIds.has(edgeId)) { - uniqueEdgeIds.add(edgeId) - edges.push({ id: edgeId, sources: [sourceNode], targets: [targetNode] }) - } - }), - ) - }) - }) - - return { nodes, edges } -} diff --git a/frontend/src/features/console/right-panel/RightPanelHeader.tsx b/frontend/src/features/console/right-panel/RightPanelHeader.tsx index e9b2cd0cad..7bbaf0b57b 100644 --- a/frontend/src/features/console/right-panel/RightPanelHeader.tsx +++ b/frontend/src/features/console/right-panel/RightPanelHeader.tsx @@ -1,6 +1,6 @@ import { BoltIcon, Cog6ToothIcon, CubeIcon, LockClosedIcon, RectangleGroupIcon } from '@heroicons/react/24/outline' import { Config, Module, Secret, Verb } from '../../../protos/xyz/block/ftl/v1/console/console_pb' -import { FTLNode } from '../../graph/GraphPage' +import { FTLNode } from '../../graph/GraphPane' export const headerForNode = (node: FTLNode | null) => { if (!node) { diff --git a/frontend/src/features/graph/GraphPage.tsx b/frontend/src/features/graph/GraphPage.tsx deleted file mode 100644 index cafd116be6..0000000000 --- a/frontend/src/features/graph/GraphPage.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { CubeTransparentIcon } from '@heroicons/react/24/outline' -import { Page } from '../../layout' -import { Config, Module, Secret, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb' -import { GraphPane } from './GraphPane' - -export type FTLNode = Module | Verb | Secret | Config - -export const GraphPage = () => { - return ( - - } title='Graph' /> - - - - - ) -} diff --git a/frontend/src/features/graph/GraphPane.tsx b/frontend/src/features/graph/GraphPane.tsx index 447bee6a6d..2f6c67591e 100644 --- a/frontend/src/features/graph/GraphPane.tsx +++ b/frontend/src/features/graph/GraphPane.tsx @@ -14,7 +14,7 @@ const nodeTypes = { groupNode: GroupNode, verbNode: VerbNode, secretNode: Secret export type FTLNode = Module | Verb | Secret | Config interface GraphPaneProps { - onTapped?: (item: FTLNode) => void + onTapped?: (item: FTLNode | null) => void } export const GraphPane: React.FC = ({ onTapped }) => { @@ -24,14 +24,16 @@ export const GraphPane: React.FC = ({ onTapped }) => { const [selectedNode, setSelectedNode] = React.useState(null) useEffect(() => { - const { nodes, edges } = layoutNodes(modules.modules, modules.topology) - setNodes(nodes) - setEdges(edges) - }, [modules]) + const { nodes: newNodes, edges: newEdges } = layoutNodes(modules.modules, modules.topology) - useEffect(() => { - if (!selectedNode) return + // Need to update after render loop for ReactFlow to pick up the changes + setTimeout(() => { + setNodes(newNodes) + setEdges(newEdges) + }, 0) + }, [modules.modules]) + useEffect(() => { const currentNodes = nodes.map((node) => { return { ...node, data: { ...node.data, selected: node.data.item === selectedNode } } }) @@ -40,6 +42,8 @@ export const GraphPane: React.FC = ({ onTapped }) => { return ( = ({ onTapped }) => { onEdgesChange={onEdgesChange} maxZoom={2} minZoom={0.1} + nodeDragThreshold={2} onNodeClick={(_, node) => { setSelectedNode(node.data.item) onTapped?.(node.data.item) @@ -55,6 +60,10 @@ export const GraphPane: React.FC = ({ onTapped }) => { setSelectedNode(node.data.item) onTapped?.(node.data.item) }} + onPaneClick={() => { + setSelectedNode(null) + onTapped?.(null) + }} fitView > diff --git a/frontend/src/features/graph/GroupNode.tsx b/frontend/src/features/graph/GroupNode.tsx index 142b7f2a9e..a8e6621275 100644 --- a/frontend/src/features/graph/GroupNode.tsx +++ b/frontend/src/features/graph/GroupNode.tsx @@ -13,9 +13,11 @@ export const GroupNode = ({ data }: Props) => { return ( <>
-
{data.title}
+
+ {data.title} +
) diff --git a/frontend/src/layout/navigation/navigation-items.ts b/frontend/src/layout/navigation/navigation-items.ts index 5484b2573c..9c9281aaf0 100644 --- a/frontend/src/layout/navigation/navigation-items.ts +++ b/frontend/src/layout/navigation/navigation-items.ts @@ -1,8 +1,7 @@ -import { CubeTransparentIcon, ListBulletIcon, Square3Stack3DIcon, WindowIcon } from '@heroicons/react/24/outline' +import { CubeTransparentIcon, ListBulletIcon, Square3Stack3DIcon } from '@heroicons/react/24/outline' export const navigation = [ { name: 'Events', href: '/events', icon: ListBulletIcon }, + { name: 'Console', href: '/console', icon: CubeTransparentIcon }, { name: 'Deployments', href: '/deployments', icon: Square3Stack3DIcon }, - { name: 'Graph', href: '/graph', icon: CubeTransparentIcon }, - { name: 'Console', href: '/console', icon: WindowIcon }, ]