Skip to content

Frontend Component Dependency Graph

This diagram shows the import relationships between all frontend components in the frontend/src/ directory. It is auto-generated from the source code and updated on every build.

  • Blue nodes: React components
  • Orange nodes: Zustand stores
  • Purple nodes: Custom hooks
  • Green nodes: Utility libraries
  • Pink nodes: TypeScript types
graph TD
classDef default fill:#f9f9f9,stroke:#333,stroke-width:1px;
classDef component fill:#e1f5fe,stroke:#0288d1,stroke-width:2px;
classDef store fill:#fff3e0,stroke:#f57c00,stroke-width:2px;
classDef hook fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px;
classDef lib fill:#e8f5e9,stroke:#388e3c,stroke-width:2px;
classDef types fill:#fce4ec,stroke:#c2185b,stroke-width:2px;

207 components analysed.

| Component | Path | Imports | Imported By | | --- | --- | --- | --- | | App | App.tsx | 20 (AlertToast, ConnectionLostBanner, DashboardLayout, DrawersContext, EnvironmentOverlay, LoginPage, +14 more) | 1 (main) | | rbac | auth/rbac.ts | 0 (—) | 0 (—) | | AdminPanel | components/AdminPanel.tsx | 0 (—) | 1 (PopOutHost) | | AdvisoryPanel | components/AdvisoryPanel.tsx | 0 (—) | 1 (InstrumentAnalysisPanel) | | AlertDrawer | components/AlertDrawer.tsx | 2 (DashboardContext, Drawer) | 3 (AlertToast, AlertsPanel, StatusBar) | | AlertsPanel | components/AlertsPanel.tsx | 1 (AlertDrawer) | 0 (—) | | AlertToast | components/AlertToast.tsx | 2 (AlertDrawer, DrawersContext) | 1 (App) | | AlgoLeaderboardPanel | components/AlgoLeaderboardPanel.tsx | 0 (—) | 0 (—) | | AlgoMonitor | components/AlgoMonitor.tsx | 2 (ResizableHeader, PopOutButton) | 1 (PopOutHost) | | AnalysisPanel | components/AnalysisPanel.tsx | 0 (—) | 1 (PopOutHost) | | AssetSelector | components/AssetSelector.tsx | 0 (—) | 1 (OrderTicket) | | BasketOrderPanel | components/BasketOrderPanel.tsx | 0 (—) | 0 (—) | | BugReportModal | components/BugReportModal.tsx | 0 (—) | 1 (StatusBar) | | BuildInfo | components/BuildInfo.tsx | 0 (—) | 2 (StartupOverlay, StatusBar) | | CandlestickChart | components/CandlestickChart.tsx | 0 (—) | 1 (PopOutHost) | | ChildOrdersPanel | components/ChildOrdersPanel.tsx | 2 (panelRegistry, ResizableHeader) | 0 (—) | | ClientRfqPanel | components/ClientRfqPanel.tsx | 1 (shared) | 0 (—) | | ComponentPicker | components/ComponentPicker.tsx | 3 (DashboardLayout, panelRegistry, panelDragState) | 1 (StatusBar) | | ConnectionLostBanner | components/ConnectionLostBanner.tsx | 0 (—) | 1 (App) | | ContextMenu | components/ContextMenu.tsx | 0 (—) | 4 (DecisionLog, MarketLadder, MarketMatch, OrderBlotter) | | DashboardContext | components/dashboard/DashboardContext.tsx | 3 (layoutModels, layoutUtils, panelRegistry) | 4 (AlertDrawer, DashboardLayout, StatusBar, DashboardLayout) | | DashboardLayout | components/dashboard/DashboardLayout.tsx | 5 (DashboardContext, layoutModels, layoutUtils, panelComponents, panelRegistry) | 1 (DashboardLayout) | | layoutModels | components/dashboard/layoutModels.ts | 1 (panelRegistry) | 4 (DashboardLayout, DashboardContext, DashboardLayout, layoutUtils) | | layoutUtils | components/dashboard/layoutUtils.ts | 2 (layoutModels, panelRegistry) | 3 (DashboardLayout, DashboardContext, DashboardLayout) | | panelComponents | components/dashboard/panelComponents.ts | 1 (panelRegistry) | 1 (DashboardLayout) | | panelRegistry | components/dashboard/panelRegistry.ts | 0 (—) | 12 (ChildOrdersPanel, ComponentPicker, DashboardLayout, MarketLadder, OrderBlotter, PopOutHost, +6 more) | | DashboardLayout | components/DashboardLayout.tsx | 5 (DashboardContext, DashboardLayout, layoutModels, layoutUtils, panelRegistry) | 6 (App, ComponentPicker, PanelMenu, PopOutHost, TemplatePicker, WorkspaceBar) | | DataDepthPanel | components/DataDepthPanel.tsx | 1 (DataDepthDrawer) | 0 (—) | | DecisionLog | components/DecisionLog.tsx | 1 (ContextMenu) | 1 (PopOutHost) | | DemoDayPanel | components/DemoDayPanel.tsx | 0 (—) | 0 (—) | | DemoPersonas | components/DemoPersonas.tsx | 0 (—) | 1 (LoginPage) | | DevToolsPanel | components/DevToolsPanel.tsx | 0 (—) | 0 (—) | | DataDepthDrawer | components/drawers/DataDepthDrawer.tsx | 2 (Drawer, DrawersContext) | 2 (DataDepthPanel, StatusBar) | | Drawer | components/drawers/Drawer.tsx | 1 (DrawersContext) | 3 (AlertDrawer, DataDepthDrawer, LogsDrawer) | | DrawersContext | components/drawers/DrawersContext.tsx | 0 (—) | 5 (App, AlertToast, StatusBar, DataDepthDrawer, Drawer) | | LogsDrawer | components/drawers/LogsDrawer.tsx | 1 (Drawer) | 1 (StatusBar) | | DurationLadderPanel | components/DurationLadderPanel.tsx | 0 (—) | 0 (—) | | EnvironmentOverlay | components/EnvironmentOverlay.tsx | 0 (—) | 1 (App) | | EstateOverviewPanel | components/EstateOverviewPanel.tsx | 0 (—) | 0 (—) | | ExecutionsPanel | components/ExecutionsPanel.tsx | 4 (CfRuleEditor, FilterBar, ResizableHeader, PopOutButton) | 1 (PopOutHost) | | GreeksSurfacePanel | components/GreeksSurfacePanel.tsx | 0 (—) | 0 (—) | | CfRuleEditor | components/grid/CfRuleEditor.tsx | 1 (ExpressionBuilder) | 2 (ExecutionsPanel, OrderBlotter) | | ExpressionBuilder | components/grid/ExpressionBuilder.tsx | 0 (—) | 2 (CfRuleEditor, FilterBar) | | FilterBar | components/grid/FilterBar.tsx | 1 (ExpressionBuilder) | 2 (ExecutionsPanel, OrderBlotter) | | ResizableHeader | components/grid/ResizableHeader.tsx | 0 (—) | 5 (AlgoMonitor, ChildOrdersPanel, ExecutionsPanel, MarketMatch, OrderBlotter) | | SortableHeader | components/grid/SortableHeader.tsx | 0 (—) | 0 (—) | | InstrumentAnalysisPanel | components/InstrumentAnalysisPanel.tsx | 1 (AdvisoryPanel) | 0 (—) | | KillSwitchButton | components/KillSwitchButton.tsx | 1 (payloads) | 1 (StatusBar) | | payloads | components/KillSwitchButton/payloads.ts | 0 (—) | 1 (KillSwitchButton) | | LlmSubsystemPanel | components/LlmSubsystemPanel.tsx | 0 (—) | 0 (—) | | LoadGenPanel | components/LoadGenPanel.tsx | 0 (—) | 0 (—) | | LoadTestPanel | components/LoadTestPanel.tsx | 0 (—) | 0 (—) | | LoginPage | components/LoginPage.tsx | 3 (DemoPersonas, RegistrationForm, StatusBar) | 1 (App) | | RegistrationForm | components/LoginPage/RegistrationForm.tsx | 0 (—) | 1 (LoginPage) | | MarketDataSourcesPanel | components/MarketDataSourcesPanel.tsx | 0 (—) | 0 (—) | | MarketDepth | components/MarketDepth.tsx | 0 (—) | 1 (PopOutHost) | | MarketFeedControlPanel | components/MarketFeedControlPanel.tsx | 0 (—) | 0 (—) | | MarketHeatmap | components/MarketHeatmap.tsx | 1 (Tooltip) | 1 (PopOutHost) | | Tooltip | components/MarketHeatmap/Tooltip.tsx | 0 (—) | 1 (MarketHeatmap) | | MarketLadder | components/MarketLadder.tsx | 3 (ContextMenu, panelRegistry, PopOutButton) | 1 (PopOutHost) | | MarketMatch | components/MarketMatch.tsx | 2 (ContextMenu, ResizableHeader) | 1 (PopOutHost) | | MyPositionsPanel | components/MyPositionsPanel.tsx | 1 (PopOutButton) | 0 (—) | | NewsSourcesPanel | components/NewsSourcesPanel.tsx | 0 (—) | 1 (PopOutHost) | | ObservabilityPanel | components/ObservabilityPanel.tsx | 1 (PopOutButton) | 1 (PopOutHost) | | OptionPricingPanel | components/OptionPricingPanel.tsx | 0 (—) | 0 (—) | | OrderBlotter | components/OrderBlotter.tsx | 6 (ContextMenu, panelRegistry, CfRuleEditor, FilterBar, ResizableHeader, PopOutButton) | 1 (PopOutHost) | | OrderProgressPanel | components/OrderProgressPanel.tsx | 0 (—) | 1 (PopOutHost) | | OrderTicket | components/OrderTicket.tsx | 8 (AssetSelector, AssetInfoBar, buildAlgoParams, buildTrade, constants, OptionPreview, +2 more) | 1 (PopOutHost) | | AssetInfoBar | components/OrderTicket/AssetInfoBar.tsx | 0 (—) | 1 (OrderTicket) | | buildAlgoParams | components/OrderTicket/buildAlgoParams.ts | 0 (—) | 1 (OrderTicket) | | buildTrade | components/OrderTicket/buildTrade.ts | 0 (—) | 1 (OrderTicket) | | constants | components/OrderTicket/constants.ts | 0 (—) | 1 (OrderTicket) | | OptionPreview | components/OrderTicket/OptionPreview.tsx | 0 (—) | 1 (OrderTicket) | | OrderPreview | components/OrderTicket/OrderPreview.tsx | 0 (—) | 1 (OrderTicket) | | OverflowBar | components/OverflowBar.tsx | 0 (—) | 1 (StatusBar) | | panelDragState | components/panelDragState.ts | 0 (—) | 1 (ComponentPicker) | | PanelMenu | components/PanelMenu.tsx | 1 (DashboardLayout) | 0 (—) | | PlatformStatusPanel | components/PlatformStatusPanel.tsx | 0 (—) | 0 (—) | | PopOutButton | components/PopOutButton.tsx | 0 (—) | 8 (AlgoMonitor, ExecutionsPanel, MarketLadder, MyPositionsPanel, ObservabilityPanel, OrderBlotter, +2 more) | | PopOutHost | components/PopOutHost.tsx | 17 (AdminPanel, AlgoMonitor, AnalysisPanel, CandlestickChart, DashboardLayout, DecisionLog, +11 more) | 1 (main) | | PopOutPlaceholder | components/PopOutPlaceholder.tsx | 0 (—) | 0 (—) | | PriceFanPanel | components/PriceFanPanel.tsx | 0 (—) | 0 (—) | | ProductBookPanel | components/ProductBookPanel.tsx | 0 (—) | 0 (—) | | api | components/ProductBuilder/api.ts | 0 (—) | 2 (legs, ProductBuilderPanel) | | legs | components/ProductBuilder/legs.ts | 1 (api) | 1 (ProductBuilderPanel) | | ProductBuilderPanel | components/ProductBuilderPanel.tsx | 2 (api, legs) | 0 (—) | | QuickTradeBar | components/QuickTradeBar.tsx | 0 (—) | 1 (App) | | ResearchRadarPanel | components/ResearchRadarPanel.tsx | 0 (—) | 0 (—) | | shared | components/rfq/shared.ts | 0 (—) | 2 (ClientRfqPanel, SalesWorkbenchPanel) | | RiskDashboardPanel | components/RiskDashboardPanel.tsx | 1 (PopOutButton) | 0 (—) | | SalesWorkbenchPanel | components/SalesWorkbenchPanel.tsx | 1 (shared) | 0 (—) | | ScenarioMatrixPanel | components/ScenarioMatrixPanel.tsx | 0 (—) | 0 (—) | | ScenariosPanel | components/ScenariosPanel.tsx | 0 (—) | 0 (—) | | ServiceHealthPanel | components/ServiceHealthPanel.tsx | 0 (—) | 0 (—) | | ServiceRow | components/ServiceRow.tsx | 1 (StatusDot) | 1 (ServiceStatus) | | ServiceStatus | components/ServiceStatus.tsx | 2 (ServiceRow, StatusDot) | 1 (StatusBar) | | SessionReplayPanel | components/SessionReplayPanel.tsx | 2 (PopOutButton, replayVideoExport) | 0 (—) | | SharedWorkspaceBrowser | components/SharedWorkspaceBrowser.tsx | 0 (—) | 1 (WorkspaceBar) | | SignalExplainabilityPanel | components/SignalExplainabilityPanel.tsx | 0 (—) | 0 (—) | | SpreadAnalysisPanel | components/SpreadAnalysisPanel.tsx | 0 (—) | 0 (—) | | StartupOverlay | components/StartupOverlay.tsx | 2 (BuildInfo, serviceCatalog) | 1 (App) | | serviceCatalog | components/StartupOverlay/serviceCatalog.ts | 0 (—) | 1 (StartupOverlay) | | StatusBar | components/StatusBar.tsx | 13 (AlertDrawer, BugReportModal, BuildInfo, ComponentPicker, DashboardContext, panelRegistry, +7 more) | 2 (App, LoginPage) | | StatusDot | components/StatusDot.tsx | 0 (—) | 2 (ServiceRow, ServiceStatus) | | StrategyParams | components/StrategyParams.tsx | 0 (—) | 1 (OrderTicket) | | SymbolSearchBar | components/SymbolSearchBar.tsx | 0 (—) | 0 (—) | | TemplatePicker | components/TemplatePicker.tsx | 1 (DashboardLayout) | 1 (StatusBar) | | ThroughputGaugesPanel | components/ThroughputGaugesPanel.tsx | 0 (—) | 0 (—) | | TradeRecommendationPanel | components/TradeRecommendationPanel.tsx | 0 (—) | 0 (—) | | VolatilityProfilePanel | components/VolatilityProfilePanel.tsx | 0 (—) | 0 (—) | | VolSurfacePanel | components/VolSurfacePanel.tsx | 0 (—) | 0 (—) | | WorkspaceBar | components/WorkspaceBar.tsx | 3 (DashboardLayout, SharedWorkspaceBrowser, WorkspaceListItem) | 2 (App, WorkspaceListItem) | | WorkspaceListItem | components/WorkspaceBar/WorkspaceListItem.tsx | 1 (WorkspaceBar) | 1 (WorkspaceBar) | | YieldCurvePanel | components/YieldCurvePanel.tsx | 0 (—) | 0 (—) | | TradingContext | context/TradingContext.tsx | 0 (—) | 2 (App, main) | | ChannelContext | contexts/ChannelContext.tsx | 0 (—) | 0 (—) | | bondUniverse | data/bondUniverse.ts | 0 (—) | 0 (—) | | market-session | domain/market/market-session.ts | 0 (—) | 1 (trading-calendar) | | trading-calendar | domain/market/trading-calendar.ts | 1 (market-session) | 0 (—) | | venue-capabilities | domain/market/venue-capabilities.ts | 0 (—) | 0 (—) | | parse | domain/quickTrade/parse.ts | 0 (—) | 0 (—) | | async-risk | domain/ticket/async-risk.ts | 1 (ticket-types) | 1 (useAsyncRisk) | | field-definitions | domain/ticket/field-definitions.ts | 0 (—) | 1 (resolve-ticket) | | field-registry | domain/ticket/field-registry.ts | 0 (—) | 1 (resolve-ticket) | | resolve-ticket | domain/ticket/resolve-ticket.ts | 14 (field-definitions, field-registry, dark-pool, desk-access, instrument-spec, kill-switch, +8 more) | 1 (useTicketResolution) | | dark-pool | domain/ticket/rules/dark-pool.ts | 0 (—) | 1 (resolve-ticket) | | desk-access | domain/ticket/rules/desk-access.ts | 0 (—) | 1 (resolve-ticket) | | instrument-spec | domain/ticket/rules/instrument-spec.ts | 0 (—) | 1 (resolve-ticket) | | kill-switch | domain/ticket/rules/kill-switch.ts | 0 (—) | 1 (resolve-ticket) | | limit-checks | domain/ticket/rules/limit-checks.ts | 0 (—) | 1 (resolve-ticket) | | price-collar | domain/ticket/rules/price-collar.ts | 0 (—) | 1 (resolve-ticket) | | role-check | domain/ticket/rules/role-check.ts | 0 (—) | 1 (resolve-ticket) | | session-rules | domain/ticket/rules/session-rules.ts | 0 (—) | 1 (resolve-ticket) | | spread-check | domain/ticket/rules/spread-check.ts | 0 (—) | 1 (resolve-ticket) | | static-validation | domain/ticket/rules/static-validation.ts | 0 (—) | 1 (resolve-ticket) | | venue-rules | domain/ticket/rules/venue-rules.ts | 0 (—) | 1 (resolve-ticket) | | ticket-types | domain/ticket/ticket-types.ts | 0 (—) | 4 (async-risk, resolve-ticket, useAsyncRisk, useTicketResolution) | | useAsyncRisk | domain/ticket/useAsyncRisk.ts | 2 (async-risk, ticket-types) | 0 (—) | | useTicketResolution | domain/ticket/useTicketResolution.ts | 2 (resolve-ticket, ticket-types) | 0 (—) | | electron.d | electron.d.ts | 0 (—) | 0 (—) | | fixCodec | fix/fixCodec.ts | 0 (—) | 1 (fixSession) | | fixSession | fix/fixSession.ts | 1 (fixCodec) | 0 (—) | | useChannelIn | hooks/useChannelIn.ts | 0 (—) | 0 (—) | | useChannelOut | hooks/useChannelOut.ts | 0 (—) | 0 (—) | | useColumnLayout | hooks/useColumnLayout.ts | 0 (—) | 0 (—) | | useFrontendMemoryTelemetry | hooks/useFrontendMemoryTelemetry.ts | 0 (—) | 0 (—) | | useGridQuery | hooks/useGridQuery.ts | 0 (—) | 0 (—) | | usePopOut | hooks/usePopOut.ts | 0 (—) | 0 (—) | | useSessionRecording | hooks/useSessionRecording.ts | 0 (—) | 1 (App) | | useWorkspaceSync | hooks/useWorkspaceSync.ts | 0 (—) | 1 (App) | | replayVideoExport | lib/replayVideoExport.ts | 0 (—) | 1 (SessionReplayPanel) | | sessionRecorder | lib/sessionRecorder.ts | 0 (—) | 0 (—) | | sha256 | lib/sha256.ts | 0 (—) | 0 (—) | | main | main.tsx | 7 (App, PopOutHost, TradingContext, channel, index, observabilitySlice, +1 more) | 0 (—) | | setupTests | setupTests.ts | 0 (—) | 0 (—) | | advisoryApi | store/advisoryApi.ts | 2 (advisorySlice, llmSubsystemSlice) | 1 (index) | | advisorySlice | store/advisorySlice.ts | 1 (safeKey) | 2 (advisoryApi, index) | | alertsSlice | store/alertsSlice.ts | 1 (index) | 2 (App, index) | | analyticsApi | store/analyticsApi.ts | 0 (—) | 1 (index) | | authSlice | store/authSlice.ts | 0 (—) | 3 (App, index, userApi) | | breakersSlice | store/breakersSlice.ts | 0 (—) | 1 (index) | | channel | store/channel.ts | 0 (—) | 2 (main, index) | | channelsSlice | store/channelsSlice.ts | 0 (—) | 1 (index) | | feedSlice | store/feedSlice.ts | 0 (—) | 1 (index) | | gatewayApi | store/gatewayApi.ts | 0 (—) | 1 (index) | | gridApi | store/gridApi.ts | 0 (—) | 1 (index) | | gridPrefsSlice | store/gridPrefsSlice.ts | 1 (index) | 1 (index) | | hooks | store/hooks.ts | 1 (index) | 1 (App) | | index | store/index.ts | 35 (advisoryApi, advisorySlice, alertsSlice, analyticsApi, authSlice, breakersSlice, +29 more) | 8 (App, main, alertsSlice, gridPrefsSlice, hooks, newsSlice, +2 more) | | intelligenceSlice | store/intelligenceSlice.ts | 1 (safeKey) | 1 (index) | | killSwitchSlice | store/killSwitchSlice.ts | 1 (ordersSlice) | 1 (index) | | llmSubsystemSlice | store/llmSubsystemSlice.ts | 0 (—) | 2 (advisoryApi, index) | | marketDataApi | store/marketDataApi.ts | 0 (—) | 1 (index) | | marketSlice | store/marketSlice.ts | 0 (—) | 1 (index) | | alertsMiddleware | store/middleware/alertsMiddleware.ts | 0 (—) | 1 (index) | | errorTransportMiddleware | store/middleware/errorTransportMiddleware.ts | 0 (—) | 1 (index) | | gatewayMiddleware | store/middleware/gatewayMiddleware.ts | 1 (types) | 1 (index) | | simulationMiddleware | store/middleware/simulationMiddleware.ts | 0 (—) | 1 (index) | | versionWatchMiddleware | store/middleware/versionWatchMiddleware.ts | 0 (—) | 1 (index) | | newsApi | store/newsApi.ts | 1 (newsSlice) | 1 (index) | | newsSlice | store/newsSlice.ts | 2 (index, safeKey) | 2 (index, newsApi) | | observabilitySlice | store/observabilitySlice.ts | 0 (—) | 3 (App, main, index) | | ordersSlice | store/ordersSlice.ts | 0 (—) | 2 (index, killSwitchSlice) | | parseTicketApi | store/parseTicketApi.ts | 0 (—) | 1 (index) | | replayApi | store/replayApi.ts | 0 (—) | 1 (index) | | riskApi | store/riskApi.ts | 0 (—) | 1 (index) | | safeKey | store/safeKey.ts | 0 (—) | 4 (advisorySlice, intelligenceSlice, newsSlice, windowSlice) | | scenariosApi | store/scenariosApi.ts | 0 (—) | 1 (index) | | selectors | store/selectors.ts | 1 (index) | 0 (—) | | servicesApi | store/servicesApi.ts | 0 (—) | 2 (main, index) | | themeSlice | store/themeSlice.ts | 0 (—) | 2 (App, index) | | uiSlice | store/uiSlice.ts | 1 (index) | 2 (App, index) | | userApi | store/userApi.ts | 1 (authSlice) | 1 (index) | | windowSlice | store/windowSlice.ts | 1 (safeKey) | 1 (index) | | tokens | tokens.ts | 0 (—) | 0 (—) | | types | types.ts | 0 (—) | 1 (gatewayMiddleware) | | analytics | types/analytics.ts | 0 (—) | 0 (—) | | gridPrefs | types/gridPrefs.ts | 0 (—) | 1 (gridQuery) | | gridQuery | types/gridQuery.ts | 1 (gridPrefs) | 0 (—) | | marketData | types/marketData.ts | 0 (—) | 0 (—) | | clock | utils/clock.ts | 0 (—) | 0 (—) | | format | utils/format.ts | 0 (—) | 0 (—) | | formatPrice | utils/formatPrice.ts | 0 (—) | 0 (—) | | githubLinks | utils/githubLinks.ts | 0 (—) | 0 (—) | | gridFilter | utils/gridFilter.ts | 0 (—) | 0 (—) | | orderTicketWindow | utils/orderTicketWindow.ts | 0 (—) | 0 (—) | | symbolSearch | utils/symbolSearch.ts | 0 (—) | 0 (—) |

| Color | Category | | --- | --- | | | React Components | | | Zustand Stores | | | Custom Hooks | | | Utility Libraries | | | TypeScript Types |

Run npm run generate in docs/site/ to regenerate this page and the underlying data file.