Query Type params for file search

h2020charisma · Jul 11, 2024 · 118a4fc · 118a4fc
1 parent 01f8b15
commit 118a4fc
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 10 deletions.
diff --git a/components/DataProvider/DataProvider.jsx b/components/DataProvider/DataProvider.jsx
@@ -1,5 +1,6 @@
 import useSWR from "swr";
 import Select from "../UI/Select";
+import SearchSelect from "../UI/SearchSelect";
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
@@ -17,7 +18,13 @@ export default function DataProvider({ provider, setProvider }) {
 
   return (
     <div>
-      <Select items={data} value={provider} setValue={setProvider} />
+      {/* <Select items={data} value={provider} setValue={setProvider} /> */}
+      <SearchSelect
+        data={data}
+        setqQuery={setProvider}
+        qQuery={provider}
+        label="Providers"
+      />
     </div>
   );
 }
diff --git a/components/Instrument/Instrument.jsx b/components/Instrument/Instrument.jsx
@@ -1,5 +1,6 @@
 import useSWR from "swr";
 import Select from "../UI/Select";
+import SearchSelect from "../UI/SearchSelect";
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
@@ -17,7 +18,12 @@ export default function Instrument({ instrument, setInstrument }) {
 
   return (
     <div>
-      <Select items={data} value={instrument} setValue={setInstrument} />
+      <SearchSelect
+        data={data}
+        setqQuery={setInstrument}
+        qQuery={instrument}
+        label="Instruments"
+      />
     </div>
   );
 }
diff --git a/components/Investigations/Investigations.jsx b/components/Investigations/Investigations.jsx
@@ -1,5 +1,6 @@
 import useSWR from "swr";
 import Select from "../UI/Select";
+import SearchSelect from "../UI/SearchSelect";
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
@@ -17,7 +18,12 @@ export default function Investigations({ reference, setReference }) {
 
   return (
     <div>
-      <Select items={data} value={reference} setValue={setReference} />
+      <SearchSelect
+        data={data}
+        setqQuery={setReference}
+        qQuery={reference}
+        label="Investigations"
+      />
     </div>
   );
 }
