als-computing · dylanmcreynolds · Feb 17, 2025 · Feb 3, 2025 · Feb 4, 2025 · Feb 4, 2025
diff --git a/.env.example b/.env.example
@@ -1,2 +1,2 @@
 TILED_SINGLE_USER_API_KEY= <add key>
-REACT_APP_WEBSOCKET_URL=ws://localhost:8001/simImages
+REACT_APP_WEBSOCKET_URL=ws://localhost:8021/viz
diff --git a/.flake8 b/.flake8
@@ -4,5 +4,5 @@ exclude =
     __pycache__,
     build,
     dist
-max-line-length = 115
+max-line-length = 145
 extend-ignore = E203, W503
diff --git a/Dockerfile_frontend b/Dockerfile_frontend
@@ -5,6 +5,8 @@ COPY ./frontend/package*.json /frontend/
 RUN npm ci
 COPY ./frontend /frontend/
 COPY .env_frontend /frontend/.env
+
+
 RUN npm run build
 
 FROM docker.io/nginx:1.26-alpine

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,11 +7,13 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "dayjs": "^1.11.13",
+    "mermaid": "^11.4.1",
     "msgpack-lite": "^0.1.26",
     "plotly.js": "^2.12.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-plotly.js": "^2.5.1",
+    "react-router": "^7.1.5",
     "react-scripts": "5.0.1",
     "react-tooltip": "^5.28.0",
     "web-vitals": "^2.1.4"
@@ -41,6 +43,6 @@
     ]
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.17"
   }
 }
diff --git a/frontend/public/images/bnl_logo.png b/frontend/public/images/bnl_logo.png
diff --git a/frontend/public/images/illumine_logo.png b/frontend/public/images/illumine_logo.png
diff --git a/frontend/public/images/mlexchange_logo.png b/frontend/public/images/mlexchange_logo.png
diff --git a/frontend/public/images/mwet_logo.png b/frontend/public/images/mwet_logo.png
diff --git a/frontend/public/images/xrayIcon/gif0.png b/frontend/public/images/xrayIcon/gif0.png
diff --git a/frontend/public/images/xrayIcon/gif1.png b/frontend/public/images/xrayIcon/gif1.png
diff --git a/frontend/public/images/xrayIcon/gif2.png b/frontend/public/images/xrayIcon/gif2.png
diff --git a/frontend/public/images/xrayIcon/gif3.png b/frontend/public/images/xrayIcon/gif3.png
diff --git a/frontend/public/images/xrayIcon/gif4.png b/frontend/public/images/xrayIcon/gif4.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -24,9 +24,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>TR-AP-XPS</title>
+    <title>SMI Data Viewer</title>
   </head>
   <body>
+    <script type="module">
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+    </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,105 +1,12 @@
-import { useEffect } from 'react';
+import { Routes, Route } from 'react-router';
+import Home from './pages/Home';
+import Services from './pages/Services';
 
