Delay path and macro resolution

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@diamondlightsource/cs-web-lib",
-  "version": "0.10.17",
+  "type": "module",
+  "version": "0.10.18",
   "description": "Control system web library",
   "main": "./dist/index.cjs",
   "scripts": {
@@ -20,17 +21,17 @@
     "url": "https://github.com/DiamondLightSource/cs-web-lib.git"
   },
   "dependencies": {
-    "@mui/icons-material": "^7.3.7",
-    "@reduxjs/toolkit": "^2.11.2",
     "apollo-link-retry": "^2.2.16",
     "bufferutil": "^4.0.8",
     "loglevel": "^1.9.2",
-    "react-grid-layout": "^2.2.3",
-    "react-toastify": "^11.0.5",
     "safe-stable-stringify": "^2.5.0",
     "utf-8-validate": "^5.0.10"
   },
   "devDependencies": {
+    "react-grid-layout": "^2.2.3",
+    "react-toastify": "^11.0.5",
+    "@mui/icons-material": "^7.3.7",
+    "@reduxjs/toolkit": "^2.11.2",
     "@apollo/client": "^3.11.8",
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^7.3.2",
@@ -59,7 +60,7 @@
     "graphql-ws": "^5.16.0",
     "jsdom": "^25.0.1",
     "prettier": "^3.3.3",
-    "react-gauge-component": "^2.0.26",
+    "react-gauge-component": "^2.0.29",
     "react-id-generator": "^3.0.2",
     "react-router": "^7.13.0",
     "react-test-renderer": "^18.3.1",
@@ -73,22 +74,25 @@
     "typescript": "^5.6.3",
     "vite": "^8.0.16",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-node-polyfills": "^0.26.0",
     "vitest": "^4.0.8",
     "vitest-canvas-mock": "^0.3.3",
     "vitest-websocket-mock": "^0.4.0",
     "xml-js": "^1.6.11"
   },
   "peerDependencies": {
+    "@mui/icons-material": "^7.3.7",
+    "@reduxjs/toolkit": "^2.11.2",
+    "react-grid-layout": "^2.2.3",
+    "react-toastify": "^11.0.5",
+    "@mui/material": "^7.3.2",
+    "@mui/x-charts": "^9.3.0",
     "@types/react": "^18.3.1",
+    "d3": "^7.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-gauge-component": "^2.0.26",
+    "react-gauge-component": "^2.0.29",
     "react-redux": "^7.2.9",
-    "react-router": "^7.13.0",
-    "d3": "^7.9.0",
-    "@mui/material": "^7.3.2",
-    "@mui/x-charts": "^9.3.0"
+    "react-router": "^7.13.0"
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

rollup.config.mjs

@@ -7,10 +7,21 @@ import postcss from "rollup-plugin-postcss";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import preserveDirectives from 'rollup-preserve-directives';
 
+const external = [
+  'react',
+  'react-dom',
+  'react-gauge-component',
+  'react-redux',
+  '@reduxjs/toolkit',
+  '@mui/material',
+  '@mui/system',
+  '@mui/icons-material'
+];
+
 const config = [
   {
     input: "src/index.ts",
-
+    external,
     output: [
       {
         dir: "dist",
@@ -38,7 +49,8 @@ const config = [
       peerDepsExternal(),
 
       resolve({
-        preferBuiltins: true
+        preferBuiltins: true,
+        dedupe: ['react', 'react-dom']
       }),
       commonjs({
         include: [
@@ -58,7 +70,7 @@ const config = [
     input: "dist/index.d.ts",
     output: [{ file: "dist/index.d.ts", format: "esm" }],
     plugins: [dts()],
-    external: [/\.css$/, '@reduxjs/toolkit']
+    external: [/\.css$/, ...external]
   }
 ];
 

src/misc/urlUtils.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { buildUrl, isFullyQualifiedUrl } from "./urlUtils";
+import { buildUrl, isFullyQualifiedUrl, normalisePath } from "./urlUtils";
 
 describe("urlUtils", () => {
   describe("isFullyQualifiedUrl", () => {
@@ -135,3 +135,76 @@ describe("urlUtils", () => {
     });
   });
 });
+
+describe("normalisePath", (): void => {
+  it("returns path when no other arguments are specified", async (): Promise<void> => {
+    const result = normalisePath("/a/path");
+    expect(result).toBe("/a/path");
+  });
+
+  it("returns path without .. when no other arguments are specified and path starts with ../", async (): Promise<void> => {
+    const result = normalisePath("../../a/path");
+    expect(result).toBe("a/path");
+  });
+
+  it("Joins path and parent when parent is a valid url", async (): Promise<void> => {
+    const result = normalisePath("/a/path", "http://test.diamond.ac.uk/");
+    expect(result).toBe("http://test.diamond.ac.uk/a/path");
+  });
+
+  it("Joins path and parent when parent is a path", async (): Promise<void> => {
+    const result = normalisePath("/a/path", "/parent/path");
+    expect(result).toBe("/parent/path/a/path");
+  });
+
+  it("Joins path when path contains .. and removes trailing folders from paren path", async (): Promise<void> => {
+    const result = normalisePath("../a/path", "/parent/path");
+    expect(result).toBe("/parent/a/path");
+  });
+
+  it("Returns path if path is a valid url", async (): Promise<void> => {
+    const result = normalisePath(
+      "https://anothertest.diamond.ac.uk/a/path",
+      "http://test.diamond.ac.uk/"
+    );
+    expect(result).toBe("https://anothertest.diamond.ac.uk/a/path");
+  });
+
+  it("Does not substitute macros if macros undefined", async (): Promise<void> => {
+    const result = normalisePath(
+      "$(some_macro)/$(another_macro)/path",
+      "$(another_macro)/parent"
+    );
+    expect(result).toBe(
+      "$(another_macro)/parent/$(some_macro)/$(another_macro)/path"
+    );
+  });
+
+  it("Substitutes macros into path if macros defined", async (): Promise<void> => {
+    const result = normalisePath(
+      "$(some_macro)/$(another_macro)/path",
+      "$(another_macro)/parent",
+      {
+        some_macro: "macroPath",
+        another_macro: "anotherMacroPath",
+        absent_macro: "no_match"
+      }
+    );
+    expect(result).toBe(
+      "$(another_macro)/parent/macroPath/anotherMacroPath/path"
+    );
+  });
+
+  it("Substitutes macros into path, returns path if path becomes a fully qualified url", async (): Promise<void> => {
+    const result = normalisePath(
+      "$(some_macro)/$(another_macro)/path",
+      "$(another_macro)/parent",
+      {
+        some_macro: "http://test.diamond.ac.uk",
+        another_macro: "anotherMacroPath",
+        absent_macro: "no_match"
+      }
+    );
+    expect(result).toBe("http://test.diamond.ac.uk/anotherMacroPath/path");
+  });
+});

src/misc/urlUtils.ts

@@ -1,3 +1,6 @@
+import { resolveMacros } from "../types";
+import { MacroMap } from "../types/macros";
+
 export const isFullyQualifiedUrl = (url: string): boolean => {
   try {
     const parsed = new URL(url);
@@ -46,3 +49,20 @@ export const buildUrl = (
     return `${baseHost}${path}`;
   }
 };
+
+export const normalisePath = (
+  path: string,
+  parentDir?: string,
+  macros?: MacroMap
+): string => {
+  let prefix = parentDir ?? "";
+  while (path.startsWith("../")) {
+    path = path.slice(3);
+    prefix = prefix.slice(0, prefix.lastIndexOf("/"));
+  }
+
+  // If path contains macros, we need to apply these before building the url
+  const resolvedPath = macros ? resolveMacros(path, macros) : path;
+
+  return buildUrl(prefix, resolvedPath);
+};

src/redux/slices/fileCacheSlice.ts

@@ -14,6 +14,7 @@ import { Position } from "../../types";
 import { MacroMap } from "../../types/macros";
 import stringify from "safe-stable-stringify";
 import { Breakpoints, Layout, ResponsiveLayouts } from "react-grid-layout";
+import { resolveWidgetPathsAndMacros } from "./fileCacheSliceUtils";
 
 export interface FileCache {
   [fileId: string]: WidgetDescription;
@@ -252,8 +253,14 @@ const fileCacheSlice = createSlice({
       });
 
       if (state.displayInstanceCache) {
+        const parentDir = file.slice(0, file.lastIndexOf("/"));
+
         state.displayInstanceCache[uuid] = {
-          description: description,
+          description: resolveWidgetPathsAndMacros(
+            description,
+            parentDir,
+            macros
+          ),
           fileId: file,
           macros: macros,
           uuid,