diff --git a/components/Sidebar/Sidebar.jsx b/components/Sidebar/Sidebar.jsx
@@ -27,6 +27,8 @@ export default function Sidebar({
   imageData,
   wavelengths,
   setWavelengths,
+  type,
+  setType,
 }) {
   return (
     <div
@@ -39,7 +41,12 @@ export default function Sidebar({
       }}
     >
       <Expander title="Search by  Spectrum File" status={false}>
-        <UploadFile setImageData={setImageData} imageData={imageData} />
+        <UploadFile
+          setImageData={setImageData}
+          imageData={imageData}
+          type={type}
+          setType={setType}
+        />
       </Expander>
       <Expander title="Search by Sample" status={false}>
         <Sample setqQuery={setqQuery} qQuery={qQuery} />

diff --git a/components/UI/SearchSelect.jsx b/components/UI/SearchSelect.jsx
@@ -43,7 +43,13 @@ export default function SearchSelect({ data, setqQuery, qQuery, label }) {
 
       {open && (
         <div className="selectOptions" style={{ scrollbarWidth: "thin" }}>
-          <p className="selectItem" onClick={() => setqQuery("*")}>
+          <p
+            className="selectItem"
+            onClick={() => {
+              setqQuery("*");
+              setSearch("");
+            }}
+          >
             {`All ${label}`}
           </p>
           <hr />
@@ -57,7 +63,7 @@ export default function SearchSelect({ data, setqQuery, qQuery, label }) {
                 onClick={() => {
                   setqQuery(item.value);
                   setOpen(false);
-                  setSearch("");
+                  setSearch(item.value);
                 }}
               >
                 {item.value}

diff --git a/components/UploadFile/UploadFile.jsx b/components/UploadFile/UploadFile.jsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import Close from "../Icons/Close";
 
 // eslint-disable-next-line react/prop-types
-export default function UploadFile({ imageData, setImageData }) {
+export default function UploadFile({ imageData, setImageData, type, setType }) {
   const [file, setFile] = useState(null);
 
   const fileQuery = `${import.meta.env.VITE_BaseURL}download?what=knnquery`;
@@ -60,6 +60,45 @@ export default function UploadFile({ imageData, setImageData }) {
           Search
         </button>
       </div>
+      <div className="searchOptions">
+        <label
+          onClick={() => setType("text")}
+          htmlFor="tx"
+          style={{
+            fontSize: "16px",
+            display: "flex",
+            alignItems: "center",
+            cursor: "pointer",
+          }}
+        >
+          <input
+            id="tx"
+            type="radio"
+            name="searchType"
+            style={{ width: "16px", height: "16px", marginRight: "12px" }}
+          />
+          Text search
+        </label>
+
+        <label
+          onClick={() => setType("spectrum")}
+          htmlFor="sp"
+          style={{
+            fontSize: "16px",
+            display: "flex",
+            alignItems: "center",
+            cursor: "pointer",
+          }}
+        >
+          <input
+            id="sp"
+            type="radio"
+            name="searchType"
+            style={{ width: "16px", height: "16px", marginRight: "12px" }}
+          />
+          Spectrum search
+        </label>
+      </div>
     </form>
   );
 }
diff --git a/components/Wavelengths/Wavelengths.jsx b/components/Wavelengths/Wavelengths.jsx
@@ -1,5 +1,6 @@
 import useSWR from "swr";
 import Select from "../UI/Select";
+import SearchSelect from "../UI/SearchSelect";
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
@@ -17,7 +18,12 @@ export default function Wavelengths({ wavelengths, setWavelengths }) {
 
   return (
     <div>
-      <Select items={data} value={wavelengths} setValue={setWavelengths} />
+      <SearchSelect
+        data={data}
+        setqQuery={setWavelengths}
+        qQuery={wavelengths}
+        label="Wavelengths"
+      />
     </div>
   );
 }
diff --git a/src/App.css b/src/App.css
@@ -173,6 +173,13 @@ h1 {
   margin: 0 0 1rem 0;
 }
 
+.searchOptions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 16px 0;
+}
+
 .datasetsTabs {
   margin-top: 1rem;
   display: flex;

diff --git a/src/App.jsx b/src/App.jsx
@@ -10,6 +10,11 @@ import "./App.css";
 import Sidebar from "../components/Sidebar/Sidebar";
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
+// query_type=knnquery
+// text or spectrum search
+// metadata - text
+// spectrum similarity - knnquery
+
 function App() {
   // let modalRef = useRef();
   let [open, setOpen] = useState(true);
@@ -23,12 +28,15 @@ function App() {
   let [wavelengths, setWavelengths] = useState("*");
 
   let [imageData, setImageData] = useState(null);
+  let [type, setType] = useState("text");
+
+  let query_type = type === "spectrum" ? "knnquery" : "text";
 
   const metadataQuery = `${
     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}&ann=${
+  }query?q=${qQuery}&img=thumbnail&query_type=${query_type}t&q_reference=${reference}&q_provider=${provider}&q_instrument=${instrument}&q_wavelength=${wavelengths}&page=${pages}&pagesize=${pagesize}&ann=${
     imageData?.cdf
-  }&query_type=knnquery`;
+  }`;
 
   const picturesQuery =
     "https://api.charisma.ideaconsult.net/download?what=thumbnail&domain=/SANDBOX/CSIC-ICV/BWTEK_iRaman/785/PST02_iRPlus785_Z020_020_1300ms.cha&extra=";
@@ -75,6 +83,8 @@ function App() {
               setInstrument={setInstrument}
               wavelengths={wavelengths}
               setWavelengths={setWavelengths}
+              type={type}
+              setType={setType}
             />
           </motion.div>
         )}