feat: use cytoscape for graph and cleanup (#3535)

![Screenshot 2024-11-26 at 12 03
58 PM](https://github.com/user-attachments/assets/12484fed-6872-4496-948d-985262b97226)
![Screenshot 2024-11-26 at 12 04
02 PM](https://github.com/user-attachments/assets/cd5a3db4-1529-4f75-baef-1ad29e373b0e)

frontend/console/src/components/ResizablePanels.tsx

@@ -1,6 +1,6 @@
 import type React from 'react'
 import { useState } from 'react'
-import type { ExpandablePanelProps } from '../features/console/ExpandablePanel'
+import type { ExpandablePanelProps } from '../features/graph/ExpandablePanel'
 import useLocalStorage from '../hooks/use-local-storage'
 import RightPanel from './RightPanel'
 

frontend/console/src/components/RightPanel.tsx

@@ -1,5 +1,5 @@
 import type React from 'react'
-import { ExpandablePanel, type ExpandablePanelProps } from '../features/console/ExpandablePanel'
+import { ExpandablePanel, type ExpandablePanelProps } from '../features/graph/ExpandablePanel'
 
 interface RightPanelProps {
   header: React.ReactNode

frontend/console/src/features/console/ConsolePage.tsx → frontend/console/src/features/graph/GraphPage.tsx

@@ -3,26 +3,26 @@ import { type NavigateFunction, useNavigate } from 'react-router-dom'
 import { useModules } from '../../api/modules/use-modules'
 import { Loader } from '../../components/Loader'
 import { ResizablePanels } from '../../components/ResizablePanels'
-import { Config, Data, Database, Enum, Module, Secret, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
-import type { FTLNode } from '../graph/GraphPane'
-import { GraphPane } from '../graph/GraphPane'
-import { NewGraphPane } from '../graph/NewGraphPane'
+import { Config, Data, Database, Enum, Module, Secret, Subscription, Topic, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { configPanels } from '../modules/decls/config/ConfigRightPanels'
 import { dataPanels } from '../modules/decls/data/DataRightPanels'
 import { databasePanels } from '../modules/decls/database/DatabaseRightPanels'
 import { enumPanels } from '../modules/decls/enum/EnumRightPanels'
 import { secretPanels } from '../modules/decls/secret/SecretRightPanels'
+import { subscriptionPanels } from '../modules/decls/subscription/SubscriptionRightPanels'
+import { topicPanels } from '../modules/decls/topic/TopicRightPanels'
 import { verbPanels } from '../modules/decls/verb/VerbRightPanel'
 import { Timeline } from '../timeline/Timeline'
 import type { ExpandablePanelProps } from './ExpandablePanel'
+import { GraphPane } from './GraphPane'
 import { modulePanels } from './ModulePanels'
 import { headerForNode } from './RightPanelHeader'
+import type { FTLNode } from './graph-utils'
 
-export const ConsolePage = () => {
+export const GraphPage = () => {
   const modules = useModules()
   const navigate = useNavigate()
   const [selectedNode, setSelectedNode] = useState<FTLNode | null>(null)
-  const [graphType, setGraphType] = useState<'new' | 'legacy'>('new')
 
   if (!modules.isSuccess) {
     return (
@@ -32,25 +32,10 @@ export const ConsolePage = () => {
     )
   }
 
-  const renderGraph = () => {
-    return (
-      <div className='flex flex-col h-full'>
-        <div className='py-2 px-4 border-b border-gray-200 dark:border-gray-700 flex justify-end'>
-          <label className='flex items-center gap-2 cursor-pointer'>
-            <span className='text-sm text-gray-600 dark:text-gray-400'>Use new graph</span>
-            <input type='checkbox' checked={graphType === 'new'} onChange={(e) => setGraphType(e.target.checked ? 'new' : 'legacy')} className='sr-only peer' />
-            <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" />
-          </label>
-        </div>
-        <div className='flex-1'>{graphType === 'new' ? <NewGraphPane onTapped={setSelectedNode} /> : <GraphPane onTapped={setSelectedNode} />}</div>
-      </div>
-    )
-  }
-
   return (
     <div className='flex h-full'>
       <ResizablePanels
-        mainContent={renderGraph()}
+        mainContent={<GraphPane onTapped={setSelectedNode} />}
         rightPanelHeader={headerForNode(selectedNode)}
         rightPanelPanels={panelsForNode(modules.data.modules, selectedNode, navigate)}
         bottomPanelContent={<Timeline timeSettings={{ isTailing: true, isPaused: false }} filters={[]} />}
@@ -79,6 +64,12 @@ const panelsForNode = (modules: Module[], node: FTLNode | null, navigate: Naviga
   if (node instanceof Data) {
     return dataPanels(node)
   }
+  if (node instanceof Topic) {
+    return topicPanels(node)
+  }
+  if (node instanceof Subscription) {
+    return subscriptionPanels(node)
+  }
   if (node instanceof Verb) {
     return verbPanels(node)
   }