Merge pull request #32 from DiamondLightSource/use-display-names-in-tree

abigailalexander · web-flow · commit e72eefaf912c · 2026-01-20T08:25:46.000Z
Use display names in tree
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Daedalus</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/routes/DataBrowserPage.tsx b/src/routes/DataBrowserPage.tsx
@@ -3,7 +3,7 @@ import ArchiverMenuBar from "../components/ArchiverMenuBar";
 import TracesPanel from "../components/TracesPanel";
 import DataBrowserPlot from "../components/DataBrowserPlot";
 import DLSAppBar from "../components/AppBar";
-import { createContext, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 
 export const MenuContext = createContext<{
   menusOpen: {
@@ -20,6 +20,11 @@ export const MenuContext = createContext<{
  */
 export function DataBrowserPage() {
   const [menusOpen, setMenusOpen] = useState({ trace: false, archiver: false });
+
+  useEffect(() => {
+    document.title = "Data Browser | Daedalus";
+  }, []);
+
   return (
     <MenuContext.Provider value={{ menusOpen, setMenusOpen }}>
       <Box sx={{ display: "flex", width: "100%" }}>
diff --git a/src/routes/DemoPage.tsx b/src/routes/DemoPage.tsx
@@ -4,7 +4,7 @@ import { demoReducer, demoInitialState, FileState } from "../store";
 import { useWindowWidth, useWindowHeight } from "../utils/helper";
 import FileDisplay from "../components/FileDisplay";
 import FileNavigationBar from "../components/FileNavigationBar";
-import { createContext } from "react";
+import { createContext, useEffect } from "react";
 import DLSAppBar from "../components/AppBar";
 
 const FileStateContext = createContext<{
@@ -17,6 +17,10 @@ export function DemoPage() {
   const width = useWindowWidth();
   const height = useWindowHeight();
 
+  useEffect(() => {
+    document.title = "Demo | Daedalus";
+  }, []);
+
   return (
     <>
       <Box sx={{ flexGrow: 1 }}>
diff --git a/src/routes/EditorPage.tsx b/src/routes/EditorPage.tsx
@@ -41,6 +41,7 @@ export function EditorPage() {
 
   // Only run once on mount
   useEffect(() => {
+    document.title = "Editor | Daedalus";
     loadScreens();
   }, []);
 
diff --git a/src/routes/LandingPage.tsx b/src/routes/LandingPage.tsx
@@ -3,8 +3,13 @@ import DLSAppBar from "../components/AppBar";
 import { useWindowHeight, APP_BAR_HEIGHT } from "../utils/helper";
 import LinkCard from "../components/LinkCard";
 import { PageRouteInfo } from "./PageRouteInfo";
+import { useEffect } from "react";
 
 export function LandingPage() {
+  useEffect(() => {
+    document.title = "Home | Daedalus";
+  }, []);
+
   // get width
   return (
     <>
diff --git a/src/routes/SynopticPage.tsx b/src/routes/SynopticPage.tsx
@@ -50,6 +50,7 @@ export function SynopticPage() {
 
   useEffect(() => {
     // Only trigger once
+    document.title = `${params.beamline} Synoptic | Daedalus`;
     if (state.filesLoaded) {
       if (params.beamline && params.beamline !== state.currentBeamline)
         dispatch({
@@ -66,6 +67,7 @@ export function SynopticPage() {
 
   // Only run once on mount
   useEffect(() => {
+    document.title = "Synoptic | Daedalus";
     loadScreens();
   }, []);
 
diff --git a/src/tests/parser.test.ts b/src/tests/parser.test.ts
@@ -2,7 +2,8 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
   parseScreenTree,
   RecursiveTreeViewBuilder,
-  RecursiveAppendDuplicateFileMacros
+  RecursiveAppendDuplicateFileMacros,
+  buildUrlId
 } from "../utils/parser";
 import { FileIDs } from "../store";
 
@@ -60,6 +61,41 @@ describe("parseScreenTree()", (): void => {
     expect(tree.length).toEqual(1);
     expect(firstFile).toEqual("top.bob");
   });
+
+  it("successfully fetches the file with a display name", async (): Promise<void> => {
+    const mockSuccessResponse = JSON.parse(`
+    {
+      "file": "top.bob",
+      "displayName": "Top Synoptic",
+      "children": [
+          {
+              "file": "middle1.bob",
+              "displayName": "Middle File 1",
+              "children": [
+                  {
+                      "file": "bottom.bob",
+                      "displayName": "Bottom File"
+                  }
+              ]
+          },
+          {
+              "file": "middle2.bob",
+              "displayName": "Middle File 2"
+          }
+      ]
+    }`);
+    const mockJsonPromise = Promise.resolve(mockSuccessResponse);
+    const mockFetchPromise = Promise.resolve({
+      json: (): Promise<unknown> => mockJsonPromise
+    });
+    const mockFetch = (): Promise<unknown> => mockFetchPromise;
+    vi.spyOn(globalWithFetch, "fetch").mockImplementation(mockFetch);
+
+    const [tree, , firstFile] = await parseScreenTree("test-map.json");
+    expect(tree.length).toEqual(1);
+    expect(firstFile).toEqual("top.bob");
+    expect(tree[0].label).toEqual("Top Synoptic");
+  });
 });
 
 describe("RecursiveTreeViewBuilder()", (): void => {
@@ -219,6 +255,58 @@ describe("RecursiveTreeViewBuilder()", (): void => {
 
     expect(actualUrlIds.sort()).toEqual(expectedUrlIds.sort());
   });
+
+  it("parses child screens to generate the expected urlId strings with display names", async (): Promise<void> => {
+    const testJson = {
+      file: "top.bob",
+      displayName: "Top Screen",
+      children: [
+        {
+          file: "middle1.bob",
+          displayName: "Middle Screen",
+          children: [
+            {
+              file: "path1/index.bob",
+              displayName: "Index 1"
+            },
+            {
+              file: "path2/index.bob",
+              displayName: "Index 2"
+            },
+            {
+              file: "index.bob",
+              displayName: "Index 3"
+            },
+            {
+              file: "path1/not_index.bob",
+              displayName: "Not Index"
+            }
+          ]
+        },
+        {
+          file: "path0/index.bob",
+          displayName: "Index"
+        }
+      ]
+    };
+
+    const { fileMap } = await RecursiveTreeViewBuilder(
+      testJson.children,
+      "Top Screen"
+    );
+
+    const expectedUrlIds = [
+      "Top Screen+Index",
+      "Top Screen+Middle Screen",
+      "Top Screen+Middle Screen+Index 1",
+      "Top Screen+Middle Screen+Index 2",
+      "Top Screen+Middle Screen+Index 3",
+      "Top Screen+Middle Screen+Not Index"
+    ];
+    const actualUrlIds = Object.values(fileMap).map(x => x.urlId);
+
+    expect(actualUrlIds.sort()).toEqual(expectedUrlIds.sort());
+  });
 });
 
 describe("RecursiveAppendDuplicateFileMacros()", (): void => {
@@ -351,3 +439,30 @@ describe("RecursiveAppendDuplicateFileMacros()", (): void => {
     expect(aMacros).toEqual({ Another: "AnotherFilesMacros" });
   });
 });
+
+describe("buildUrlId()", (): void => {
+  it("uses the file name if no display name", (): void => {
+    const { urlId, fileLabel } = buildUrlId("testing.bob", "", undefined);
+
+    expect(urlId).toBe("testing");
+    expect(fileLabel).toBe("testing");
+  });
+
+  it("uses display name as url id", (): void => {
+    const { urlId, fileLabel } = buildUrlId("testing.bob", "", "My File");
+
+    expect(urlId).toBe("My File");
+    expect(fileLabel).toBe("My File");
+  });
+
+  it("correctly attaches a prefix", (): void => {
+    const { urlId, fileLabel } = buildUrlId(
+      "testing.bob",
+      "First File",
+      "My File"
+    );
+
+    expect(urlId).toBe("First File+My File");
+    expect(fileLabel).toBe("My File");
+  });
+});
diff --git a/src/utils/parser.ts b/src/utils/parser.ts
@@ -17,7 +17,11 @@ export async function parseScreenTree(
     const response = await httpRequest(filepath);
     const json = await response.json();
 
-    const { urlId, fileLabel: topLevelScreen } = buildUrlId(json.file, "");
+    const { urlId, fileLabel: topLevelScreen } = buildUrlId(
+      json.file,
+      "",
+      json.displayName
+    );
 
     // Process the child items
     const { fileMap, treeViewItems } = RecursiveTreeViewBuilder(
@@ -76,7 +80,11 @@ export const RecursiveTreeViewBuilder = (
   }
 
   for (const sibling of jsonSiblings) {
-    const { urlId, fileLabel } = buildUrlId(sibling.file, idPrefix);
+    const { urlId, fileLabel } = buildUrlId(
+      sibling.file,
+      idPrefix,
+      sibling.displayName
+    );
     const guid = crypto.randomUUID();
 
     const treeViewItem: TreeViewBaseItem = {
@@ -88,9 +96,9 @@ export const RecursiveTreeViewBuilder = (
     if (!sibling.duplicate) {
       fileMap[guid] = {
         file: sibling.file,
-        urlId,
-        macros: sibling.macros ? [sibling.macros] : [],
-        exists: sibling?.exists
+        exists: sibling?.exists,
+        urlId: urlId,
+        macros: sibling.macros ? [sibling.macros] : []
       };
 
       // If not a duplicate, check for children
@@ -139,9 +147,21 @@ export const RecursiveAppendDuplicateFileMacros = (
   }
 };
 
-const buildUrlId = (filepath: string, idPrefix: string) => {
+/**
+ * Builds the ID to display in the URL, based on the file name
+ * and/or a given display name
+ * @param filepath string path of bob file
+ * @param idPrefix string prefix of all parent file IDs
+ * @param displayName string alternate name of file to display
+ * @returns string ID of url, label to display for current file
+ */
+export const buildUrlId = (
+  filepath: string,
+  idPrefix: string,
+  displayName?: string
+) => {
   const splitFilePath = filepath.split(".bob")[0].split("/");
-  let fileLabel: string = splitFilePath.pop()!;
+  let fileLabel: string = displayName || splitFilePath.pop()!;
   if (fileLabel === "index") {
     const parentDir = splitFilePath.pop();
     if (parentDir) {
