Merge pull request #10 from jacobfilik/rawview

add raw viewer, refactor, lint

.devcontainer/devcontainer.json

@@ -1,19 +1,14 @@
 {
   "image": "node:18-bullseye-slim",
   "postCreateCommand": "yes | npm install -g pnpm",
-  "forwardPorts": [
-    5173
-  ],
+  "forwardPorts": [5173],
   "runArgs": [
     "--network=host",
     "--security-opt=label=type:container_runtime_t"
   ],
   "customizations": {
     "vscode": {
-      "extensions": [
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode"
-      ]
+      "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
     }
   }
 }

.github/workflows/node.js.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Run build
-        run: pnpm run build
+        run: pnpm run build --base=/webxdiviewer/
       - name: Uploading production-ready build files
         uses: actions/upload-artifact@v2
         with:

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest"

src/App.tsx

@@ -6,8 +6,6 @@
 // import XDIFile from './xdifile'
 // import StandardViewer from './StandardViewer'
 
-
-
 // function App() {
 
 //   const get_data = () => {
@@ -16,7 +14,7 @@
 //       const file = response.data;
 //       const xdifile = XDIFile.parseFile(file);
 //       console.log(xdifile)
-    
+
 //     });
 //   }
 
@@ -27,13 +25,10 @@
 
 // export default App
 
-
-
 import ViewPage from "./components/ViewPage.tsx";
 import WelcomePage from "./components/WelcomePage.tsx";
 import Header from "./components/Header.tsx";
 
-
 import { CssBaseline } from "@mui/material";
 import { useMediaQuery } from "@mui/material";
 
@@ -43,7 +38,6 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { MetadataProvider } from "./contexts/MetadataContext.tsx";
 import { Routes, Route } from "react-router-dom";
 
