diff --git a/frontend/src/framework/GuiMessageBroker.ts b/frontend/src/framework/GuiMessageBroker.ts index 1ba5a743e..c7753c527 100644 --- a/frontend/src/framework/GuiMessageBroker.ts +++ b/frontend/src/framework/GuiMessageBroker.ts @@ -51,23 +51,17 @@ export type GuiEventPayloads = { [GuiEvent.EditDataChannelConnectionsForModuleInstanceRequest]: { moduleInstanceId: string; }; - [GuiEvent.ShowDataChannelConnectionsRequest]: {}; - [GuiEvent.HideDataChannelConnectionsRequest]: {}; [GuiEvent.HighlightDataChannelConnectionRequest]: { moduleInstanceId: string; dataChannelName: string; }; - [GuiEvent.UnhighlightDataChannelConnectionRequest]: {}; - [GuiEvent.DataChannelConnectionsChange]: {}; [GuiEvent.DataChannelOriginPointerDown]: { moduleInstanceId: string; originElement: HTMLElement; }; - [GuiEvent.DataChannelPointerUp]: {}; [GuiEvent.DataChannelNodeHover]: { connectionAllowed: boolean; }; - [GuiEvent.DataChannelNodeUnhover]: {}; }; type GuiStateValueTypes = { @@ -116,7 +110,12 @@ export class GuiMessageBroker { } } - subscribeToEvent(event: T, callback: (payload: GuiEventPayloads[T]) => void) { + subscribeToEvent>(event: T, callback: () => void): () => void; + subscribeToEvent( + event: T, + callback: (payload: GuiEventPayloads[T]) => void + ): () => void; + subscribeToEvent(event: T, callback: (payload?: any) => void): () => void { const eventListeners = this._eventListeners.get(event) || new Set(); eventListeners.add(callback); this._eventListeners.set(event, eventListeners); @@ -126,7 +125,9 @@ export class GuiMessageBroker { }; } - publishEvent(event: T, payload: GuiEventPayloads[T]) { + publishEvent>(event: T): void; + publishEvent(event: T, payload: GuiEventPayloads[T]): void; + publishEvent(event: T, payload?: any): void { const eventListeners = this._eventListeners.get(event); if (eventListeners) { eventListeners.forEach((callback) => callback({ ...payload })); diff --git a/frontend/src/framework/ModuleContext.ts b/frontend/src/framework/ModuleContext.ts index d08ba7723..327426f3f 100644 --- a/frontend/src/framework/ModuleContext.ts +++ b/frontend/src/framework/ModuleContext.ts @@ -80,7 +80,7 @@ export class ModuleContext { this._moduleInstance.setInputChannel(name, setting); } } - }, []); + }, [initialSettings]); React.useEffect(() => { function handleNewChannel(newChannel: BroadcastChannel | null) { diff --git a/frontend/src/framework/components/ChannelSelect/channelSelect.tsx b/frontend/src/framework/components/ChannelSelect/channelSelect.tsx index 7261aa17b..9761d47df 100644 --- a/frontend/src/framework/components/ChannelSelect/channelSelect.tsx +++ b/frontend/src/framework/components/ChannelSelect/channelSelect.tsx @@ -1,11 +1,6 @@ import React from "react"; -import { - BroadcastChannel, - BroadcastChannelKeyCategory, - Broadcaster, - checkChannelCompatibility, -} from "@framework/Broadcaster"; +import { BroadcastChannel, Broadcaster } from "@framework/Broadcaster"; import { ModuleContext } from "@framework/ModuleContext"; import { BaseComponentProps } from "@lib/components/BaseComponent"; import { Dropdown } from "@lib/components/Dropdown"; diff --git a/frontend/src/framework/internal/components/Content/private-components/DataChannelVisualizationLayer/dataChannelVisualizationLayer.tsx b/frontend/src/framework/internal/components/Content/private-components/DataChannelVisualizationLayer/dataChannelVisualizationLayer.tsx index e5523b640..e754134b1 100644 --- a/frontend/src/framework/internal/components/Content/private-components/DataChannelVisualizationLayer/dataChannelVisualizationLayer.tsx +++ b/frontend/src/framework/internal/components/Content/private-components/DataChannelVisualizationLayer/dataChannelVisualizationLayer.tsx @@ -55,21 +55,21 @@ export const DataChannelVisualizationLayer: React.FC { - let mousePressed = false; - let currentOriginPoint: Point = { x: 0, y: 0 }; - let editDataChannelConnections: boolean = false; + let localMousePressed = false; + let localCurrentOriginPoint: Point = { x: 0, y: 0 }; + let localEditDataChannelConnections: boolean = false; function handleDataChannelOriginPointerDown(payload: GuiEventPayloads[GuiEvent.DataChannelOriginPointerDown]) { const clientRect = payload.originElement.getBoundingClientRect(); - currentOriginPoint = { + localCurrentOriginPoint = { x: clientRect.left + clientRect.width / 2, y: clientRect.top + clientRect.height / 2, }; setVisible(true); - setOriginPoint(currentOriginPoint); + setOriginPoint(localCurrentOriginPoint); props.workbench.getGlobalCursor().setOverrideCursor(GlobalCursorType.Crosshair); - mousePressed = true; - setCurrentPointerPosition(currentOriginPoint); + localMousePressed = true; + setCurrentPointerPosition(localCurrentOriginPoint); setCurrentChannelName(null); setDataChannelConnectionsLayerVisible(true); @@ -86,17 +86,17 @@ export const DataChannelVisualizationLayer: React.FC boundingRect.top ? boundingRect.bottom : boundingRect.top, + y: localCurrentOriginPoint.y > boundingRect.top ? boundingRect.bottom : boundingRect.top, }); return; } @@ -134,10 +134,12 @@ export const DataChannelVisualizationLayer: React.FC; @@ -105,7 +105,7 @@ export const Header: React.FC = (props) => { title="Connect data channels to other module instances" onPointerDown={handleDataChannelOriginPointerDown} > - + )} {props.moduleInstance.getInputChannelDefs().length > 0 && ( @@ -115,7 +115,7 @@ export const Header: React.FC = (props) => { onPointerUp={handleInputChannelsPointerUp} onPointerDown={handleInputChannelsPointerDown} > - + )}
= (props) => { const guiMessageBroker = props.workbench.getGuiMessageBroker(); React.useEffect(() => { - let isHovered = false; - let isConnectable = false; - let moduleInstanceId = ""; + let localHovered = false; + let localConnectable = false; + let localModuleInstanceId = ""; + let localEditDataChannelConnections = false; const moduleInstance = props.workbench.getModuleInstance(props.moduleInstanceId); function handleDataChannelOriginPointerDown(payload: GuiEventPayloads[GuiEvent.DataChannelOriginPointerDown]) { + localConnectable = false; + setConnectable(false); + localModuleInstanceId = ""; + const originModuleInstance = props.workbench.getModuleInstance(payload.moduleInstanceId); if (!originModuleInstance) { return; @@ -77,54 +81,60 @@ export const InputChannelNode: React.FC = (props) => { } setConnectable(true); - isConnectable = true; - moduleInstanceId = payload.moduleInstanceId; - guiMessageBroker.publishEvent(GuiEvent.DataChannelConnectionsChange, {}); + localConnectable = true; + localModuleInstanceId = payload.moduleInstanceId; + guiMessageBroker.publishEvent(GuiEvent.DataChannelConnectionsChange); } function handlePointerUp(e: PointerEvent) { - if (isHovered) { + if (localHovered) { if (removeButtonRef.current && removeButtonRef.current.contains(e.target as Node)) { props.onChannelConnectionDisconnect(props.inputName); setHovered(false); - isHovered = false; - } else if (isConnectable) { - props.onChannelConnect(props.inputName, moduleInstanceId, pointerEventToPoint(e)); + localHovered = false; + } else if (localConnectable) { + props.onChannelConnect(props.inputName, localModuleInstanceId, pointerEventToPoint(e)); + setHovered(false); + localHovered = false; + } else if (!localConnectable && !localEditDataChannelConnections) { setHovered(false); - isHovered = false; + localHovered = false; + guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest); } } - guiMessageBroker.publishEvent(GuiEvent.DataChannelPointerUp, {}); + guiMessageBroker.publishEvent(GuiEvent.DataChannelPointerUp); e.stopPropagation(); } function handleEditDataChannelConnectionsRequest() { setEditDataChannelConnections(true); + localEditDataChannelConnections = true; } function handleDataChannelDone() { - isConnectable = false; + localConnectable = false; setConnectable(false); setHovered(false); - isHovered = false; + localHovered = false; setEditDataChannelConnections(false); + localEditDataChannelConnections = false; } function handlePointerMove(e: PointerEvent) { const boundingRect = ref.current?.getBoundingClientRect(); if (boundingRect && rectContainsPoint(boundingRect, pointerEventToPoint(e))) { setHovered(true); - isHovered = true; + localHovered = true; return; } - if (isHovered) { + if (localHovered) { setHovered(false); - isHovered = false; + localHovered = false; } } function handleResize() { - guiMessageBroker.publishEvent(GuiEvent.DataChannelConnectionsChange, {}); + guiMessageBroker.publishEvent(GuiEvent.DataChannelConnectionsChange); } function checkIfConnection() { @@ -194,8 +204,8 @@ export const InputChannelNode: React.FC = (props) => { } function handlePointerLeave() { - guiMessageBroker.publishEvent(GuiEvent.UnhighlightDataChannelConnectionRequest, {}); - guiMessageBroker.publishEvent(GuiEvent.DataChannelNodeUnhover, {}); + guiMessageBroker.publishEvent(GuiEvent.UnhighlightDataChannelConnectionRequest); + guiMessageBroker.publishEvent(GuiEvent.DataChannelNodeUnhover); } return ( @@ -207,7 +217,9 @@ export const InputChannelNode: React.FC = (props) => { "flex flex-col items-center justify-center rounded border p-4 h-20 m-2 gap-2 text-sm", { "bg-green-600 border-green-600": hovered && connectable, - "bg-blue-600 border-blue-600": hovered && !connectable, + "bg-red-600 border-red-600": hovered && !connectable && !editDataChannelConnections, + "bg-blue-600 border-blue-600": hovered && !connectable && editDataChannelConnections, + "opacity-50": !connectable && !editDataChannelConnections, "bg-slate-100": !hovered, "text-white": hovered, "shadow-md": hasConnection, diff --git a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/inputChannelNodeWrapper.tsx b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/inputChannelNodeWrapper.tsx index 354efcb73..6d94aa081 100644 --- a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/inputChannelNodeWrapper.tsx +++ b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/inputChannelNodeWrapper.tsx @@ -1,43 +1,54 @@ import React from "react"; import { createPortal } from "react-dom"; -import { GuiEvent, GuiEventPayloads, GuiMessageBroker } from "@framework/GuiMessageBroker"; +import { GuiEvent, GuiEventPayloads } from "@framework/GuiMessageBroker"; +import { ModuleInstance } from "@framework/ModuleInstance"; +import { Workbench } from "@framework/Workbench"; import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect"; +import { Point } from "@lib/utils/geometry"; import { resolveClassNames } from "@lib/utils/resolveClassNames"; -export type InputChannelNodeWrapperProps = { - children: React.ReactNode; +import { ChannelSelector } from "./channelSelector"; +import { InputChannelNode } from "./inputChannelNode"; + +export type InputChannelNodesProps = { forwardedRef: React.RefObject; - moduleInstanceId: string; - guiMessageBroker: GuiMessageBroker; + moduleInstance: ModuleInstance; + workbench: Workbench; }; -export const InputChannelNodeWrapper: React.FC = (props) => { +export const InputChannelNodes: React.FC = (props) => { const [visible, setVisible] = React.useState(false); + const [currentInputName, setCurrentInputName] = React.useState(null); + const [channelSelectorCenterPoint, setChannelSelectorCenterPoint] = React.useState(null); + const [selectableChannels, setSelectableChannels] = React.useState([]); + const elementRect = useElementBoundingRect(props.forwardedRef); + const guiMessageBroker = props.workbench.getGuiMessageBroker(); + React.useEffect(() => { - let isVisible = false; + let localVisible = false; function handleDataChannelOriginPointerDown() { setVisible(true); - isVisible = true; + localVisible = true; } function handleDataChannelDone() { setVisible(false); - isVisible = false; + localVisible = false; } function handlePointerUp(e: PointerEvent) { - if (!isVisible) { + if (!localVisible) { return; } if ( (!e.target || !(e.target as Element).hasAttribute("data-channelconnector")) && !(e.target as Element).closest("#channel-selector-header") ) { - props.guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest, {}); + guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest); setVisible(false); } e.stopPropagation(); @@ -46,24 +57,24 @@ export const InputChannelNodeWrapper: React.FC = ( function handleEditDataChannelConnectionsRequest( payload: GuiEventPayloads[GuiEvent.EditDataChannelConnectionsForModuleInstanceRequest] ) { - if (payload.moduleInstanceId !== props.moduleInstanceId) { + if (payload.moduleInstanceId !== props.moduleInstance.getId()) { return; } setVisible(true); - isVisible = true; + localVisible = true; } - const removeEditDataChannelConnectionsRequestHandler = props.guiMessageBroker.subscribeToEvent( + const removeEditDataChannelConnectionsRequestHandler = guiMessageBroker.subscribeToEvent( GuiEvent.EditDataChannelConnectionsForModuleInstanceRequest, handleEditDataChannelConnectionsRequest ); - const removeDataChannelOriginPointerDownHandler = props.guiMessageBroker.subscribeToEvent( + const removeDataChannelOriginPointerDownHandler = guiMessageBroker.subscribeToEvent( GuiEvent.DataChannelOriginPointerDown, handleDataChannelOriginPointerDown ); - const removeDataChannelDoneHandler = props.guiMessageBroker.subscribeToEvent( + const removeDataChannelDoneHandler = guiMessageBroker.subscribeToEvent( GuiEvent.HideDataChannelConnectionsRequest, handleDataChannelDone ); @@ -76,7 +87,78 @@ export const InputChannelNodeWrapper: React.FC = ( removeDataChannelOriginPointerDownHandler(); document.removeEventListener("pointerup", handlePointerUp); }; - }, [props.moduleInstanceId, props.guiMessageBroker]); + }, [props.moduleInstance, guiMessageBroker]); + + const handleChannelConnect = React.useCallback( + function handleChannelConnect(inputName: string, moduleInstanceId: string, destinationPoint: Point) { + const originModuleInstance = props.workbench.getModuleInstance(moduleInstanceId); + + if (!originModuleInstance) { + guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest); + return; + } + + const acceptedKeys = props.moduleInstance + .getInputChannelDefs() + .find((channelDef) => channelDef.name === inputName)?.keyCategories; + + const channels = Object.values(originModuleInstance.getBroadcastChannels()).filter((channel) => { + if (!acceptedKeys || acceptedKeys.some((key) => channel.getDataDef().key === key)) { + return Object.values(props.moduleInstance.getInputChannels()).every((inputChannel) => { + if (inputChannel.getDataDef().key === channel.getDataDef().key) { + return true; + } + return false; + }); + } + return false; + }); + + if (channels.length === 0) { + guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest); + return; + } + + if (channels.length > 1) { + setChannelSelectorCenterPoint(destinationPoint); + setSelectableChannels(Object.values(channels).map((channel) => channel.getName())); + setCurrentInputName(inputName); + return; + } + + const channelName = Object.values(channels)[0].getName(); + + props.moduleInstance.setInputChannel(inputName, channelName); + guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest); + }, + [props.moduleInstance, props.workbench] + ); + + const handleChannelDisconnect = React.useCallback( + function handleChannelDisconnect(inputName: string) { + props.moduleInstance.removeInputChannel(inputName); + guiMessageBroker.publishEvent(GuiEvent.DataChannelConnectionsChange); + }, + [props.moduleInstance] + ); + + function handleCancelChannelSelection() { + setChannelSelectorCenterPoint(null); + setSelectableChannels([]); + guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest); + } + + function handleChannelSelection(channelName: string) { + guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest); + + if (!currentInputName) { + return; + } + setChannelSelectorCenterPoint(null); + setSelectableChannels([]); + + props.moduleInstance.setInputChannel(currentInputName, channelName); + } return createPortal(
= ( height: elementRect.height, }} > - {props.children} + {props.moduleInstance.getInputChannelDefs().map((channelDef) => { + return ( + + ); + })} + {channelSelectorCenterPoint && ( + + )}
, document.body ); diff --git a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/viewWrapper.tsx b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/viewWrapper.tsx index df8727a2c..b3f0f40b2 100644 --- a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/viewWrapper.tsx +++ b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/viewWrapper.tsx @@ -5,10 +5,8 @@ import { ModuleInstance } from "@framework/ModuleInstance"; import { Workbench } from "@framework/Workbench"; import { Point, pointDifference, pointRelativeToDomRect, pointerEventToPoint } from "@lib/utils/geometry"; -import { ChannelSelector } from "./private-components/channelSelector"; import { Header } from "./private-components/header"; -import { InputChannelNode } from "./private-components/inputChannelNode"; -import { InputChannelNodeWrapper } from "./private-components/inputChannelNodeWrapper"; +import { InputChannelNodes } from "./private-components/inputChannelNodeWrapper"; import { ViewContent } from "./private-components/viewContent"; import { ViewWrapperPlaceholder } from "../viewWrapperPlaceholder"; @@ -45,10 +43,6 @@ export const ViewWrapper: React.FC = (props) => { const timeRef = React.useRef(null); - const [currentInputName, setCurrentInputName] = React.useState(null); - const [channelSelectorCenterPoint, setChannelSelectorCenterPoint] = React.useState(null); - const [selectableChannels, setSelectableChannels] = React.useState([]); - const handleHeaderPointerDown = React.useCallback( function handlePointerDown(e: React.PointerEvent) { if (ref.current) { @@ -110,77 +104,6 @@ export const ViewWrapper: React.FC = (props) => { e.stopPropagation(); } - const handleChannelConnect = React.useCallback( - function handleChannelConnect(inputName: string, moduleInstanceId: string, destinationPoint: Point) { - const originModuleInstance = props.workbench.getModuleInstance(moduleInstanceId); - - if (!originModuleInstance) { - guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest, {}); - return; - } - - const acceptedKeys = props.moduleInstance - .getInputChannelDefs() - .find((channelDef) => channelDef.name === inputName)?.keyCategories; - - const channels = Object.values(originModuleInstance.getBroadcastChannels()).filter((channel) => { - if (!acceptedKeys || acceptedKeys.some((key) => channel.getDataDef().key === key)) { - return Object.values(props.moduleInstance.getInputChannels()).every((inputChannel) => { - if (inputChannel.getDataDef().key === channel.getDataDef().key) { - return true; - } - return false; - }); - } - return false; - }); - - if (channels.length === 0) { - guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest, {}); - return; - } - - if (channels.length > 1) { - setChannelSelectorCenterPoint(destinationPoint); - setSelectableChannels(Object.values(channels).map((channel) => channel.getName())); - setCurrentInputName(inputName); - return; - } - - const channelName = Object.values(channels)[0].getName(); - - props.moduleInstance.setInputChannel(inputName, channelName); - guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest, {}); - }, - [props.moduleInstance, props.workbench] - ); - - const handleChannelDisconnect = React.useCallback( - function handleChannelDisconnect(inputName: string) { - props.moduleInstance.removeInputChannel(inputName); - guiMessageBroker.publishEvent(GuiEvent.DataChannelConnectionsChange, {}); - }, - [props.moduleInstance] - ); - - function handleCancelChannelSelection() { - setChannelSelectorCenterPoint(null); - setSelectableChannels([]); - guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest, {}); - } - - function handleChannelSelection(channelName: string) { - guiMessageBroker.publishEvent(GuiEvent.HideDataChannelConnectionsRequest, {}); - - if (!currentInputName) { - return; - } - setChannelSelectorCenterPoint(null); - setSelectableChannels([]); - - props.moduleInstance.setInputChannel(currentInputName, channelName); - } - const showAsActive = props.isActive && [DrawerContent.ModuleSettings, DrawerContent.SyncSettings].includes(drawerContent); @@ -220,34 +143,11 @@ export const ViewWrapper: React.FC = (props) => { />
- - {props.moduleInstance.getInputChannelDefs().map((channelDef) => { - return ( - - ); - })} - - {channelSelectorCenterPoint && ( - - )} + moduleInstance={props.moduleInstance} + workbench={props.workbench} + />
diff --git a/frontend/src/lib/hooks/useElementBoundingRect.ts b/frontend/src/lib/hooks/useElementBoundingRect.ts index 755be8f26..6ff7ec3de 100644 --- a/frontend/src/lib/hooks/useElementBoundingRect.ts +++ b/frontend/src/lib/hooks/useElementBoundingRect.ts @@ -12,16 +12,21 @@ export function useElementBoundingRect(ref: React.RefObject { resizeObserver.disconnect(); + mutationObserver.disconnect(); window.removeEventListener("resize", handleResize); window.removeEventListener("scroll", handleResize, true); }; diff --git a/frontend/src/modules/DistributionPlot/settings.tsx b/frontend/src/modules/DistributionPlot/settings.tsx index e83891f03..281d0954b 100644 --- a/frontend/src/modules/DistributionPlot/settings.tsx +++ b/frontend/src/modules/DistributionPlot/settings.tsx @@ -1,6 +1,7 @@ import React, { ChangeEvent } from "react"; import { BroadcastChannelKeyCategory } from "@framework/Broadcaster"; +import { applyToStateOnMount } from "@framework/InitialSettings"; import { ModuleFCProps } from "@framework/Module"; import { ChannelSelect } from "@framework/components/ChannelSelect"; import { Dropdown } from "@lib/components/Dropdown"; @@ -68,9 +69,9 @@ export function settings({ moduleContext, workbenchServices, initialSettings }: initialSettings?.applyToStateOnMount("orientation", "string", setOrientation); initialSettings?.applyToStateOnMount("crossPlottingType", "string", setCrossPlottingType); - const channelX = moduleContext.useInputChannel("channelX"); - const channelY = moduleContext.useInputChannel("channelY"); - const channelColor = moduleContext.useInputChannel("channelColor"); + const channelX = moduleContext.useInputChannel("channelX", initialSettings); + const channelY = moduleContext.useInputChannel("channelY", initialSettings); + const channelColor = moduleContext.useInputChannel("channelColor", initialSettings); if (channelX && channelX.getName() !== prevChannelXName && crossPlottingType === null) { setPrevChannelXName(channelX?.getName() ?? null); diff --git a/frontend/src/modules/TornadoChart/settings.tsx b/frontend/src/modules/TornadoChart/settings.tsx index 0d096cedb..6a03f10c0 100644 --- a/frontend/src/modules/TornadoChart/settings.tsx +++ b/frontend/src/modules/TornadoChart/settings.tsx @@ -1,4 +1,3 @@ -import { BroadcastChannelKeyCategory } from "@framework/Broadcaster"; import { ModuleFCProps } from "@framework/Module"; import { ChannelSelect } from "@framework/components/ChannelSelect"; import { Label } from "@lib/components/Label"; @@ -11,7 +10,7 @@ export function settings({ moduleContext, workbenchServices }: ModuleFCProps diff --git a/frontend/src/modules/TornadoChart/view.tsx b/frontend/src/modules/TornadoChart/view.tsx index 71590338b..c43b47c88 100644 --- a/frontend/src/modules/TornadoChart/view.tsx +++ b/frontend/src/modules/TornadoChart/view.tsx @@ -18,13 +18,7 @@ import { PlotType, State } from "./state"; import { createSensitivityColorMap } from "../_shared/sensitivityColors"; -export const view = ({ - moduleContext, - workbenchSession, - workbenchSettings, - workbenchServices, - initialSettings, -}: ModuleFCProps) => { +export const view = ({ moduleContext, workbenchSession, workbenchSettings, initialSettings }: ModuleFCProps) => { // Leave this in until we get a feeling for React18/Plotly const renderCount = React.useRef(0); React.useEffect(function incrementRenderCount() { @@ -38,7 +32,7 @@ export const view = ({ const [channelEnsemble, setChannelEnsemble] = React.useState(null); const [channelResponseData, setChannelResponseData] = React.useState(null); - const responseChannel = moduleContext.useInputChannel("responseChannel", initialSettings); + const responseChannel = moduleContext.useInputChannel("response", initialSettings); const [showLabels, setShowLabels] = React.useState(true); const [hideZeroY, setHideZeroY] = React.useState(false);