add comparison feature

jacobfilik · Oct 23, 2024 · 8130632 · 8130632
1 parent 03ffccb
commit 8130632
Show file tree

Hide file tree

Showing 12 changed files with 236 additions and 34 deletions.
diff --git a/src/components/CompareList.tsx b/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>
+  );
+}
diff --git a/src/components/MetadataStack.tsx b/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>
   );

diff --git a/src/components/MetadataTab.tsx b/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>
   );
 }
diff --git a/src/components/PersistentView.tsx b/src/components/PersistentView.tsx
@@ -21,9 +21,6 @@ function PersistentView() {
   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(() => {
@@ -42,11 +39,22 @@ function PersistentView() {
   // const onClick = getData();
 
   return (
-    <XDIFileProvider value={{ xdiFile: xdiFile, setXDIFile: setXDIFile }}>
+    <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} />
+            <MetadataTab
+              standard={standard}
+              showDownload={true}
+              showCompare={false}
+            />
           ) : (
             <Typography> Could not find {id} </Typography>
           )}

diff --git a/src/components/StandardMetadataCard.tsx b/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>

diff --git a/src/components/UploadStack.tsx b/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>
   );

diff --git a/src/components/ViewPage.tsx b/src/components/ViewPage.tsx
@@ -12,6 +12,7 @@ import XDIChart from "./XDIChart.tsx";
 
 function ViewPage() {
   const [xdiFile, setXDIFile] = useState<XDIFile | null>(null);
+  const [comparisonFiles, setComparisonFiles] = useState<XDIFile[]>([]);
 
   const allStandards = useContext(MetadataContext);
 
@@ -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} />

diff --git a/src/components/WelcomePage.tsx b/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">

diff --git a/src/components/XASChart.tsx b/src/components/XASChart.tsx
@@ -18,6 +18,8 @@ import {
 
 import "@h5web/lib/dist/styles.css";
 
+import { darken, lighten } from "@mui/material";
+
 import { ReactElement } from "react";
 
 import Paper from "@mui/material/Paper";
@@ -53,7 +55,6 @@ function buildDisplayData(
 ): DisplayData {
   const ydata = xasData[type];
   const xdata = xasData.energy;
-  console.log(label + " " + type);
 
   const y = normalize ? pre_edge(xdata, ydata) : ndarray(ydata, [ydata.length]);
 
@@ -112,15 +113,17 @@ function displayDataToDataCurve(
   );
 }
 
-function XASChart(props: { xasData: XASData | null }) {
+function XASChart(props: {
+  xasData: XASData | null;
+  comparisonFiles: XASData[];
+}) {
   const [chartState, setChartState] = useState<XASChartState>({
     showTrans: false,
     showFluor: false,
     showRefer: false,
   });
 
   useEffect(() => {
-    console.log("USE EFFECT");
     setChartState({
       showTrans: props.xasData?.mutrans != null,
       showFluor: props.xasData?.mufluor != null,
@@ -161,12 +164,28 @@ function XASChart(props: { xasData: XASData | null }) {
     showRefer,
     useNorm,
     [
-      theme.palette.primary.dark,
-      theme.palette.success.light,
-      theme.palette.secondary.dark,
+      darken(theme.palette.primary.dark, 0.3),
+      darken(theme.palette.success.light, 0.3),
+      darken(theme.palette.secondary.dark, 0.3),
     ]
   );
 
+  const filteredComparison: XASData[] = props.comparisonFiles.filter(
+    (f) => f.id != props.xasData?.id
+  );
+
+  const ddcompare: DisplayData[] = filteredComparison
+    .map((f, i) => {
+      return createDisplayData(f, showTrans, showFluor, showRefer, useNorm, [
+        lighten(theme.palette.primary.dark, i * 0.3),
+        lighten(theme.palette.success.light, i * 0.3),
+        lighten(theme.palette.secondary.dark, i * 0.3),
+      ]);
+    })
+    .flat();
+
+  dd.push(...ddcompare);
+
   const domain: Domain | undefined = getCombinedDomain(
     dd.map((a) => getDomain(a.y))
   );
@@ -216,8 +235,6 @@ function XASChart(props: { xasData: XASData | null }) {
     ],
   } as React.CSSProperties;
 
-  console.log("RENDER " + (props.xasData?.id ?? "Nothing") + " " + contains);
-
   return (
     <Paper
       // flexdirection="column"

diff --git a/src/components/XDIChart.tsx b/src/components/XDIChart.tsx
@@ -7,6 +7,7 @@ function XDIChart() {
   const xdiFileState = useContext(XDIFileContext);
 
   let xasdata: XASData | null = null;
+  let comparisonFiles: XASData[] = [];
 
   if (xdiFileState.xdiFile != null) {
     const xdi = xdiFileState.xdiFile;
@@ -23,9 +24,21 @@ function XDIChart() {
       mufluor: mufluor,
       murefer: murefer,
     };
+
+    comparisonFiles = xdiFileState.comparisonFiles.map((f) => {
+      return {
+        id: f.id,
+        energy: f.energy(),
+        mutrans: f.muTrans(),
+        mufluor: f.muFluor(),
+        murefer: f.muRefer(),
+      };
+    });
   }
 
-  return <XASChart xasData={xasdata}></XASChart>;
+  return (
+    <XASChart xasData={xasdata} comparisonFiles={comparisonFiles}></XASChart>
+  );
 }
 
 export default XDIChart;