Improve information displayed on the table

package.json

@@ -22,7 +22,8 @@
     "react-scripts": "^5.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "web-vitals": "^2.1.4",
-    "zarr": "^0.6.3"
+    "zarr": "^0.6.3",
+    "zarrita": "^0.4.0-next.10"
   },
   "eslintConfig": {
     "extends": [

src/components/App.js

@@ -1,20 +1,25 @@
 import React, { useState, useEffect} from "react";
 import { HTTPStore } from "zarr";
+import { FetchStore, open, get} from "zarrita";
 
 import CodeSnippet from "./CodeSnippet";
 import RowPlotContainer from "./RowPlotContainer";
 import "../styles/App.css";
+//const url = "http://localhost:8000/zarr_store.zarr";
+const url = "https://spikeinterface-template-database.s3.us-east-2.amazonaws.com/test_templates";
+
+
 
 function App() {
-  const url = "https://spikeinterface-template-database.s3.us-east-2.amazonaws.com/test_templates";
-  //const url = "http://localhost:8000/zarr_store.zarr";
   const storeRef = new HTTPStore(url);
+
   const [selectedTemplates, setSelectedTemplates] = useState(new Set()); // Updated to useState
   const [templateIndices, setTemplateIndices] = useState([]);
   const [hasMore, setHasMore] = useState(true);
-  const batchSize = 15;
+  const batchSize = 10;
+  const [dataDictionary, setDataDictionary] = useState({});
 
-  const loadTemplates = () => {
+  const loadTempalteIndices = () => {
     const nextIndex = templateIndices.length === 0 ? 0 : Math.max(...templateIndices) + 1;
     const newIndices = Array.from({ length: batchSize }, (_, i) => i + nextIndex);
 
@@ -24,6 +29,47 @@ function App() {
     }
   };
 
+
+  async function loadSessionData() {
+
+    const store = new FetchStore(url);
+    const root = await open(store, { kind: "group" });
+
+    const brainAreaZarrArray = await open(root.resolve("brain_area"), { kind: "array" });
+    const brainAreaArrayData = await get(brainAreaZarrArray, null);
+    const brainAreaArrayJS = Array.from(brainAreaArrayData.data);
+
+    const unitIdsZarrArray = await open(root.resolve("unit_ids"), { kind: "array" });
+    const unitIdsArrayData = await get(unitIdsZarrArray, null);
+    const unitIdsArrayJS = Array.from(unitIdsArrayData.data);
+    const unitIDsArrayJSString = unitIdsArrayJS.map(String)
+
+
+    const ChannelIDsZarrArray = await open(root.resolve("channel_ids"), { kind: "array" });
+    const ChannelIDsArrayData = await get(ChannelIDsZarrArray, null);
+    const ChannelIDsArrayJS = Array.from(ChannelIDsArrayData.data);
+    const ChannelIDsArrayJSString = ChannelIDsArrayJS.map(String)
+
+    const SpikesPerUnitZarrArray = await open(root.resolve("spikes_per_unit"), { kind: "array" });
+    const SpikesPerUnitArrayData = await get(SpikesPerUnitZarrArray, null);
+    const SpikesPerUnitArrayJS = Array.from(SpikesPerUnitArrayData.data);
+
+
+    const BestChannelsZarrArray = await open(root.resolve("channel_ids"), { kind: "array" });
+    const BestChannelsArrayData = await get(BestChannelsZarrArray, null);
+    const BestChannelsArrayJS = Array.from(BestChannelsArrayData.data);
+
+    let dataDictionary_ = {}; 
+    dataDictionary_["brain_area"] = brainAreaArrayJS;
+    dataDictionary_["unit_ids"] = unitIDsArrayJSString;
+    dataDictionary_["spikes_per_unit"] = SpikesPerUnitArrayJS
+    dataDictionary_["channel_ids"] = ChannelIDsArrayJSString
+    dataDictionary_["best_channels"] = BestChannelsArrayJS
+
+
+    setDataDictionary(dataDictionary_);
+  }
+
   const toggleTemplateSelection = (templateIndex) => {
     const newSet = new Set(selectedTemplates);
     if (newSet.has(templateIndex)) {
@@ -32,11 +78,11 @@ function App() {
       newSet.add(templateIndex);
     }
     setSelectedTemplates(newSet); // Trigger re-render
-    console.log("Selected Templates: ", Array.from(newSet));
   };
 
   useEffect(() => {
-    loadTemplates();
+    loadTempalteIndices();
+    loadSessionData();
   }, []);
 
   return (
@@ -49,14 +95,15 @@ function App() {
           <RowPlotContainer
             key={templateIndex}
             templateIndex={templateIndex}
+            dataDictionary={dataDictionary}
             storeRef={storeRef}
             isSelected={selectedTemplates.has(templateIndex)}
             toggleSelection={() => toggleTemplateSelection(templateIndex)}
           />
         ))}
       </div>
       {hasMore && (
-        <button onClick={loadTemplates} className="load-more-button">
+        <button onClick={loadTempalteIndices} className="load-more-button">
           Load More Templates
         </button>
       )}

src/components/RowPlotContainer.js

@@ -9,7 +9,7 @@ import calculatePeakToPeakValues from "../utils/CalculationUtils";
 import { percentageToFilterChannels } from "../styles/StyleConstants";
 
 
-const RowPlotContainer = ({ templateIndex, storeRef, isSelected, toggleSelection }) => {
+const RowPlotContainer = ({ templateIndex, storeRef, dataDictionary, isSelected, toggleSelection }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [probeXCoordinates, setProbeXCoordinates] = useState([]);
   const [probeYCoordinates, setProbeYCoordinates] = useState([]);
@@ -22,6 +22,7 @@ const RowPlotContainer = ({ templateIndex, storeRef, isSelected, toggleSelection
   useEffect(() => {
     const loadData = async () => {
       try {
+
         const zarrGroup = await openGroup(storeRef);
         const probeGroup = await openGroup(storeRef, "probe", "r");
 
@@ -39,6 +40,7 @@ const RowPlotContainer = ({ templateIndex, storeRef, isSelected, toggleSelection
         const templateArray = await zarrGroup.getItem("templates_array");
         setTemplateArray(templateArray);
         const singleTemplate = await templateArray.get([templateIndex, null, null]);
+
         const peakToPeakValues = calculatePeakToPeakValues(singleTemplate);
         const bestChannel = peakToPeakValues.indexOf(Math.max(...peakToPeakValues));
 
@@ -48,23 +50,33 @@ const RowPlotContainer = ({ templateIndex, storeRef, isSelected, toggleSelection
           .filter((index) => index !== null);
         setActiveIndices(_activeIndices);
 
-        // Set table data (mockup or real)
-        const data = [
-          { attribute: "Number of Samples", value: "855" },
-          { attribute: "Dataset", value: "IBL" },
-          { attribute: "Brain Location", value: "Hippocampus" },
-          { attribute: "Channel with max amplitude", value: bestChannel },
-          { attribute: "Amplitude", value: peakToPeakValues[bestChannel] },
-          { attribute: "Sampling Frequency", value: samplingFrequency },
-          { attribute: "Location", value: location },
-        ];
-        setTableData(data);
-
         // Set location based on best channel
         const locationX = xCoords.data[bestChannel];
         const locationY = yCoords.data[bestChannel];
         setLocation([locationX, locationY]);
 
+        // Set table data (mockup or real)
+        const brainArea = dataDictionary["brain_area"][templateIndex];
+        const NumberOfSpikes = dataDictionary["spikes_per_unit"][templateIndex]
+        const bestChannelID = dataDictionary["channel_ids"][bestChannel]
+        const UnitID = dataDictionary["unit_ids"][templateIndex]
+
+        const peakToPeakBestChannel = peakToPeakValues[bestChannel]
+        const peakToPeakBestChannelDecimalsRounded = peakToPeakBestChannel.toFixed(2)
+
+        const data = [
+          // { attribute: "Template Index", value: templateIndex},
+          // { attribute: "Channel with max amplitude", value: bestChannel },
+          { attribute: "UnitID", value: UnitID },
+          { attribute: "Number of Spikes", value: NumberOfSpikes },
+          { attribute: "Best ChannelID", value: bestChannelID},
+          { attribute: "Brain Location", value: brainArea},
+          { attribute: "Peak To Peak (mV)", value: peakToPeakBestChannelDecimalsRounded},
+          { attribute: "Depth (um)", value: location[1]},
+
+        ];
+        setTableData(data);
+
         setIsLoading(false);
       } catch (error) {
         console.error("Error loading data for template index " + templateIndex + ":", error);