-import Main from "./components/Main";
-import Header from "./components/Header";
-import Sidebar from "./components/Sidebar";
-import SidebarItem from "./components/SidebarItem";
-import Widget from "./components/Widget";
-import PlotlyHeatMap from "./components/PlotlyHeatMap";
-import PlotlyScatterSingle from "./components/PlotlyScatterSingle";
-import PlotlyScatterMultiple from "./components/PlotlyScatterMultiple";
-import ConsoleViewer from "./components/ConsoleViewer";
-import Button from "./component_library/Button";
-import TextField from "./component_library/TextField";
-import ScanMetadata from "./components/ScanMetadata";
-import Settings from "./components/Settings";
-import FormContainer from "./component_library/FormContainer";
-import { phosphorIcons } from './assets/icons';
-
-import { useAPXPS } from "./hooks/useAPXPS";
 export default function App() {
-
-  const {
-    rawArray,
-    vfftArray,
-    ifftArray,
-    singlePeakData,
-    allPeakData,
-    messages,
-    wsUrl,
-    setWsUrl,
-    frameNumber,
-    socketStatus,
-    startWebSocket,
-    closeWebSocket,
-    warningMessage,
-    status,
-    heatmapSettings,
-    handleHeatmapSettingChange,
-    metadata,
-    shotRecentArray,
-    shotNumber,
-    shotMeanArray,
-    shotStdArray,
-  } = useAPXPS({});
-
-  //Automatically start the websocket connection on page load
-  useEffect(() => {
-    startWebSocket();
-    return closeWebSocket;
-  }, []);
-
     return (
-      <div className="flex-col h-screen w-screen">
-
-        <div className="h-16 shadow-lg">
-          <Header />
-        </div>
-
-        <div className="flex h-[calc(100vh-4rem)]">
-          <Sidebar>
-            <SidebarItem title="Websocket" icon={phosphorIcons.plugsConnected} pulse={socketStatus === 'Open'}>
-              <li className="flex flex-col w-full items-center justify-center space-x-6 space-y-4">
-                  {warningMessage.length > 0 ? <p className="text-red-500 text-lg">{warningMessage}</p> : ''}
-                  <TextField text="Websocket URL" value={wsUrl} cb={setWsUrl} styles='w-64' />
-                  {socketStatus === 'closed' ? <Button text="Start" cb={startWebSocket}/> : <Button text="stop" cb={closeWebSocket}/>}
-              </li>
-            </SidebarItem>
-            <SidebarItem title='Live Image Settings' icon={phosphorIcons.sliders}>
-              <Settings>
-                <FormContainer inputs={heatmapSettings} handleInputChange={handleHeatmapSettingChange}/>
-              </Settings>
-            </SidebarItem>
-            <SidebarItem title='Scan Metadata' icon={phosphorIcons.fileMd}>
-              <ScanMetadata status={status} metadata={metadata}/>
-            </SidebarItem>
-          </Sidebar>
-
-          <Main >
-            <Widget title={`Live Images - Current Shot #${shotNumber}`} width='w-3/5' maxWidth='max-w-[1000px]' defaultHeight='h-full' maxHeight='max-h-[1400px]' expandedWidth='w-full'>
-              <div className="w-full h-full overflow-auto flex">
-                <PlotlyHeatMap array={rawArray} title='RAW' xAxisTitle='' yAxisTitle='' width='w-1/3' verticalScaleFactor={heatmapSettings.scaleFactor.value} showTicks={heatmapSettings.showTicks.value}/>
-                <PlotlyHeatMap array={vfftArray} title='VFFT' xAxisTitle='' yAxisTitle='' width='w-1/3' verticalScaleFactor={heatmapSettings.scaleFactor.value} showTicks={heatmapSettings.showTicks.value}/>
-                <PlotlyHeatMap array={ifftArray} title='IFFT' xAxisTitle='' yAxisTitle='' width='w-1/3' verticalScaleFactor={heatmapSettings.scaleFactor.value} showTicks={heatmapSettings.showTicks.value}/>
-              </div>
-            </Widget>
-
-            <div className='flex flex-wrap w-2/5 h-full'>
-              <Widget title={`Shot Sum - Current Shot #${shotNumber}`} width='w-full' maxWidth='max-w-[1000px]' defaultHeight='h-1/2' maxHeight='max-h-[1000px]' contentStyles='flex-col space-y-1 pb-2'>
-                <PlotlyHeatMap array={shotRecentArray} title='Shot Recent' fixPlotHeightToParent={true} height="h-1/3" width='w-full' verticalScaleFactor={1} showTicks={false}/>
-                <PlotlyHeatMap array={shotMeanArray} title='Shot Mean' fixPlotHeightToParent={true} height="h-1/3" width='w-full' verticalScaleFactor={1} showTicks={false}/>
-                <PlotlyHeatMap array={shotStdArray} title='Shot Std' fixPlotHeightToParent={true} height="h-1/3" width='w-full' verticalScaleFactor={1} showTicks={false}/>
-              </Widget>
-              <Widget title='Recent Fitted Peaks' width='w-full' maxWidth='max-w-[1000px]' defaultHeight='h-1/4' maxHeight='max-h-96'>
-                  <PlotlyScatterMultiple data={singlePeakData} title='Recent Fitted Peaks' xAxisTitle='x' yAxisTitle='y'/>
-              </Widget>
-              <Widget title='Cumulative Fitted Peaks' width='w-full' maxWidth='max-w-[1000px]' defaultHeight='h-1/4' maxHeight='max-h-96'>
-                  <PlotlyScatterMultiple data={allPeakData} title='Cumulative Fitted Peaks' xAxisTitle='x' yAxisTitle='y'/>
-              </Widget>
-            </div>
-          </Main>
-        </div>
-      </div>
-
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="services" element={<Services />} />
+      </Routes>
     )
 }
