trying an alternative method for getting the auth token through to th…

…e datastore module
HumanBrainProject · Jul 29, 2024 · e8f541a · e8f541a
1 parent ea86897
commit e8f541a
Show file tree

Hide file tree

Showing 10 changed files with 192 additions and 189 deletions.
diff --git a/apps/nar-v3/src/auth.js b/apps/nar-v3/src/auth.js
@@ -2,7 +2,7 @@ import Keycloak from "keycloak-js";
 
 // We start by configuring the Keycloak javascript client
 // It needs to know your app id in order to authenticate users for it
-const keycloak = Keycloak({
+const keycloak = new Keycloak({
   url: "https://iam.ebrains.eu/auth",
   realm: "hbp",
   clientId: "neural-activity-resource",
@@ -53,7 +53,6 @@ function checkAuth(main) {
     }
     if (isAuthenticated) {
       console.log("...which is authenticated, starting business logic...");
-      sessionStorage.setItem("token", keycloak.token);
       return main(keycloak);
     }
   }

diff --git a/apps/nar-v3/src/components/Navigation.jsx b/apps/nar-v3/src/components/Navigation.jsx
@@ -4,12 +4,12 @@ import { Link as RouterLink, useLocation } from "react-router-dom";
 function getBreadcrumb(item) {
   if (item.path) {
     return (
-      <LinkRouter underline="hover" color="inherit" to={item.path}>
+      <LinkRouter underline="hover" color="inherit" key={item.name} to={item.path}>
         {item.name}
       </LinkRouter>
     );
   } else {
-    return <Typography>{item.name}</Typography>;
+    return <Typography key={item.name}>{item.name}</Typography>;
   }
 }
 

diff --git a/apps/nar-v3/src/datastore.js b/apps/nar-v3/src/datastore.js
@@ -5,132 +5,115 @@ function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
 
-// function isAlmostEmpty(obj) {
-//   return Object.keys(obj).length <= 1;
-// }
+let cache = {
+  "datasets summary": {},
+  "datasets detail": {},
+  "datasets techniques": {},
+  "patch clamp recordings summary": {},
+  "patch clamp recordings detail": {},
+};
+//cache["datasets detail"][uuidFromUri(examplePatchClampData["@id"])] = examplePatchClampData;
+//cache["datasets detail"]["example"] = examplePatchClampData;
 
-// function byDate(obj1, obj2) {
-//   // most recent first
-//   if (obj1.stages[0].start_time < obj2.stages[0].start_time) {
-//     return 1;
-//   }
-//   if (obj1.stages[0].start_time > obj2.stages[0].start_time) {
-//     return -1;
-//   }
-//   return 0;
-// }
-
-class DataStore {
-  constructor(baseUrl) {
-    this.baseUrl = baseUrl;
-    this.cache = {
-      "datasets summary": {},
-      "datasets detail": {},
-      "datasets techniques": {},
-      "patch clamp recordings summary": {},
-      "patch clamp recordings detail": {},
+function buildRequestConfig(auth, method = "GET", body = {}) {
+  if (auth.token) {
+    let config = {
+      headers: {
+        Authorization: "Bearer " + auth.token,
+        "Content-Type": "application/json",
+      },
+      method: method,
     };
-    //this.cache["datasets detail"][uuidFromUri(examplePatchClampData["@id"])] = examplePatchClampData;
-    //this.cache["datasets detail"]["example"] = examplePatchClampData;
-  }
-
-  buildRequestConfig(method = "GET", body = {}) {
-    let token = sessionStorage.getItem("token");
-    if (token) {
-      let config = {
-        headers: {
-          Authorization: "Bearer " + token,
-          "Content-Type": "application/json",
-        },
-        method: method,
-      };
-      if (body) {
-        config.body = body;
-      }
-      return config;
-    } else {
-      return null;
+    if (body) {
+      config.body = body;
     }
+    return config;
+  } else {
+    return null;
   }
+}
 
-  async queryKG(kgQuery, searchParams) {
-    const searchParamStr = new URLSearchParams(searchParams).toString();
-    let url = `${this.baseUrl}/queries?${searchParamStr}`;
-    const config = this.buildRequestConfig("POST", JSON.stringify(kgQuery));
-    if (config) {
-      const response = await fetch(url, config);
+async function queryKG(kgQuery, searchParams, auth) {
+  const searchParamStr = new URLSearchParams(searchParams).toString();
+  let url = `${kgUrl}/queries?${searchParamStr}`;
+  const config = buildRequestConfig(auth, "POST", JSON.stringify(kgQuery));
+  if (config) {
+    const response = await fetch(url, config);
+    if (response.ok) {
       const result = await response.json();
       return result;
     } else {
       return null;
     }
+  } else {
+    return null;
   }
+}
 
-  async getKGItem(cacheLabel, kgQuery, instanceId, stage = kgDefaultStage) {
-    console.log("getKGItem " + cacheLabel + instanceId);
-    if (!this.cache[cacheLabel][instanceId]) {
-      const searchParams = { stage: stage, instanceId: instanceId };
-      const result = await this.queryKG(kgQuery, searchParams);
-      if (result) {
-        const items = result.data;
-        this.cache[cacheLabel][instanceId] = items[0];
-      }
-    }
-    return this.cache[cacheLabel][instanceId];
-  }
-
-  async getKGData(
-    cacheLabel,
-    kgQuery,
-    searchFilters,
-    stage = kgDefaultStage,
-    size = 1000,
-    from = 0
-  ) {
-    console.log("getKGData " + cacheLabel);
-    if (isEmpty(this.cache[cacheLabel])) {
-      // if the cache is empty we need to fill it
-      console.log(this.baseUrl);
-      let searchParams = {
-        returnTotalResults: true,
-        stage: stage,
-        size: size,
-        from: from,
-      };
-      if (searchFilters) {
-        searchParams = { ...searchParams, searchFilters };
-      }
-      const result = await this.queryKG(kgQuery, searchParams);
-      if (result) {
-        const items = result.data;
-        for (const index in items) {
-          this.cache[cacheLabel][items[index].id] = items[index];
-        }
-      }
+async function getKGItem(cacheLabel, kgQuery, instanceId, auth, stage = kgDefaultStage) {
+  console.log("getKGItem " + cacheLabel + instanceId);
+  if (!cache[cacheLabel][instanceId]) {
+    const searchParams = { stage: stage, instanceId: instanceId };
+    const result = await queryKG(kgQuery, searchParams, auth);
+    if (result) {
+      const items = result.data;
+      cache[cacheLabel][instanceId] = items[0];
     }
-    const itemArray = Object.values(this.cache[cacheLabel]);
-    console.log(itemArray);
-    return itemArray;
   }
+  return cache[cacheLabel][instanceId];
+}
 
-  async count(kgQuery, searchFilters, stage = kgDefaultStage) {
+async function getKGData(
+  cacheLabel,
+  kgQuery,
+  auth,
+  searchFilters,
+  stage = kgDefaultStage,
+  size = 1000,
+  from = 0
+) {
+  console.log("getKGData " + cacheLabel);
+  if (isEmpty(cache[cacheLabel])) {
+    // if the cache is empty we need to fill it
+    console.log(kgUrl);
     let searchParams = {
       returnTotalResults: true,
       stage: stage,
-      size: 1,
-      from: 0,
+      size: size,
+      from: from,
     };
     if (searchFilters) {
       searchParams = { ...searchParams, searchFilters };
     }
-    const result = await this.queryKG(kgQuery, searchParams);
+    const result = await queryKG(kgQuery, searchParams, auth);
     if (result) {
-      return result.total;
-    } else {
-      return 0;
+      const items = result.data;
+      for (const index in items) {
+        cache[cacheLabel][items[index].id] = items[index];
+      }
     }
   }
+  const itemArray = Object.values(cache[cacheLabel]);
+  console.log(itemArray);
+  return itemArray;
+}
+
+async function count(kgQuery, auth, searchFilters, stage = kgDefaultStage) {
+  let searchParams = {
+    returnTotalResults: true,
+    stage: stage,
+    size: 1,
+    from: 0,
+  };
+  if (searchFilters) {
+    searchParams = { ...searchParams, searchFilters };
+  }
+  const result = await queryKG(kgQuery, searchParams, auth);
+  if (result) {
+    return result.total;
+  } else {
+    return 0;
+  }
 }
 
-const datastore = new DataStore(kgUrl);
-export { datastore };
+export { queryKG, getKGItem, getKGData, count };
diff --git a/apps/nar-v3/src/main.jsx b/apps/nar-v3/src/main.jsx
@@ -6,13 +6,13 @@ import { Avatar, CssBaseline, AppBar, Link, Toolbar, Typography, Container } fro
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { green } from "@mui/material/colors";
 
-import Home, { loader as statsLoader } from "./routes/home";
+import Home, { getLoader as statsLoader } from "./routes/home";
 import ErrorPage from "./error-page";
 import initAuth from "./auth";
-import Datasets, { loader as datasetsLoader } from "./routes/datasets";
-import Dataset, { loader as datasetLoader } from "./routes/dataset";
-import PatchClampIndex, { loader as patchClampIndexLoader } from "./routes/patchClampRecordings";
-import PatchClamp, { loader as patchClampLoader } from "./routes/patchClampRecording";
+import Datasets, { getLoader as datasetsLoader } from "./routes/datasets";
+import Dataset, { getLoader as datasetLoader } from "./routes/dataset";
+import PatchClampIndex, { getLoader as patchClampIndexLoader } from "./routes/patchClampRecordings";
+import PatchClamp, { getLoader as patchClampLoader } from "./routes/patchClampRecording";
 
 const theme = createTheme({
   typography: {
@@ -36,37 +36,38 @@ const theme = createTheme({
   },
 });
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <Home />,
-    errorElement: <ErrorPage />,
-    loader: statsLoader,
-  },
-  {
-    path: "datasets/",
-    element: <Datasets />,
-    loader: datasetsLoader,
-  },
-  {
-    path: "datasets/:datasetId",
-    element: <Dataset />,
-    loader: datasetLoader,
-  },
-  {
-    path: "patch-clamp/",
-    element: <PatchClampIndex />,
-    loader: patchClampIndexLoader,
-  },
-  {
-    path: "patch-clamp/:expId",
-    element: <PatchClamp />,
-    loader: patchClampLoader,
-  },
-]);
-
+function getRouter(auth) {
+  return createBrowserRouter([
+    {
+      path: "/",
+      element: <Home />,
+      errorElement: <ErrorPage />,
+      loader: statsLoader(auth),
+    },
+    {
+      path: "datasets/",
+      element: <Datasets />,
+      loader: datasetsLoader(auth),
+    },
+    {
+      path: "datasets/:datasetId",
+      element: <Dataset />,
+      loader: datasetLoader(auth),
+    },
+    {
+      path: "patch-clamp/",
+      element: <PatchClampIndex />,
+      loader: patchClampIndexLoader(auth),
+    },
+    {
+      path: "patch-clamp/:expId",
+      element: <PatchClamp />,
+      loader: patchClampLoader(auth),
+    },
+  ]);
+}
 
-function renderApp() {
+function renderApp(auth) {
   ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
       <ThemeProvider theme={theme}>
@@ -78,13 +79,15 @@ function renderApp() {
           <Toolbar>
             <Avatar sx={{ mr: 2 }} alt="EBRAINS" src="/favicon.png" />
             <Typography variant="h6" color="inherit" noWrap>
-              <Link underline="hover" color="inherit" to="/">EBRAINS: Neural Activity Resource (alpha)</Link>
+              <Link underline="hover" color="inherit" to="/">
+                EBRAINS: Neural Activity Resource (alpha)
+              </Link>
             </Typography>
           </Toolbar>
         </AppBar>
         <main>
           <Container maxWidth="xl">
-            <RouterProvider router={router} />
+            <RouterProvider router={getRouter(auth)} />
           </Container>
         </main>
       </ThemeProvider>