chore: linting, style, and unused code updates.

console/client/.eslintrc.cjs

@@ -24,8 +24,8 @@ module.exports = {
   rules: {
     'react/react-in-jsx-scope': 'off',
     'react/jsx-uses-react': 'off',
-    'react/prop-types': 'off',
     'func-style': ['error', 'expression'],
+    'react/prop-types': 'off',
     '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
     '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
     '@typescript-eslint/ban-ts-comment': [

console/client/src/features/calls/CallList.tsx

@@ -1,17 +1,13 @@
-import React from 'react'
+import { useContext, useState } from 'react'
 import { CallEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelContext } from '../../providers/side-panel-provider'
 import { formatDuration, formatTimestampShort } from '../../utils'
 import { TimelineCallDetails } from '../timeline/details/TimelineCallDetails'
 import { verbRefString } from '../verbs/verb.utils'
 
-interface Props {
-  calls: CallEvent[] | undefined
-}
-
-export const CallList = ({ calls }: Props) => {
-  const { openPanel, closePanel } = React.useContext(SidePanelContext)
-  const [selectedCall, setSelectedCall] = React.useState<CallEvent | undefined>()
+export const CallList = ({ calls }: { calls: CallEvent[] | undefined }) => {
+  const { openPanel, closePanel } = useContext(SidePanelContext)
+  const [selectedCall, setSelectedCall] = useState<CallEvent | undefined>()
 
   const handleCallClicked = (call: CallEvent) => {
     if (selectedCall?.equals(call)) {

console/client/src/features/deployments/DeploymentPage.tsx

@@ -1,5 +1,5 @@
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
-import React from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { ButtonSmall } from '../../components/ButtonSmall'
 import { Card } from '../../components/Card'
@@ -12,18 +12,18 @@ import { verbRefString } from '../verbs/verb.utils'
 export const DeploymentPage = () => {
   const navigate = useNavigate()
   const { deploymentName } = useParams()
-  const modules = React.useContext(modulesContext)
-  const [module, setModule] = React.useState<Module | undefined>()
-  const [calls, setCalls] = React.useState<VerbRef[]>([])
+  const modules = useContext(modulesContext)
+  const [module, setModule] = useState<Module | undefined>()
+  const [calls, setCalls] = useState<VerbRef[]>([])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (modules) {
       const module = modules.modules.find((module) => module.deploymentName === deploymentName)
       setModule(module)
     }
   }, [modules, deploymentName])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!module) return
 
     const verbCalls: VerbRef[] = []

console/client/src/features/deployments/DeploymentsPage.tsx

@@ -1,12 +1,12 @@
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
-import React from 'react'
+import { useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Card } from '../../components/Card'
-import { modulesContext } from '../../providers/modules-provider'
 import { Page } from '../../layout'
+import { modulesContext } from '../../providers/modules-provider'
 
 export const DeploymentsPage = () => {
-  const modules = React.useContext(modulesContext)
+  const modules = useContext(modulesContext)
   const navigate = useNavigate()
 
   return (

console/client/src/features/modules/ModulePage.tsx

@@ -1,5 +1,5 @@
 import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
-import React from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Card } from '../../components/Card'
 import { Page } from '../../layout'
@@ -12,18 +12,18 @@ import { CallList } from '../calls/CallList'
 export const ModulePage = () => {
   const navigate = useNavigate()
   const { moduleName } = useParams()
-  const modules = React.useContext(modulesContext)
-  const [module, setModule] = React.useState<Module | undefined>()
-  const [calls, setCalls] = React.useState<CallEvent[] | undefined>()
+  const modules = useContext(modulesContext)
+  const [module, setModule] = useState<Module | undefined>()
+  const [calls, setCalls] = useState<CallEvent[] | undefined>()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (modules) {
       const module = modules.modules.find((module) => module.name === moduleName?.toLocaleLowerCase())
       setModule(module)
     }
   }, [modules, moduleName])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const abortController = new AbortController()
     if (!module) return
 

console/client/src/features/modules/ModulesGraph.tsx

@@ -1,24 +1,21 @@
-import React from 'react'
-import { PlusCircleIcon, MinusCircleIcon, ArrowPathIcon } from '@heroicons/react/24/outline'
+import { ArrowPathIcon, MinusCircleIcon, PlusCircleIcon } from '@heroicons/react/24/outline'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { modulesContext } from '../../providers/modules-provider'
-import { VerbId, ZoomCallbacks } from './modules.constants'
 import { Panel } from './components'
-import { svgZoom, formatSVG, dotToSVG, generateDot } from './graph'
+import { dotToSVG, formatSVG, generateDot, svgZoom } from './graph'
+import { ZoomCallbacks } from './modules.constants'
 
 export const ModulesGraph: React.FC<{
   className?: string
-  zoomId?: string
-  setSelectedVerbs: React.Dispatch<React.SetStateAction<VerbId[]>>
-  selectedVerbs: VerbId[]
   setZoomCallbacks: React.Dispatch<React.SetStateAction<ZoomCallbacks | undefined>>
   zoomCallbacks?: ZoomCallbacks
 }> = ({ className, setZoomCallbacks, zoomCallbacks }) => {
-  const modules = React.useContext(modulesContext)
-  const canvasRef = React.useRef<HTMLDivElement>(null)
-  const [resizeCount, setResizeCount] = React.useState<number>(0)
-  const previousDimensions = React.useRef({ width: 0, height: 0 }) // Store previous dimensions
+  const modules = useContext(modulesContext)
+  const canvasRef = useRef<HTMLDivElement>(null)
+  const [resizeCount, setResizeCount] = useState<number>(0)
+  const previousDimensions = useRef({ width: 0, height: 0 }) // Store previous dimensions
 
-  React.useEffect(() => {
+  useEffect(() => {
     const canvasCur = canvasRef.current
     if (canvasCur) {
       const observer = new ResizeObserver((entries) => {
@@ -39,7 +36,7 @@ export const ModulesGraph: React.FC<{
     }
   }, [canvasRef])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const canvas = canvasRef.current
     const ready = canvas && Boolean(modules)
     let animationFrameId: number

console/client/src/features/modules/ModulesPage.tsx

@@ -1,5 +1,5 @@
 import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
-import React from 'react'
+import { useContext, useState } from 'react'
 import { Page } from '../../layout'
 import { modulesContext } from '../../providers/modules-provider'
 import { SidePanelProvider } from '../../providers/side-panel-provider'
@@ -12,10 +12,10 @@ import type { ZoomCallbacks } from './modules.constants'
 import { VerbId } from './modules.constants'
 
 export const ModulesPage = () => {
-  const { modules } = React.useContext(modulesContext)
-  const [selectedVerbs, setSelectedVerbs] = React.useState<VerbId[]>([])
+  const { modules } = useContext(modulesContext)
+  const [selectedVerbs, setSelectedVerbs] = useState<VerbId[]>([])
   const hasVerbs = Boolean(selectedVerbs.length)
-  const [zoomCallbacks, setZoomCallbacks] = React.useState<ZoomCallbacks>()
+  const [zoomCallbacks, setZoomCallbacks] = useState<ZoomCallbacks>()
 
   return (
     <SidePanelProvider>
@@ -37,8 +37,6 @@ export const ModulesPage = () => {
             )}
           >
             <ModulesGraph
-              setSelectedVerbs={setSelectedVerbs}
-              selectedVerbs={selectedVerbs}
               setZoomCallbacks={setZoomCallbacks}
               zoomCallbacks={zoomCallbacks}
               className={classNames(hasVerbs && 'row-start-1 row-span-1 col-start-1 col-span-1')}

console/client/src/features/modules/ModulesRequests.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
+import { Timestamp } from '@bufbuild/protobuf'
+import { useContext, useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { Panel } from './components'
-import { modulesFilter } from '../../services/console.service'
-import { streamEvents } from '../../services/console.service'
-import { Event, Module, EventsQuery_Filter } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { Event, EventsQuery_Filter, Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { SidePanelContext } from '../../providers/side-panel-provider.tsx'
+import { modulesFilter, streamEvents } from '../../services/console.service'
+import { formatTimestampShort } from '../../utils/date.utils.ts'
+import { panelColor } from '../../utils/style.utils.ts'
 import { TimelineCall } from '../timeline/TimelineCall.tsx'
 import { TimelineDeploymentCreated } from '../timeline/TimelineDeploymentCreated.tsx'
 import { TimelineDeploymentUpdated } from '../timeline/TimelineDeploymentUpdated.tsx'
@@ -13,29 +15,23 @@ import { TimelineCallDetails } from '../timeline/details/TimelineCallDetails.tsx
 import { TimelineDeploymentCreatedDetails } from '../timeline/details/TimelineDeploymentCreatedDetails.tsx'
 import { TimelineDeploymentUpdatedDetails } from '../timeline/details/TimelineDeploymentUpdatedDetails.tsx'
 import { TimelineLogDetails } from '../timeline/details/TimelineLogDetails.tsx'
-import { SidePanelContext } from '../../providers/side-panel-provider.tsx'
-import { formatTimestampShort } from '../../utils/date.utils.ts'
-import { panelColor } from '../../utils/style.utils.ts'
-import { Timestamp } from '@bufbuild/protobuf'
+import { Panel } from './components'
 
 const maxTimelineEntries = 1000
 
-export const ModulesRequests: React.FC<{
-  className?: string
-  modules: Module[]
-}> = ({ className, modules }) => {
+export const ModulesRequests = ({ className, modules }: { className?: string; modules: Module[] }) => {
   const [searchParams, setSearchParams] = useSearchParams()
-  const [entries, setEntries] = React.useState<Event[]>([])
-  const { openPanel, closePanel } = React.useContext(SidePanelContext)
-  const [selectedEntry, setSelectedEntry] = React.useState<Event | null>(null)
+  const [entries, setEntries] = useState<Event[]>([])
+  const { openPanel, closePanel } = useContext(SidePanelContext)
+  const [selectedEntry, setSelectedEntry] = useState<Event | null>(null)
   const deployments = modules.map(({ deploymentName }) => deploymentName)
 
   const filters: EventsQuery_Filter[] = []
   if (deployments.length) {
     filters.push(modulesFilter(deployments))
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     setEntries([])
     if (!filters.length) return
     const abortController = new AbortController()

console/client/src/features/modules/ModulesSelectedVerbs.tsx

@@ -1,18 +1,22 @@
-import React from 'react'
 import { Tab } from '@headlessui/react'
+import React from 'react'
 import { CodeBlock } from '../../components'
-import { Panel } from './components'
-import { Module, Verb, Data } from '../../protos/xyz/block/ftl/v1/console/console_pb'
-import { VerbId } from './modules.constants'
-import { getNames, buildVerbSchema } from './modules.utils'
+import { Data, Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { classNames } from '../../utils'
 import { VerbForm } from '../verbs/VerbForm'
+import { Panel } from './components'
+import { VerbId } from './modules.constants'
+import { buildVerbSchema, getNames } from './modules.utils'
 
-export const ModulesSelectedVerbs: React.FC<{
+export const ModulesSelectedVerbs = ({
+  className,
+  modules,
+  selectedVerbs,
+}: {
   className?: string
   modules: Module[]
   selectedVerbs?: VerbId[]
-}> = ({ className, modules, selectedVerbs }) => {
+}) => {
   if (!selectedVerbs?.length) return <></>
   const verbs: { module: Module; verb: Verb; callData: Data[] }[] = []
   for (const verbId of selectedVerbs) {

console/client/src/features/modules/ModulesSidebar.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
 import { Listbox } from '@headlessui/react'
 import { EyeIcon } from '@heroicons/react/20/solid'
+import React, { useState } from 'react'
 import { Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
-import { VerbId, ZoomCallbacks } from './modules.constants'
-import { getNames } from './modules.utils'
 import { classNames } from '../../utils'
 import { backgrounds, borders, colors } from './components'
+import { VerbId, ZoomCallbacks } from './modules.constants'
+import { getNames } from './modules.utils'
 
 interface DeploymentVerbs {
   deploymentName: string
@@ -14,12 +14,17 @@ interface DeploymentVerbs {
   queriedVerbs: Set<VerbId>
 }
 
-const ModulesOption: React.FC<{
+const ModulesOption = ({
+  id,
+  zoomCallbacks,
+  verbs,
+  deploymentName,
+}: {
   id: string
   verbs: VerbId[]
   deploymentName: string
   zoomCallbacks?: ZoomCallbacks
-}> = ({ id, zoomCallbacks, verbs, deploymentName }) => {
+}) => {
   return (
     <li className={`flex flex-wrap gap-1 ${backgrounds.level1} ${borders.level1}`}>
       <div className={`w-1 bg-${colors.deployment}`}></div>
@@ -73,10 +78,8 @@ export const ModulesSidebar: React.FC<{
   selectedVerbs: VerbId[]
   zoomCallbacks?: ZoomCallbacks
 }> = ({ className, modules, setSelectedVerbs, selectedVerbs, zoomCallbacks }) => {
-  /** Setup hooks */
-  const [query, setQuery] = React.useState('')
+  const [query, setQuery] = useState('')
 
-  /** Format data */
   const map: Map<string, DeploymentVerbs> = new Map()
   for (const { name: moduleName, verbs, deploymentName } of modules) {
     const value: DeploymentVerbs = {

console/client/src/features/modules/components/index.ts

@@ -1,3 +1,2 @@
-export * from './Select'
 export * from './Panel'
 export * from './components.constants'

console/client/src/features/modules/graph/svg-zoom.ts

@@ -1,4 +1,4 @@
-import { SVG, Element, Svg } from '@svgdotjs/svg.js'
+import { Element, SVG, Svg } from '@svgdotjs/svg.js'
 import '@svgdotjs/svg.panzoom.js/dist/svg.panzoom.esm.js'
 
 const centerGroup = ({

console/client/src/features/requests/RequestGraph.tsx

@@ -2,14 +2,17 @@ import { Duration, Timestamp } from '@bufbuild/protobuf'
 import { CallEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { verbRefString } from '../verbs/verb.utils'
 
-interface CallBlockProps {
+const CallBlock = ({
+  call,
+  selectedCall,
+  firstTimeStamp,
+  firstDuration,
+}: {
   call: CallEvent
   selectedCall?: CallEvent
   firstTimeStamp: Timestamp
   firstDuration: Duration
-}
-
-const CallBlock = ({ call, selectedCall, firstTimeStamp, firstDuration }: CallBlockProps) => {
+}) => {
   const totalDurationMillis = (firstDuration.nanos ?? 0) / 1000000
   const durationInMillis = (call.duration?.nanos ?? 0) / 1000000
   let width = (durationInMillis / totalDurationMillis) * 100