feat: Add extensibility for tmtv and segmentation modes (#6128)

* feat: Add extensibility for tmtv and segmentation modes

* Fixes for ordering issues on laod

* Remove unnecessary reference lookup

* Chane side panel timing to fix tests

* PR comments - change how mode definitions get created

* Improvements to mode customizations

* Start organizing customizations

* Misc fixes for a customization demo page

* Security fixes

* PR requested changes to naming

modes/longitudinal/src/index.ts

@@ -1,7 +1,9 @@
 import i18n from 'i18next';
 import { id } from './id';
-import { initToolGroups, cornerstone,
+import {
+  initToolGroups,
   ohif,
+  cornerstone,
   dicomsr,
   dicomvideo,
   basicLayout,
@@ -9,7 +11,7 @@ import { initToolGroups, cornerstone,
   extensionDependencies as basicDependencies,
   mode as basicMode,
   modeInstance as basicModeInstance,
- } from '@ohif/mode-basic';
+} from '@ohif/mode-basic';
 
 export const tracked = {
   measurements: '@ohif/extension-measurement-tracking.panelModule.trackedMeasurements',
@@ -28,6 +30,9 @@ export const longitudinalInstance = {
   id: ohif.layout,
   props: {
     ...basicLayout.props,
+    // Literal panel lists; the mode route seeds them into the standard
+    // `leftPanels` / `rightPanels` customizations so `mode` phase
+    // blocks and global customizations can modify them.
     leftPanels: [tracked.thumbnailList],
     rightPanels: [cornerstone.segmentation, tracked.measurements],
     viewports: [
@@ -37,33 +42,29 @@ export const longitudinalInstance = {
         displaySetsToDisplay: basicLayout.props.viewports[0].displaySetsToDisplay,
       },
       ...basicLayout.props.viewports,
-      ],
-    }
-  };
+    ],
+  },
+};
 
-
-export const longitudinalRoute =
-    {
-      ...basicRoute,
-      path: 'longitudinal',
-        /*init: ({ servicesManager, extensionManager }) => {
+export const longitudinalRoute = {
+  ...basicRoute,
+  path: 'longitudinal',
+  /*init: ({ servicesManager, extensionManager }) => {
           //defaultViewerRouteInit
         },*/
-      layoutInstance: longitudinalInstance,
-    };
+  layoutInstance: longitudinalInstance,
+};
 
 export const modeInstance = {
-    ...basicModeInstance,
-    // TODO: We're using this as a route segment
-    // We should not be.
-    id,
-    routeName: 'viewer',
-    displayName: i18n.t('Modes:Basic Viewer'),
-    routes: [
-      longitudinalRoute
-    ],
-    extensions: extensionDependencies,
-  };
+  ...basicModeInstance,
+  // TODO: We're using this as a route segment
+  // We should not be.
+  id,
+  routeName: 'viewer',
+  displayName: i18n.t('Modes:Basic Viewer'),
+  routes: [longitudinalRoute],
+  extensions: extensionDependencies,
+};
 
 const mode = {
   ...basicMode,