diff --git a/frontend/src/OldApp.js b/frontend/src/OldApp.js
@@ -0,0 +1,105 @@
+import { useEffect } from 'react';
+
+import Main from "./components/Main";
+import Header from "./components/Header";
+import Sidebar from "./components/Sidebar";
+import SidebarItem from "./components/SidebarItem";
+import Widget from "./components/Widget";
+import PlotlyHeatMap from "./components/PlotlyHeatMap";
+import PlotlyScatterSingle from "./components/PlotlyScatterSingle";
+import PlotlyScatterMultiple from "./components/PlotlyScatterMultiple";
+import ConsoleViewer from "./components/ConsoleViewer";
+import Button from "./component_library/Button";
+import TextField from "./component_library/TextField";
+import ScanMetadata from "./components/ScanMetadata";
+import Settings from "./components/Settings";
+import FormContainer from "./component_library/FormContainer";
+import { phosphorIcons } from './assets/icons';
+
+import { useAPXPS } from "./hooks/useAPXPS";
+export default function App() {
+
+  const {
+    rawArray,
+    vfftArray,
+    ifftArray,
+    singlePeakData,
+    allPeakData,
+    messages,
+    wsUrl,
+    setWsUrl,
+    frameNumber,
+    socketStatus,
+    startWebSocket,
+    closeWebSocket,
+    warningMessage,
+    status,
+    heatmapSettings,
+    handleHeatmapSettingChange,
+    metadata,
+    shotRecentArray,
+    shotNumber,
+    shotMeanArray,
+    shotStdArray,
+  } = useAPXPS({});
+
+  //Automatically start the websocket connection on page load
+  useEffect(() => {
+    startWebSocket();
+    return closeWebSocket;
+  }, []);
+
+    return (
+      <div className="flex-col h-screen w-screen">
+
+        <div className="h-16 shadow-lg">
+          <Header />
+        </div>
+
+        <div className="flex h-[calc(100vh-4rem)]">
+          <Sidebar>
+            <SidebarItem title="Websocket" icon={phosphorIcons.plugsConnected} pulse={socketStatus === 'Open'}>
+              <li className="flex flex-col w-full items-center justify-center space-x-6 space-y-4">
+                  {warningMessage.length > 0 ? <p className="text-red-500 text-lg">{warningMessage}</p> : ''}
+                  <TextField text="Websocket URL" value={wsUrl} cb={setWsUrl} styles='w-64' />
+                  {socketStatus === 'closed' ? <Button text="Start" cb={startWebSocket}/> : <Button text="stop" cb={closeWebSocket}/>}
+              </li>
+            </SidebarItem>
+            <SidebarItem title='Live Image Settings' icon={phosphorIcons.sliders}>
+              <Settings>
+                <FormContainer inputs={heatmapSettings} handleInputChange={handleHeatmapSettingChange}/>
+              </Settings>
+            </SidebarItem>
+            <SidebarItem title='Scan Metadata' icon={phosphorIcons.fileMd}>
+              <ScanMetadata status={status} metadata={metadata}/>
+            </SidebarItem>
+          </Sidebar>
+
+          <Main >
+            <Widget title={`Live Images - Current Shot #${shotNumber}`} width='w-3/5' maxWidth='max-w-[1000px]' defaultHeight='h-full' maxHeight='max-h-[1400px]' expandedWidth='w-full'>
+              <div className="w-full h-full overflow-auto flex">
+                <PlotlyHeatMap array={rawArray} title='RAW' xAxisTitle='' yAxisTitle='' width='w-1/3' verticalScaleFactor={heatmapSettings.scaleFactor.value} showTicks={heatmapSettings.showTicks.value}/>
+                <PlotlyHeatMap array={vfftArray} title='VFFT' xAxisTitle='' yAxisTitle='' width='w-1/3' verticalScaleFactor={heatmapSettings.scaleFactor.value} showTicks={heatmapSettings.showTicks.value}/>
+                <PlotlyHeatMap array={ifftArray} title='IFFT' xAxisTitle='' yAxisTitle='' width='w-1/3' verticalScaleFactor={heatmapSettings.scaleFactor.value} showTicks={heatmapSettings.showTicks.value}/>
+              </div>
+            </Widget>
+
+            <div className='flex flex-wrap w-2/5 h-full'>
+              <Widget title={`Shot Sum - Current Shot #${shotNumber}`} width='w-full' maxWidth='max-w-[1000px]' defaultHeight='h-1/2' maxHeight='max-h-[1000px]' contentStyles='flex-col space-y-1 pb-2'>
+                <PlotlyHeatMap array={shotRecentArray} title='Shot Recent' fixPlotHeightToParent={true} height="h-1/3" width='w-full' verticalScaleFactor={1} showTicks={false}/>
+                <PlotlyHeatMap array={shotMeanArray} title='Shot Mean' fixPlotHeightToParent={true} height="h-1/3" width='w-full' verticalScaleFactor={1} showTicks={false}/>
+                <PlotlyHeatMap array={shotStdArray} title='Shot Std' fixPlotHeightToParent={true} height="h-1/3" width='w-full' verticalScaleFactor={1} showTicks={false}/>
+              </Widget>
+              <Widget title='Recent Fitted Peaks' width='w-full' maxWidth='max-w-[1000px]' defaultHeight='h-1/4' maxHeight='max-h-96'>
+                  <PlotlyScatterMultiple data={singlePeakData} title='Recent Fitted Peaks' xAxisTitle='x' yAxisTitle='y'/>
+              </Widget>
+              <Widget title='Cumulative Fitted Peaks' width='w-full' maxWidth='max-w-[1000px]' defaultHeight='h-1/4' maxHeight='max-h-96'>
+                  <PlotlyScatterMultiple data={allPeakData} title='Cumulative Fitted Peaks' xAxisTitle='x' yAxisTitle='y'/>
+              </Widget>
+            </div>
+          </Main>
+        </div>
+      </div>
+
+    )
+}
diff --git a/frontend/src/assets/icons.js b/frontend/src/assets/icons.js
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
@@ -1,10 +1,24 @@
+import Status from "./Status";
 const als_logo = "/images/als_logo_wheel.png";
+const ml_logo = "images/mlexchange_logo.png";
+const mwet_logo = "images/mwet_logo.png";
+const illumine_logo = "images/illumine_logo.png";
 
-export default function Header() {
+
+export default function Header({isExperimentRunning=false, showStatus=false, statusMessage=""}) {
     return(
-        <header className="flex items-center h-8 py-8 justify-center space-x-4 shadow-lg">
+        <header className="flex items-center h-8 py-8 justify-center space-x-4 shadow-lg relative">
+            { showStatus &&
+                <div className="absolute top-0 left-12 flex items-end">
+                    <Status slideshow={isExperimentRunning}/>
+                    <p className="text-sm font-light pl-2">{statusMessage}</p>
+                </div>
+            }
             <img src={als_logo} alt="als logo" className="h-8 w-auto"/>
-            <h1 className="text-4xl text-sky-900">TR-AP-XPS Live Data Viewer</h1>
+            <h1 className="text-4xl text-sky-900">GISAXS Data Viewer</h1>
+            <img src={illumine_logo} alt="bnl logo" className="h-8 w-auto"/>
+
+
         </header>
     )
 }