fix: remove unused code and fix light mode styles (#1139)

![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

@@ -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 = () => {
         <Route path='deployments' element={<DeploymentsPage />} />
         <Route path='deployments/:deploymentKey' element={<DeploymentPage />} />
         <Route path='deployments/:deploymentKey/verbs/:verbName' element={<VerbPage />} />
-
-        <Route path='graph' element={<GraphPage />} />
         <Route path='console' element={<ConsolePage />} />
       </Route>
       <Route path='*' element={<NotFoundPage />} />

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 (
     <Page>
-      <Page.Header icon={<CubeTransparentIcon />} title='Graph' />
+      <Page.Header icon={<CubeTransparentIcon />} title='Console' />
       <Page.Body className='flex h-full'>
         <div
           className='flex flex-col h-screen'
@@ -70,7 +69,7 @@ const ConsolePage = () => {
           onMouseLeave={stopDragging}
         >
           <div className='flex flex-1'>
-            <div className='flex-1 bg-gray-800 text-white'>
+            <div className='flex-1 dark:bg-gray-800 '>
               <GraphPane onTapped={setSelectedNode} />
             </div>
             <div

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) {

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<GraphPaneProps> = ({ onTapped }) => {
@@ -24,14 +24,16 @@ export const GraphPane: React.FC<GraphPaneProps> = ({ onTapped }) => {
   const [selectedNode, setSelectedNode] = React.useState<FTLNode | null>(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,13 +42,16 @@ export const GraphPane: React.FC<GraphPaneProps> = ({ onTapped }) => {
 
   return (
     <ReactFlow
+      key={`${nodes.length}-${edges.length}`}
+      proOptions={{ hideAttribution: true }}
       nodes={nodes}
       edges={edges}
       nodeTypes={nodeTypes}
       onNodesChange={onNodesChange}
       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<GraphPaneProps> = ({ onTapped }) => {
         setSelectedNode(node.data.item)
         onTapped?.(node.data.item)
       }}
+      onPaneClick={() => {
+        setSelectedNode(null)
+        onTapped?.(null)
+      }}
       fitView
     >
       <Controls />

frontend/src/features/graph/GroupNode.tsx

@@ -13,9 +13,11 @@ export const GroupNode = ({ data }: Props) => {
   return (
     <>
       <div
-        className={`h-full rounded-md ${data.selected ? 'bg-opacity-80 bg-pink-600' : 'bg-indigo-900 bg-opacity-30'}`}
+        className={`h-full rounded-md ${data.selected ? 'bg-pink-200 dark:bg-pink-600 bg-opacity-80' : 'bg-indigo-200 dark:bg-indigo-900 bg-opacity-30'}`}
       >
-        <div className='flex justify-center text-xs text-gray-100 pt-3 pl-5 truncate max-w-[90%]'>{data.title}</div>
+        <div className='flex justify-center text-xs dark:text-gray-100 pt-3 pl-5 truncate max-w-[90%]'>
+          {data.title}
+        </div>
       </div>
     </>
   )

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 },
 ]