Comparison (#27)

* change plot to support different x axes

* add comparison feature

src/components/CompareList.tsx

@@ -0,0 +1,121 @@
+import {
+  Button,
+  Box,
+  TableContainer,
+  Paper,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+} from "@mui/material";
+import { useContext } from "react";
+import { XDIFileContext } from "../contexts/XDIFileContext";
+import XDIFile from "../xdifile";
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  [`&.${tableCellClasses.head}`]: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  [`&.${tableCellClasses.body}`]: {
+    fontSize: 14,
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+  },
+}));
+
+import { tableCellClasses } from "@mui/material/TableCell";
+
+import { styled } from "@mui/material/styles";
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+  "&:nth-of-type(odd):not(:hover):not(.activeclicked)": {
+    backgroundColor: theme.palette.action.selected,
+  },
+
+  // hide last border
+  "&:last-child td, &:last-child th": {
+    border: 0,
+  },
+}));
+
+function CompareMetadata(props: {
+  key: number;
+  xdiFile: XDIFile | null;
+}): JSX.Element {
+  //   const className = props.xasFile === props.selected ? "activeclicked" : "";
+
+  return (
+    <StyledTableRow
+      key={props.key}
+      hover={true}
+      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+    >
+      <StyledTableCell align="left">
+        {props.xdiFile?.element ?? "\xa0"}
+      </StyledTableCell>
+      <StyledTableCell align="center">
+        {props.xdiFile?.edge ?? ""}
+      </StyledTableCell>
+      <StyledTableCell align="center">
+        {props.xdiFile?.sample?.name ?? ""}
+      </StyledTableCell>
+    </StyledTableRow>
+  );
+}
+
+export default function CompareList() {
+  const xdiFileState = useContext(XDIFileContext);
+
+  const store = () => {
+    const current = xdiFileState.xdiFile;
+    if (
+      current != null &&
+      !xdiFileState.comparisonFiles.some((f) => f.id == current?.id)
+    ) {
+      const filesSlice =
+        xdiFileState.comparisonFiles.length >= 3
+          ? xdiFileState.comparisonFiles.slice(1, 3)
+          : xdiFileState.comparisonFiles;
+
+      const files = [...filesSlice, current];
+      xdiFileState.setComparisonFiles(files);
+    }
+  };
+
+  const clear = () => {
+    xdiFileState.setComparisonFiles([]);
+  };
+
+  return (
+    <Box>
+      <Button variant="contained" onClick={store}>
+        Store Selected
+      </Button>
+      <Button variant="outlined" onClick={clear}>
+        Clear All
+      </Button>
+      <TableContainer component={Paper}>
+        <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
+          <TableHead>
+            <TableRow>
+              <TableCell>Element</TableCell>
+              <TableCell align="center">Edge</TableCell>
+              <TableCell align="center">Name</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {xdiFileState.comparisonFiles.map((xdiFile, key) =>
+              CompareMetadata({
+                key: key,
+                xdiFile: xdiFile,
+              })
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+}

src/components/MetadataStack.tsx

@@ -47,7 +47,11 @@ function MetadataStack(props: {
         setOffset={setOffset}
       />
       {selectedStandard && (
-        <MetadataTab standard={selectedStandard} showDownload={true} />
+        <MetadataTab
+          standard={selectedStandard}
+          showDownload={true}
+          showCompare={true}
+        />
       )}
     </Stack>
   );

src/components/MetadataTab.tsx

@@ -5,6 +5,7 @@ import ReviewTextView from "./XDITextView";
 
 import { useState } from "react";
 import { XASStandard } from "../models";
+import CompareList from "./CompareList";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -38,6 +39,7 @@ function a11yProps(index: number) {
 export default function MetadataTab(props: {
   standard: XASStandard;
   showDownload: boolean;
+  showCompare: boolean;
 }) {
   const [value, setValue] = useState(0);
 
@@ -55,6 +57,7 @@ export default function MetadataTab(props: {
         >
           <Tab label="Metadata" {...a11yProps(0)} />
           <Tab label="Raw File" {...a11yProps(1)} />
+          {props.showCompare && <Tab label="Comparison" {...a11yProps(2)} />}
         </Tabs>
       </Box>
       <CustomTabPanel value={value} index={0}>
@@ -66,6 +69,11 @@ export default function MetadataTab(props: {
       <CustomTabPanel value={value} index={1}>
         <ReviewTextView />
       </CustomTabPanel>
+      {props.showCompare && (
+        <CustomTabPanel value={value} index={2}>
+          <CompareList />
+        </CustomTabPanel>
+      )}
     </Box>
   );
 }

src/components/PersistentView.tsx

@@ -1,4 +1,3 @@
-
 import { useState, useContext } from "react";
 
 import axios from "axios";
@@ -10,59 +9,61 @@ import XDIFile from "../xdifile.ts";
 import { XDIFileProvider } from "../contexts/XDIFileContext.tsx";
 import XDIChart from "./XDIChart.tsx";
 
-import { useLocation} from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { useEffect } from "react";
 
 import { MetadataContext } from "../contexts/MetadataContext.tsx";
 
-
-
 function PersistentView() {
-
-    const location = useLocation();
-    const id = location.pathname.slice(5)
-
-    const [xdiFile, setXDIFile] = useState<XDIFile | null>(null);
-    const allStandards = useContext(MetadataContext);
-
-    console.log(id)
-    console.log(allStandards[1])
-
-    const standard = allStandards.find((f) => f.location === id)
-
-    useEffect(() => {
-        axios.get("/webxdiviewer/xdidata/" + id).then((response) => {
-
-            let xdi = null;
-        try {
-            xdi = XDIFile.parseFile(response.data);
-
-        } catch {
-            console.log("Could not read {}", focus)
-
-        }
-
-        setXDIFile(xdi);
-    })}, [id]);
-
-
-
-    // const onClick = getData();
-
-    return (
-        <XDIFileProvider value={{ xdiFile: xdiFile, setXDIFile: setXDIFile }}>
-          <Grid height="100%" container>
-            <Grid item lg={5} md={12} padding={1}>
-            {standard 
-            ? <MetadataTab standard={standard} showDownload={true} />
-            : <Typography> Could not find {id} </Typography>
-            }
-            </Grid>
-            <Grid item height="100%" lg={7} md={12} padding={1}>
-              <XDIChart />
-            </Grid>
-          </Grid>
-        </XDIFileProvider>
-      );
-    }
-export default PersistentView;
+  const location = useLocation();
+  const id = location.pathname.slice(5);
+
+  const [xdiFile, setXDIFile] = useState<XDIFile | null>(null);
+  const allStandards = useContext(MetadataContext);
+
+  const standard = allStandards.find((f) => f.location === id);
+
+  useEffect(() => {
+    axios.get("/webxdiviewer/xdidata/" + id).then((response) => {
+      let xdi = null;
+      try {
+        xdi = XDIFile.parseFile(response.data, id);
+      } catch {
+        console.log("Could not read {}", focus);
+      }
+
+      setXDIFile(xdi);
+    });
+  }, [id]);
+
+  // const onClick = getData();
+
+  return (
+    <XDIFileProvider
+      value={{
+        xdiFile: xdiFile,
+        setXDIFile: setXDIFile,
+        comparisonFiles: [],
+        setComparisonFiles: () => {},
+      }}
+    >
+      <Grid height="100%" container>
+        <Grid item lg={5} md={12} padding={1}>
+          {standard ? (
+            <MetadataTab
+              standard={standard}
+              showDownload={true}
+              showCompare={false}
+            />
+          ) : (
+            <Typography> Could not find {id} </Typography>
+          )}
+        </Grid>
+        <Grid item height="100%" lg={7} md={12} padding={1}>
+          <XDIChart />
+        </Grid>
+      </Grid>
+    </XDIFileProvider>
+  );
+}
+export default PersistentView;

src/components/StandardMetadataCard.tsx

@@ -5,6 +5,7 @@ import {
   Typography,
   CardActions,
   Link,
+  Stack,
 } from "@mui/material";
 
 function StandardMetadataCard(props: {
@@ -36,12 +37,17 @@ function StandardMetadataCard(props: {
       </CardContent>
       {props.showDownload && (
         <CardActions>
-          <Link
-            href={"/webxdiviewer/xdidata/" + String(standard.location)}
-            download={String(standard.id) + ".xdi"}
-          >
-            Download
-          </Link>
+          <Stack>
+            <Link
+              href={"/webxdiviewer/xdidata/" + String(standard.location)}
+              download={String(standard.id) + ".xdi"}
+            >
+              Download XDI
+            </Link>
+            <Link href={"/#/xdi/" + String(standard.location)}>
+              Persistent Link
+            </Link>
+          </Stack>
         </CardActions>
       )}
     </Card>

src/components/UploadStack.tsx

@@ -13,7 +13,11 @@ function UploadStack() {
     <Stack spacing={2}>
       <UploadXDI setXASMetadata={setXASMetadata} />
       {xasMetadata && (
-        <MetadataTab standard={xasMetadata} showDownload={false} />
+        <MetadataTab
+          standard={xasMetadata}
+          showDownload={false}
+          showCompare={false}
+        />
       )}
     </Stack>
   );

src/components/UploadXDI.tsx

@@ -18,7 +18,7 @@ function UploadXDI(props: { setXASMetadata: (standard: XASStandard) => void }) {
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     axios.get(xdiURL).then((response) => {
-      const xdi = XDIFile.parseFile(response.data);
+      const xdi = XDIFile.parseFile(response.data, xdiURL);
       xdiContext.setXDIFile(xdi);
 
       const standard: XASStandard = {
@@ -43,7 +43,7 @@ function UploadXDI(props: { setXASMetadata: (standard: XASStandard) => void }) {
         if (e.target != null && typeof e.target.result === "string") {
           let xdi: XDIFile;
           try {
-            xdi = XDIFile.parseFile(e.target.result);
+            xdi = XDIFile.parseFile(e.target.result, "localfile");
             xdiContext.setXDIFile(xdi);
 
             const standard: XASStandard = {

src/components/ViewPage.tsx

@@ -12,13 +12,14 @@ import XDIChart from "./XDIChart.tsx";
 
 function ViewPage() {
   const [xdiFile, setXDIFile] = useState<XDIFile | null>(null);
+  const [comparisonFiles, setComparisonFiles] = useState<XDIFile[]>([]);
 
   const allStandards = useContext(MetadataContext);
 
   function getData() {
     return (id: string) => {
       axios.get("/webxdiviewer/xdidata/" + id).then((response) => {
-        const xdi = XDIFile.parseFile(response.data);
+        const xdi = XDIFile.parseFile(response.data, id);
         setXDIFile(xdi);
       });
     };
@@ -27,7 +28,14 @@ function ViewPage() {
   const onClick = getData();
 
   return (
-    <XDIFileProvider value={{ xdiFile: xdiFile, setXDIFile: setXDIFile }}>
+    <XDIFileProvider
+      value={{
+        xdiFile: xdiFile,
+        setXDIFile: setXDIFile,
+        comparisonFiles: comparisonFiles,
+        setComparisonFiles: setComparisonFiles,
+      }}
+    >
       <Grid height="100%" container>
         <Grid item lg={5} md={12} padding={1}>
           <MetadataStack standards={allStandards} updatePlot={onClick} />

src/components/WelcomePage.tsx

@@ -4,10 +4,8 @@ import { Container, Typography, Box } from "@mui/material";
 const env_repo_location = import.meta.env.VITE_XDI_REPO_LOCATION;
 
 function WelcomePage() {
+  const repo_location = env_repo_location ?? "examplerepo/xdifiles";
 
-  const repo_location = env_repo_location ?? "examplerepo/xdifiles" 
-
-  console.log(repo_location)
   return (
     <Container maxWidth="md" sx={{ alignSelf: "center", p: "24px" }}>
       <Typography variant="h4" padding="24px">