Dealing with Nexus files

h2020charisma · Sep 2, 2024 · 1eadb22 · 1eadb22
1 parent a8fcbbc
commit 1eadb22
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 33 deletions.
diff --git a/components/Chart/Chart.jsx b/components/Chart/Chart.jsx
@@ -4,15 +4,14 @@ import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import useSWR from "swr";
 
-export default function Chart({ imageSelected, setDomain }) {
+export default function Chart({ imageSelected, setDomain, isNexusFile }) {
   const fetcher = (url) => fetch(url).then((res) => res.json());
 
   const containerRef = useRef();
   const navigate = useNavigate();
 
-  const datasetQuery = `${
-    import.meta.env.VITE_BaseURL
-  }dataset?domain=${imageSelected}&values=True`;
+  const datasetQuery = !isNexusFile ? `${import.meta.env.VITE_BaseURL
+    }dataset?domain=${imageSelected}&values=True` : '';
 
   const { data } = useSWR(imageSelected && datasetQuery, fetcher, {
     revalidateIfStale: false,
@@ -39,11 +38,15 @@ export default function Chart({ imageSelected, setDomain }) {
   const [valuesY, setValuesY] = useState([]);
 
   useEffect(() => {
+    if (isNexusFile) return;
+
     data && imageSelected && setDataset(data?.datasets[0].key);
   }, [data, imageSelected]);
 
   useEffect(() => {
-    data &&
+    if (isNexusFile) return;
+
+    data && !isNexusFile &&
       data?.datasets.map((k) => {
         if (dataset === k.key) {
           setValuesX([...k.value[0]]);
@@ -54,6 +57,7 @@ export default function Chart({ imageSelected, setDomain }) {
 
   useEffect(() => {
     if (data === undefined) return;
+    if (isNexusFile) return;
 
     const plot = Plot.plot({
       // caption: dataset,
@@ -86,7 +90,7 @@ export default function Chart({ imageSelected, setDomain }) {
     <div className="chartWrap">
       <div className="domainInfo">
         <div>
-          <span className="fileName">Domain</span>
+          {!isNexusFile && <span className="fileName">Domain</span>}
           <span className="metadataInfoValue">{data && data.domain}</span>
         </div>
         <div>
@@ -104,14 +108,17 @@ export default function Chart({ imageSelected, setDomain }) {
             style={{ marginLeft: "16px" }}
             onClick={() => {
               navigate(`?h5web=${imageSelected}`);
-              setDomain(data.domain);
+              if(!isNexusFile) {
+                setDomain(data.domain);
+              }
             }}
           >
             Explore in h5web
           </button>
         </div>
       </div>
-      {data &&
+      {/* this section not displayed */}
+      {data && !isNexusFile &&
         data.annotation.map((ann, k) => (
           <div key={k} className="metadataSection">
             {/* <h3 className="metadataTitle">Metadata</h3> */}
@@ -174,7 +181,7 @@ export default function Chart({ imageSelected, setDomain }) {
         ))}
       <div className="datasetsTabs">
         {/* {imageSelected && <span className="fileName">Datasets</span>} */}
-        {data &&
+        {data && !isNexusFile &&
           data?.datasets.map((k, i) => (
             <p
               className={`${dataset == k.key ? "datasetActive" : "dataset"}`}
@@ -187,10 +194,14 @@ export default function Chart({ imageSelected, setDomain }) {
             </p>
           ))}
       </div>
-      <div className="chart" ref={containerRef} />
-      <div className="shiftLabel">
-        Raman shift (cm<sup>&ndash;1</sup>)
-      </div>
+      {!isNexusFile && (
+        <>
+          <div className="chart" ref={containerRef} />
+          <div className="shiftLabel">
+            Raman shift (cm<sup>&ndash;1</sup>)
+          </div>
+        </>
+      )}
     </div>
   );
 }
diff --git a/components/ImageSelect/ImageSelect.jsx b/components/ImageSelect/ImageSelect.jsx
@@ -1,6 +1,9 @@
 /* eslint-disable react/prop-types */
 import { Navigate } from "react-router-dom";
 export default function ImageSelect({ data, imageSelected, setImageSelected }) {
+
+
+
   const renderImageSelect =
     data &&
     data.map((img, i) => (

diff --git a/components/SearchComp/SearchComp.jsx b/components/SearchComp/SearchComp.jsx
@@ -25,6 +25,8 @@ export default function SearchComp({ setDomain }) {
     domainParams ? domainParams : ""
   );
 
+  let isNexusFile = imageSelected.includes(".nxs");
+
   let [reference, setReference] = useState("*");
   let [provider, setProvider] = useState("*");
   let [pages, setPages] = useState("0");
@@ -38,15 +40,12 @@ export default function SearchComp({ setDomain }) {
 
   const [file, setFile] = useState(null);
 
-  const searchQuery = `${
-    import.meta.env.VITE_BaseURL
-  }query?q=${qQuery}&img=thumbnail&query_type=text&q_reference=${reference}&q_provider=${provider}&q_instrument=${instrument}&q_wavelength=${wavelengths}&page=${pages}&pagesize=${pagesize}`;
+  const searchQuery = `${import.meta.env.VITE_BaseURL
+    }query?q=${qQuery}&img=thumbnail&query_type=text&q_reference=${reference}&q_provider=${provider}&q_instrument=${instrument}&q_wavelength=${wavelengths}&page=${pages}&pagesize=${pagesize}`;
 
-  const fileSearchQuery = `${
-    import.meta.env.VITE_BaseURL
-  }query?q=${qQuery}&img=thumbnail&query_type=${type}&q_reference=${reference}&q_provider=${provider}&q_instrument=${instrument}&q_wavelength=${wavelengths}&page=${pages}&pagesize=${pagesize}&ann=${
-    imageData?.cdf
-  }`;
+  const fileSearchQuery = `${import.meta.env.VITE_BaseURL
+    }query?q=${qQuery}&img=thumbnail&query_type=${type}&q_reference=${reference}&q_provider=${provider}&q_instrument=${instrument}&q_wavelength=${wavelengths}&page=${pages}&pagesize=${pagesize}&ann=${imageData?.cdf
+    }`;
 
   const { data } = useSWR(
     (imageData && fileSearchQuery) || (!imageData && searchQuery),
@@ -139,18 +138,19 @@ export default function SearchComp({ setDomain }) {
           </ErrorBoundary>
         </Expander>
         {imageSelected ? (
-          <ErrorBoundary
-            fallback={
-              <div className="errorMessage">
-                <p>Sorry, something went wrong</p>
-                <button onClick={() => setImageSelected(null)}>
-                  Please Try Again
-                </button>
-              </div>
-            }
-          >
-            <Chart imageSelected={imageSelected} setDomain={setDomain} />
-          </ErrorBoundary>
+          // <ErrorBoundary
+          //   fallback={
+          //     <div className="errorMessage">
+          //       <p>Sorry, something went wrong</p>
+          //       <button onClick={() => setImageSelected(null)}>
+          //         Please Try Again
+          //       </button>
+          //     </div>
+          //   }
+          // >
+          <Chart imageSelected={imageSelected} setDomain={setDomain}
+            isNexusFile={isNexusFile} />
+          // </ErrorBoundary>
         ) : (
           <div className="errorMessage">
             <p>No image selected</p>