Merge pull request #31 from DiamondLightSource/open_new_tab_on_add_tab_action

Open new tab on add tab click action

Author: GregJHarris

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "daedalus",
   "private": true,
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,7 +15,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@diamondlightsource/cs-web-lib": "^0.9.9",
+    "@diamondlightsource/cs-web-lib": "^0.9.10",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.17",

package.json

@@ -5,6 +5,7 @@ import { FileContext } from "@diamondlightsource/cs-web-lib";
 import { BeamlineTreeStateContext } from "../App";
 import { MenuContext } from "../routes/SynopticPage";
 import { executeOpenPageActionWithFileGuid } from "../utils/csWebLibActions";
+import { FileIDs } from "../store";
 
 export default function ScreenTreeView() {
   const { state } = useContext(BeamlineTreeStateContext);
@@ -33,6 +34,11 @@ export default function ScreenTreeView() {
     return currentBeamline?.screenTree ?? [];
   }, [state.currentBeamline, state.beamlines]);
 
+  const currentFileMetadata: FileIDs = useMemo(() => {
+    const currentBeamline = state.beamlines[state.currentBeamline];
+    return currentBeamline?.filePathIds ?? [];
+  }, [state.currentBeamline, state.beamlines]);
+
   // When beamline is updated, trigger refresh of expanded screens to fully expand all
   useEffect(() => {
     const getAllScreensWithChildrenItemIds = async (
@@ -65,8 +71,16 @@ export default function ScreenTreeView() {
           onExpandedItemsChange={(_event, itemIds) =>
             handleExpandedScreensChange(itemIds)
           }
-          onItemClick={(_event, itemId) => handleClick(itemId)}
+          onItemClick={(_event, itemId) => {
+            if (!itemId || currentFileMetadata[itemId]?.exists === false) {
+              return;
+            }
+            handleClick(itemId);
+          }}
           expansionTrigger="iconContainer"
+          isItemDisabled={item =>
+            currentFileMetadata[item.id]?.exists === false
+          }
         />
       ) : (
         <></>

src/components/ScreenTreeView.tsx

@@ -5,19 +5,35 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState
 } from "react";
-import { CHANGE_BEAMLINE, CHANGE_SCREEN, LOAD_SCREENS } from "../store";
+import {
+  BeamlineState,
+  CHANGE_BEAMLINE,
+  CHANGE_SCREEN,
+  LOAD_SCREENS
+} from "../store";
 import DLSAppBar from "../components/AppBar";
 import ScreenDisplay from "../components/ScreenDisplay";
 import { parseScreenTree } from "../utils/parser";
-import { FileContext } from "@diamondlightsource/cs-web-lib";
+import {
+  buildUrl,
+  FileContext,
+  FileContextType,
+  FileDescription
+} from "@diamondlightsource/cs-web-lib";
 import { RotatingLines } from "react-loader-spinner";
 import { SynopticBreadcrumbs } from "../components/SynopticBreadcrumbs";
 import { BeamlineTreeStateContext } from "../App";
-import { useParams } from "react-router-dom";
-import { buildUrl } from "../utils/urlUtils";
-import { executeOpenPageActionWithUrlId } from "../utils/csWebLibActions";
+import { useParams, useSearchParams, useLocation } from "react-router-dom";
+import {
+  executeOpenPageActionWithUrlId,
+  executeOpenPageAction
+} from "../utils/csWebLibActions";
+
+const FILE_DESCRIPTION_SEARCH_PARAMETER_NAME = "file_description";
+const MACROS_SEARCH_PARAMETER_NAME = "macros";
 
 export const MenuContext = createContext<{
   menuOpen: boolean;
@@ -28,7 +44,9 @@ export function SynopticPage() {
   const { state, dispatch } = useContext(BeamlineTreeStateContext);
   const params: { beamline?: string; screenUrlId?: string } = useParams();
   const fileContext = useContext(FileContext);
+  const [searchParams] = useSearchParams();
   const [menuOpen, setMenuOpen] = useState(true);
+  const location = useLocation();
 
   useEffect(() => {
     // Only trigger once
@@ -81,27 +99,66 @@ export function SynopticPage() {
       // If we navigated directly to a beamline and/or screen, load in display
       const newBeamlineState = newBeamlines[params.beamline];
 
-      executeOpenPageActionWithUrlId(
-        newBeamlineState,
-        params.screenUrlId,
-        params.beamline,
-        fileContext
+      const fileDescriptionParam = searchParams.get(
+        FILE_DESCRIPTION_SEARCH_PARAMETER_NAME
       );
+      if (fileDescriptionParam) {
+        // handle case where we have no JsonMap entry, which will contain a full screen file definition
+        const fileDescription = JSON.parse(
+          fileDescriptionParam
+        ) as FileDescription;
+        executeOpenPageAction(
+          fileDescription.path,
+          fileDescription.macros,
+          fileDescription.defaultProtocol,
+          fileContext,
+          location.pathname
+        );
+      } else {
+        const macrosParameter = searchParams.get(MACROS_SEARCH_PARAMETER_NAME);
+        const macrosMap = macrosParameter
+          ? JSON.parse(macrosParameter)
+          : undefined;
+        executeOpenPageActionWithUrlId(
+          newBeamlineState,
+          params.screenUrlId,
+          params.beamline,
+          fileContext,
+          macrosMap
+        );
+      }
     }
   }, []);
 
+  // override the default addTab method used by the cs-web-lib open tab actions
+  const addTab = useCallback(
+    addTabCallbackAction(
+      state.beamlines,
+      state.currentBeamline,
+      window.location
+    ),
+    [state.beamlines, state.currentBeamline, window.location]
+  );
+
+  const updatedFileContext = useMemo(
+    () => ({ ...fileContext, addTab }),
+    [fileContext, addTab]
+  );
+
   return (
     <>
       <Box sx={{ display: "flex" }}>
         {state.filesLoaded ? (
           <>
-            <MenuContext.Provider value={{ menuOpen, setMenuOpen }}>
-              <DLSAppBar fullScreen={false} open={menuOpen}>
-                <SynopticBreadcrumbs />
-              </DLSAppBar>
-              <MiniMenuBar />
-              <ScreenDisplay />
-            </MenuContext.Provider>
+            <FileContext.Provider value={updatedFileContext}>
+              <MenuContext.Provider value={{ menuOpen, setMenuOpen }}>
+                <DLSAppBar fullScreen={false} open={menuOpen}>
+                  <SynopticBreadcrumbs />
+                </DLSAppBar>
+                <MiniMenuBar />
+                <ScreenDisplay />
+              </MenuContext.Provider>
+            </FileContext.Provider>
           </>
         ) : (
           <>
@@ -118,3 +175,51 @@ export function SynopticPage() {
     </>
   );
 }
+
+export const addTabCallbackAction =
+  (
+    beamlines: BeamlineState,
+    currentBeamline: string,
+    windowLocation: Location
+  ): FileContextType["addTab"] =>
+  (fileLocation: string, tabName: string, fileDesc: FileDescription) => {
+    void fileLocation; // unused, but required by the function interface.
+    void tabName; // unused, but required by the function interface.
+
+    // try and find a matching file entry in the JSON map
+    const displayedPath = fileDesc?.path?.replace(
+      beamlines[currentBeamline].host!,
+      ""
+    );
+
+    const allFiles = beamlines[currentBeamline].filePathIds;
+    const currentFile = Object.values(allFiles).find(
+      values => values.file === displayedPath
+    );
+
+    // Build the URL for the new tab
+    let newURL = new URL(windowLocation.origin);
+    if (currentFile?.urlId) {
+      // we have a file mapping
+      newURL.pathname = buildUrl(
+        "",
+        "synoptic",
+        currentBeamline,
+        currentFile?.urlId
+      );
+      if (fileDesc?.macros) {
+        newURL.searchParams.append(
+          MACROS_SEARCH_PARAMETER_NAME,
+          JSON.stringify(fileDesc?.macros)
+        );
+      }
+    } else {
+      // No file mapping
+      newURL = new URL(windowLocation.href);
+      newURL.searchParams.append(
+        FILE_DESCRIPTION_SEARCH_PARAMETER_NAME,
+        JSON.stringify(fileDesc)
+      );
+    }
+    window.open(newURL, "_blank");
+  };

src/routes/SynopticPage.tsx

@@ -196,6 +196,7 @@ export type FileMetadata = {
   file: string;
   urlId: string;
   macros?: Macros[];
+  exists?: boolean;
 };
 
 export type FileIDs = {