-
 function App() {
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
   const [mode, setMode] = useState<"light" | "dark">(
@@ -72,19 +66,16 @@ function App() {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Stack height="100vh" width="100vw" spacing={1}>
-                  <Header
-            colorMode={mode}
-            toggleColorMode={colorMode.toggleColorMode}
-          />
-      <MetadataProvider>
-                <Routes>
-              <Route path="/" element={<WelcomePage />} />
-              <Route path="/view" element={<ViewPage />} />
-              </Routes>
-      </MetadataProvider>
+        <Header colorMode={mode} toggleColorMode={colorMode.toggleColorMode} />
+        <MetadataProvider>
+          <Routes>
+            <Route path="/" element={<WelcomePage />} />
+            <Route path="/view" element={<ViewPage />} />
+          </Routes>
+        </MetadataProvider>
       </Stack>
     </ThemeProvider>
   );
 }
 
-export default App;
+export default App;

src/components/Header.tsx

@@ -11,30 +11,7 @@ import { Checkbox } from "@mui/material";
 
 import { NavLink } from "react-router-dom";
 
-// import LightModeIcon from "./LightModeIcon";
 import { MdLightMode, MdDarkMode } from "react-icons/md";
-// import DarkModeIcon from "./DarkModeIcon";
-
-// function NavListItem(props: { to: string; label: string }) {
-//   const to = props.to;
-//   const label = props.label;
-//   return (
-//     <ListItem key={label}>
-//       <ListItemButton
-//         component={NavLink}
-//         to={to}
-//         sx={{
-//           "&.active": {
-//             fontWeight: 800,
-//             color: (theme) => theme.palette.text.secondary,
-//           },
-//         }}
-//       >
-//         <ListItemText primary={label} />
-//       </ListItemButton>
-//     </ListItem>
-//   );
-// }
 
 export default function Header(props: {
   colorMode: string;

src/components/MetadataStack.tsx

@@ -1,6 +1,6 @@
 import { JSX, useState } from "react";
 import { XASStandard } from "../models";
-import StandardMetadataCard from "./StandardMetadataCard";
+import MetadataTab from "./MetadataTab";
 
 import Stack from "@mui/material/Stack";
 
@@ -46,7 +46,7 @@ function MetadataStack(props: {
         offset={offset}
         setOffset={setOffset}
       />
-      {selectedStandard && <StandardMetadataCard standard={selectedStandard} />}
+      {selectedStandard && <MetadataTab standard={selectedStandard} />}
     </Stack>
   );
 }

src/components/MetadataTab.tsx

@@ -0,0 +1,65 @@
+import { Tab, Tabs, Box } from "@mui/material";
+
+import StandardMetadataCard from "./StandardMetadataCard";
+import ReviewTextView from "./XDITextView";
+
+import { useState } from "react";
+import { XASStandard } from "../models";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
+export default function MetadataTab(props: { standard: XASStandard }) {
+  const [value, setValue] = useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          aria-label="basic tabs example"
+        >
+          <Tab label="Standard" {...a11yProps(0)} />
+          <Tab label="Raw File" {...a11yProps(1)} />
+        </Tabs>
+      </Box>
+      <CustomTabPanel value={value} index={0}>
+        <StandardMetadataCard standard={props.standard} />
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={1}>
+        <ReviewTextView />
+      </CustomTabPanel>
+    </Box>
+  );
+}

src/components/StandardMetadataCard.tsx

@@ -26,13 +26,14 @@ function StandardMetadataCard(props: { standard: XASStandard }) {
           {standard.sample.prep}
         </Typography>
         <Typography sx={{ mb: 1.5 }}>
-          Measured at {standard.facility?.name} on beamline {standard.beamline.name}
+          Measured at {standard.facility?.name} on beamline{" "}
+          {standard.beamline.name}
         </Typography>
         <Typography sx={{ mb: 1.5 }}>{standard.start_time}</Typography>
       </CardContent>
       <CardActions>
         <Link
-          href={ "/webxdiviewer/xdidata/" + String(standard.location)}
+          href={"/webxdiviewer/xdidata/" + String(standard.location)}
           download={String(standard.id) + ".xdi"}
         >
           Download

src/components/ViewPage.tsx

@@ -1,76 +1,42 @@
 import { useState, useContext } from "react";
 
-import XASChart from "./XASChart.tsx";
 import axios from "axios";
 import MetadataStack from "./MetadataStack.tsx";
 
-import { XASData } from "../models.ts";
-
 import { Grid } from "@mui/material";
 import XDIFile from "../xdifile.ts";
 
 import { MetadataContext } from "../contexts/MetadataContext.tsx";
+import { XDIFileProvider } from "../contexts/XDIFileContext.tsx";
+import XDIChart from "./XDIChart.tsx";
 
 function ViewPage() {
-  const [xasdata, setXASData] = useState<XASData | null>(null);
-  const [showTrans, setShowTrans] = useState(false);
-  const [showFluor, setShowFluor] = useState(false);
-  const [showRef, setShowRef] = useState(false);
-  const [contains, setContains] = useState([false, false, false]);
+  const [xdiFile, setXDIFile] = useState<XDIFile | null>(null);
 
   const allStandards = useContext(MetadataContext);
 
   function getData() {
     return (id: string) => {
       axios.get("/webxdiviewer/xdidata/" + id).then((response) => {
         const xdi = XDIFile.parseFile(response.data);
-
-        const energy = xdi.energy();
-        const mutrans = xdi.muTrans();
-        const mufluor = xdi.muFluor();
-        const murefer = xdi.muRefer();
-
-        const containsTrans = !(mutrans === null);
-        const containsFluor = !(mufluor === null);
-        const containsRef = !(murefer === null);
-
-        setShowTrans(containsTrans);
-        setShowRef(containsRef);
-        setShowFluor(containsFluor);
-        setContains([containsTrans, containsFluor, containsRef]);
-
-        const xasdata: XASData = {
-          energy: energy,
-          mutrans: mutrans,
-          mufluor: mufluor,
-          murefer: murefer,
-        };
-
-        setXASData(xasdata);
+        setXDIFile(xdi);
       });
     };
   }
 
   const onClick = getData();
 
   return (
-    <Grid height="100%" container>
-      <Grid item xs={5} padding={1}>
-        <MetadataStack standards={allStandards} updatePlot={onClick} />
-      </Grid>
-      <Grid item height="100%" xs={7} padding={1}>
-        <XASChart
-          xasdata={xasdata}
-          showTrans={showTrans}
-          showFluor={showFluor}
-          showRef={showRef}
-          setShowTrans={setShowTrans}
-          setShowFluor={setShowFluor}
-          setShowRef={setShowRef}
-          contains={contains}
-        />
+    <XDIFileProvider value={{ xdiFile: xdiFile, setXDIFile: setXDIFile }}>
+      <Grid height="100%" container>
+        <Grid item xs={5} padding={1}>
+          <MetadataStack standards={allStandards} updatePlot={onClick} />
+        </Grid>
+        <Grid item height="100%" xs={7} padding={1}>
+          <XDIChart />
+        </Grid>
       </Grid>
-    </Grid>
+    </XDIFileProvider>
   );
 }