Connected h5web to Domain

components/Chart/Chart.jsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import useSWR from "swr";
 
-export default function Chart({ imageSelected }) {
+export default function Chart({ imageSelected, setDomain }) {
   const fetcher = (url) => fetch(url).then((res) => res.json());
 
   const containerRef = useRef();
@@ -58,7 +58,8 @@ export default function Chart({ imageSelected }) {
     const plot = Plot.plot({
       // caption: dataset,
       grid: true,
-      color: { scheme: "burd" },
+      color: "#454545",
+      stroke: "#454545",
       marks: [
         Plot.axisY({
           label: "Raw Counts",
@@ -101,7 +102,10 @@ export default function Chart({ imageSelected }) {
           <button
             className="shareBtn"
             style={{ marginLeft: "16px" }}
-            onClick={() => navigate(`?h5web=${imageSelected}`)}
+            onClick={() => {
+              navigate(`?h5web=${imageSelected}`);
+              setDomain(data.domain);
+            }}
           >
             Explore in h5web
           </button>

components/SearchComp/SearchComp.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { AnimatePresence, motion } from "framer-motion";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
@@ -14,7 +15,7 @@ import "../../src/App.css";
 import Sidebar from "../Sidebar/Sidebar";
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
-export default function SearchComp() {
+export default function SearchComp({ setDomain }) {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const domainParams = queryParams.get("domain");
@@ -23,6 +24,7 @@ export default function SearchComp() {
   let [imageSelected, setImageSelected] = useState(
     domainParams ? domainParams : ""
   );
+
   let [reference, setReference] = useState("*");
   let [provider, setProvider] = useState("*");
   let [pages, setPages] = useState("0");
@@ -147,7 +149,7 @@ export default function SearchComp() {
               </div>
             }
           >
-            <Chart imageSelected={imageSelected} />
+            <Chart imageSelected={imageSelected} setDomain={setDomain} />
           </ErrorBoundary>
         ) : (
           <div className="errorMessage">

components/UI/Expander.jsx

@@ -25,6 +25,7 @@ export default function Expander({ children, title, status }) {
         margin: "0 0 0.5rem 0",
         overflow: "hidden",
         backgroundColor: "#f8fcff",
+        color: "#454545",
       }}
     >
       <div

components/h5web/h5web.jsx

@@ -2,15 +2,17 @@ import "@h5web/app/dist/styles.css";
 
 import { App, HsdsProvider } from "@h5web/app";
 
-export default function H5web() {
+// eslint-disable-next-line react/prop-types
+export default function H5web({ domain }) {
+  console.log("h5web", domain);
   return (
     <div>
       <div style={{ height: "90vh" }}>
         <HsdsProvider
-          url="https://hsds.adma.ai"
+          url="https://hsds-kc.ideaconsult.net"
           username="system-public-user"
           password="system-public-user"
-          filepath="/TEST/129aac84-3015-4333-af39-9efa544d54f6.nxs"
+          filepath={`${domain}`}
         >
           <App />
         </HsdsProvider>

src/App.css

@@ -1,5 +1,6 @@
 #root {
   width: 100%;
+  background-color: #fff;
 }
 
 h1 {
@@ -230,6 +231,7 @@ h1 {
 }
 .chartWrap {
   margin: 0 0 4rem 0;
+  color: #454545;
 }
 .domainInfo {
   display: flex;
@@ -272,6 +274,7 @@ h1 {
   font-size: 14px;
   font-weight: 500;
   margin-left: 0.2rem;
+  color: #454545;
 }
 
 .annotationInfo {
@@ -298,6 +301,7 @@ h1 {
   font-weight: 500;
   margin: 0.3rem 0;
   display: inline-block;
+  color: #454545;
 }
 
 .footer {

src/App.jsx

@@ -1,5 +1,5 @@
 import "./App.css";
-
+import { useState } from "react";
 import { useLocation } from "react-router-dom";
 
 import SearchComp from "../components/SearchComp/SearchComp";
@@ -14,16 +14,18 @@ function App() {
   const queryParams = new URLSearchParams(location.search);
   const h5webParams = queryParams.get("h5web");
 
+  let [domain, setDomain] = useState(null);
+
   return (
     <>
       <Header />
       <UnderDevelopent />
       <div>
         {h5webParams ? (
-          <H5web />
+          <H5web domain={domain} />
         ) : (
           <div>
-            <SearchComp />
+            <SearchComp setDomain={setDomain} />
             <Footer />
           </div>
         )}