[Framework]: Change de-serialization order of ensemble set and dashboards to assert population of EnsembleFingerprintStore prior to module-internal fetches and use @hey-api utility functions (#1371)

Author: rubenthoms

frontend/src/framework/internal/WorkbenchSession/PrivateWorkbenchSession.ts

@@ -67,7 +67,7 @@ export type WorkbenchSessionTopicPayloads = {
     [WorkbenchSessionTopic.ENSEMBLE_SET]: EnsembleSet;
     [WorkbenchSessionTopic.REALIZATION_FILTER_SET]: { filterSet: RealizationFilterSet };
     [PrivateWorkbenchSessionTopic.IS_ENSEMBLE_SET_LOADING]: boolean;
-    [PrivateWorkbenchSessionTopic.ACTIVE_DASHBOARD]: Dashboard;
+    [PrivateWorkbenchSessionTopic.ACTIVE_DASHBOARD]: Dashboard | null;
     [PrivateWorkbenchSessionTopic.DASHBOARDS]: Dashboard[];
     [PrivateWorkbenchSessionTopic.METADATA]: WorkbenchSessionMetadata;
     [PrivateWorkbenchSessionTopic.IS_PERSISTED]: boolean;
@@ -225,15 +225,9 @@ export class PrivateWorkbenchSession implements WorkbenchSession {
 
         this.clearDashboards();
 
-        for (const dashboard of contentState.dashboards) {
-            const newDashboard = new Dashboard(this._atomStoreMaster);
-            this.registerDashboard(newDashboard);
-            newDashboard.deserializeState(dashboard);
-        }
-
-        this._settings.deserializeState(contentState.settings);
-        this._userCreatedItems.deserializeState(contentState.userCreatedItems);
-
+        // We first have to load and setup the ensemble set before deserializing dashboards and modules.
+        // This is because modules may depend on ensembles being present in the EnsembleFinterprintStore when
+        // initiating requests to the backend.
         const userEnsembleSettings: UserEnsembleSetting[] = contentState.ensembleSet.regularEnsembles.map((e) => ({
             ensembleIdent: RegularEnsembleIdent.fromString(e.ensembleIdent),
             customName: e.name,
@@ -254,6 +248,17 @@ export class PrivateWorkbenchSession implements WorkbenchSession {
         // This has to be done after loading the ensemble set
         // in order to guarantee that all realization filters for the ensembles exist
         this._realizationFilterSet.deserializeState(contentState.ensembleRealizationFilterSet);
+
+        // --- Now that the ensemble set is loaded, we can deserialize dashboards and modules ---
+
+        for (const dashboard of contentState.dashboards) {
+            const newDashboard = new Dashboard(this._atomStoreMaster);
+            this.registerDashboard(newDashboard);
+            newDashboard.deserializeState(dashboard);
+        }
+
+        this._settings.deserializeState(contentState.settings);
+        this._userCreatedItems.deserializeState(contentState.userCreatedItems);
     }
 
     async loadAndSetupEnsembleSet(
@@ -325,13 +330,12 @@ export class PrivateWorkbenchSession implements WorkbenchSession {
         return snapshotGetter;
     }
 
-    getActiveDashboard(): Dashboard {
+    getActiveDashboard(): Dashboard | null {
         if (!this._activeDashboardId && this._dashboards.length > 0) {
             this._activeDashboardId = this._dashboards[0].getId();
         }
         const found = this._dashboards.find((d) => d.getId() === this._activeDashboardId);
-        if (!found) throw new Error("Active dashboard not found");
-        return found;
+        return found ?? null;
     }
 
     getDashboards(): Dashboard[] {

frontend/src/framework/internal/WorkbenchSession/WorkbenchSessionManager.ts

@@ -545,7 +545,8 @@ export class WorkbenchSessionManager implements PublishSubscribe<WorkbenchSessio
 
             this._guiMessageBroker.setState(GuiState.LeftDrawerContent, LeftDrawerContent.ModuleSettings);
 
-            if (session.getActiveDashboard().getLayout().length === 0) {
+            const activeDashboard = session.getActiveDashboard();
+            if (activeDashboard && activeDashboard.getLayout().length === 0) {
                 this._guiMessageBroker.setState(GuiState.RightDrawerContent, RightDrawerContent.ModulesList);
                 if (this._guiMessageBroker.getState(GuiState.RightSettingsPanelWidthInPercent) === 0) {
                     this._guiMessageBroker.setState(GuiState.RightSettingsPanelWidthInPercent, 20);
@@ -775,9 +776,8 @@ export class WorkbenchSessionManager implements PublishSubscribe<WorkbenchSessio
             await this.startNewSession();
         } else {
             const activeSession = this.getActiveSession();
-            const confirmationRequired =
-                activeSession.getDashboards().length > 0 &&
-                activeSession.getActiveDashboard().getModuleInstances().length > 0;
+            const activeDashboard = activeSession.getActiveDashboard();
+            const confirmationRequired = activeDashboard && activeDashboard.getModuleInstances().length > 0;
 
             if (confirmationRequired) {
                 const result = await ConfirmationService.confirm({

frontend/src/framework/internal/components/Content/content.tsx

@@ -2,8 +2,6 @@ import type React from "react";
 
 import type { Workbench } from "@framework/Workbench";
 
-import { ActiveDashboardBoundary } from "../ActiveDashboardBoundary";
-
 import { DataChannelVisualizationLayer } from "./private-components/DataChannelVisualizationLayer";
 import { Layout } from "./private-components/layout";
 
@@ -13,11 +11,11 @@ type ContentProps = {
 
 export const Content: React.FC<ContentProps> = (props) => {
     return (
-        <ActiveDashboardBoundary>
+        <>
             <DataChannelVisualizationLayer workbench={props.workbench} />
             <div className="bg-gray-300 grow">
                 <Layout workbench={props.workbench} />
             </div>
-        </ActiveDashboardBoundary>
+        </>
     );
 };

frontend/src/framework/internal/components/Content/private-components/DataChannelVisualizationLayer/dataChannelVisualizationLayer.tsx

@@ -2,11 +2,10 @@ import React from "react";
 
 import type { GuiEventPayloads } from "@framework/GuiMessageBroker";
 import { GuiEvent, GuiState, useGuiState } from "@framework/GuiMessageBroker";
-import { PrivateWorkbenchSessionTopic } from "@framework/internal/WorkbenchSession/PrivateWorkbenchSession";
+import { useActiveDashboard } from "@framework/internal/components/ActiveDashboardBoundary";
 import type { Workbench } from "@framework/Workbench";
 import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
 import { createPortal } from "@lib/utils/createPortal";
-import { usePublishSubscribeTopicValue } from "@lib/utils/PublishSubscribeDelegate";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import type { Vec2 } from "@lib/utils/vec2";
 
@@ -26,10 +25,7 @@ type DataChannelPath = {
 };
 
 export const DataChannelVisualizationLayer: React.FC<DataChannelVisualizationProps> = (props) => {
-    const dashboard = usePublishSubscribeTopicValue(
-        props.workbench.getSessionManager().getActiveSession(),
-        PrivateWorkbenchSessionTopic.ACTIVE_DASHBOARD,
-    );
+    const dashboard = useActiveDashboard();
     const ref = React.useRef<SVGSVGElement>(null);
     const [visible, setVisible] = React.useState<boolean>(false);
     const [originPoint, setOriginPoint] = React.useState<Vec2>({ x: 0, y: 0 });

frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/channelReceiverNodesWrapper.tsx

@@ -2,13 +2,12 @@ import React from "react";
 
 import type { GuiEventPayloads } from "@framework/GuiMessageBroker";
 import { GuiEvent, GuiState, useGuiState } from "@framework/GuiMessageBroker";
+import { useActiveDashboard } from "@framework/internal/components/ActiveDashboardBoundary";
 import type { ChannelReceiver } from "@framework/internal/DataChannels/ChannelReceiver";
-import { PrivateWorkbenchSessionTopic } from "@framework/internal/WorkbenchSession/PrivateWorkbenchSession";
 import type { ModuleInstance } from "@framework/ModuleInstance";
 import type { Workbench } from "@framework/Workbench";
 import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
 import { createPortal } from "@lib/utils/createPortal";
-import { usePublishSubscribeTopicValue } from "@lib/utils/PublishSubscribeDelegate";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import type { Vec2 } from "@lib/utils/vec2";
 
@@ -23,10 +22,7 @@ export type ChannelReceiverNodesWrapperProps = {
 };
 
 export const ChannelReceiverNodesWrapper: React.FC<ChannelReceiverNodesWrapperProps> = (props) => {
-    const dashboard = usePublishSubscribeTopicValue(
-        props.workbench.getSessionManager().getActiveSession(),
-        PrivateWorkbenchSessionTopic.ACTIVE_DASHBOARD,
-    );
+    const dashboard = useActiveDashboard();
 
     const [visible, setVisible] = React.useState<boolean>(false);
     const [currentReceiver, setCurrentReceiver] = React.useState<ChannelReceiver | null>(null);

frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/header.tsx

@@ -11,6 +11,7 @@ import {
     useGuiState,
     useGuiValue,
 } from "@framework/GuiMessageBroker";
+import { useActiveDashboard } from "@framework/internal/components/ActiveDashboardBoundary";
 import { useStatusControllerStateValue } from "@framework/internal/ModuleInstanceStatusControllerInternal";
 import { PrivateWorkbenchSessionTopic } from "@framework/internal/WorkbenchSession/PrivateWorkbenchSession";
 import type { ModuleInstance } from "@framework/ModuleInstance";
@@ -40,10 +41,7 @@ export type HeaderProps = {
 };
 
 export const Header: React.FC<HeaderProps> = (props) => {
-    const dashboard = usePublishSubscribeTopicValue(
-        props.workbench.getSessionManager().getActiveSession(),
-        PrivateWorkbenchSessionTopic.ACTIVE_DASHBOARD,
-    );
+    const dashboard = useActiveDashboard();
     const isSnapshot = usePublishSubscribeTopicValue(
         props.workbench.getSessionManager().getActiveSession(),
         PrivateWorkbenchSessionTopic.IS_SNAPSHOT,
@@ -272,10 +270,7 @@ type StatusIndicatorProps = {
 
 function StatusIndicator(props: StatusIndicatorProps): React.ReactNode {
     const guiMessageBroker = props.workbench.getGuiMessageBroker();
-    const dashboard = usePublishSubscribeTopicValue(
-        props.workbench.getSessionManager().getActiveSession(),
-        PrivateWorkbenchSessionTopic.ACTIVE_DASHBOARD,
-    );
+    const dashboard = useActiveDashboard();
 
     const isLoading = useStatusControllerStateValue(props.moduleInstance.getStatusController(), "loading");
     const hotStatusMessages = useStatusControllerStateValue(

frontend/src/framework/internal/components/Content/private-components/ViewWrapper/viewWrapper.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { GuiEvent, GuiState, LeftDrawerContent, useGuiState, useGuiValue } from "@framework/GuiMessageBroker";
+import { useActiveDashboard } from "@framework/internal/components/ActiveDashboardBoundary";
 import { DashboardTopic } from "@framework/internal/Dashboard";
-import { PrivateWorkbenchSessionTopic } from "@framework/internal/WorkbenchSession/PrivateWorkbenchSession";
 import type { ModuleInstance } from "@framework/ModuleInstance";
 import type { Workbench } from "@framework/Workbench";
 import { pointRelativeToDomRect } from "@lib/utils/geometry";
@@ -32,10 +32,7 @@ type ViewWrapperProps = {
 };
 
 export const ViewWrapper: React.FC<ViewWrapperProps> = (props) => {
-    const dashboard = usePublishSubscribeTopicValue(
-        props.workbench.getSessionManager().getActiveSession(),
-        PrivateWorkbenchSessionTopic.ACTIVE_DASHBOARD,
-    );
+    const dashboard = useActiveDashboard();
     const [prevWidth, setPrevWidth] = React.useState<number>(props.width);
     const [prevHeight, setPrevHeight] = React.useState<number>(props.height);
     const [prevX, setPrevX] = React.useState<number>(props.x);

frontend/src/framework/internal/components/EditSessionMetadataDialog/editSessionMetadataDialog.tsx

@@ -121,7 +121,7 @@ export function EditSessionMetadataDialog(props: EditSessionMetadataDialogProps)
     }, [title]);
 
     const layout = hasActiveSession
-        ? (props.workbench.getSessionManager().getActiveSession().getActiveDashboard().getLayout() ?? [])
+        ? (props.workbench.getSessionManager().getActiveSession().getActiveDashboard()?.getLayout() ?? [])
         : [];
 
     React.useEffect(

frontend/src/framework/internal/components/LeftNavBar/leftNavBar.tsx

@@ -13,14 +13,16 @@ import { NavBarButton, NavBarDivider } from "@lib/components/NavBarComponents";
 import { usePublishSubscribeTopicValue } from "@lib/utils/PublishSubscribeDelegate";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
+import { useActiveDashboard } from "../ActiveDashboardBoundary";
+
 type LeftNavBarProps = {
     workbench: Workbench;
 };
 
 export const LeftNavBar: React.FC<LeftNavBarProps> = (props) => {
     const workbenchSession = props.workbench.getSessionManager().getActiveSession();
     const ensembleSet = usePublishSubscribeTopicValue(workbenchSession, WorkbenchSessionTopic.ENSEMBLE_SET);
-    const dashboard = usePublishSubscribeTopicValue(workbenchSession, PrivateWorkbenchSessionTopic.ACTIVE_DASHBOARD);
+    const dashboard = useActiveDashboard();
     const layout = usePublishSubscribeTopicValue(dashboard, DashboardTopic.LAYOUT);
     const isSnapshot = usePublishSubscribeTopicValue(workbenchSession, PrivateWorkbenchSessionTopic.IS_SNAPSHOT);
 

frontend/src/framework/internal/components/LeftSettingsPanel/leftSettingsPanel.tsx

@@ -4,11 +4,12 @@ import { Tune } from "@mui/icons-material";
 
 import { GuiState, LeftDrawerContent, useGuiValue } from "@framework/GuiMessageBroker";
 import { DashboardTopic } from "@framework/internal/Dashboard";
-import { PrivateWorkbenchSessionTopic } from "@framework/internal/WorkbenchSession/PrivateWorkbenchSession";
 import type { Workbench } from "@framework/Workbench";
 import { usePublishSubscribeTopicValue } from "@lib/utils/PublishSubscribeDelegate";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
+import { useActiveDashboard } from "../ActiveDashboardBoundary";
+
 import { ColorPaletteSettings } from "./private-components/colorPaletteSettings";
 import { ModuleSettings } from "./private-components/moduleSettings";
 import { SyncSettings } from "./private-components/syncSettings";
@@ -18,8 +19,7 @@ type LeftSettingsPanelProps = {
 };
 
 export const LeftSettingsPanel: React.FC<LeftSettingsPanelProps> = (props) => {
-    const workbenchSession = props.workbench.getSessionManager().getActiveSession();
-    const dashboard = usePublishSubscribeTopicValue(workbenchSession, PrivateWorkbenchSessionTopic.ACTIVE_DASHBOARD);
+    const dashboard = useActiveDashboard();
     const moduleInstances = usePublishSubscribeTopicValue(dashboard, DashboardTopic.MODULE_INSTANCES);
     const drawerContent = useGuiValue(props.workbench.getGuiMessageBroker(), GuiState.LeftDrawerContent);
     const mainRef = React.useRef<HTMLDivElement>(null);