Deploying to gh-pages from @ c23264b 🚀

SpikeInterface · Apr 25, 2024 · be19681 · be19681
1 parent 09b53cf
commit be19681
Show file tree

Hide file tree

Showing 15 changed files with 349 additions and 0 deletions.
diff --git a/asset-manifest.json b/asset-manifest.json
@@ -0,0 +1,15 @@
+{
+  "files": {
+    "main.css": "/static/css/main.64a8db64.css",
+    "main.js": "/static/js/main.e51fcf55.js",
+    "static/js/453.97f7d3b1.chunk.js": "/static/js/453.97f7d3b1.chunk.js",
+    "index.html": "/index.html",
+    "main.64a8db64.css.map": "/static/css/main.64a8db64.css.map",
+    "main.e51fcf55.js.map": "/static/js/main.e51fcf55.js.map",
+    "453.97f7d3b1.chunk.js.map": "/static/js/453.97f7d3b1.chunk.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.64a8db64.css",
+    "static/js/main.e51fcf55.js"
+  ]
+}
diff --git a/basic.html b/basic.html
@@ -0,0 +1,184 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Interactive Template Visualization</title>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <style>
+      #loader {
+        text-align: center;
+        padding: 20px;
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="plots-container"></div>
+    <div id="loader">Loading...</div>
+
+    <script type="module">
+      import * as zarr from "https://cdn.skypack.dev/[email protected]";
+
+      let unit_index = 0; // Keep track of the current template index
+      let isLoading = false; // Flag to prevent multiple simultaneous loads
+      const templatesToLoad = 5; // Number of templates to load per batch
+      let selectedUnitIndices = []; // Initialize outside of loadData function
+
+      async function loadData() {
+        if (isLoading) return;
+        isLoading = true;
+        document.getElementById("loader").style.display = "block";
+
+        const s3Url = "https://spikeinterface-template-database.s3.us-east-2.amazonaws.com/test_templates";
+        const fetchOptions = { redirect: "follow" };
+        const store = new zarr.HTTPStore(s3Url, fetchOptions);
+
+        try {
+          const zarr_group = await zarr.openGroup(store);
+          const probe_group = await zarr.openGroup(store, "probe", "r");
+          const template_array = await zarr_group.getItem("templates_array");
+          const attributes = await zarr_group.attrs.asObject();
+          const samplingFrequency = attributes["sampling_frequency"];
+
+          for (let i = 0; i < templatesToLoad; i++, unit_index++) {
+            const single_template = await template_array.get([unit_index, null, null]);
+            const bestChannel = calculateBestChannel(single_template);
+            // get x and y
+            const x = await probe_group.getItem("x");
+            const y = await probe_group.getItem("y");
+            const xData = await x.get(null);
+            const yData = await y.get(null);
+
+            const single_template_best_channel = await single_template.get([null, bestChannel]);
+            renderPlot(single_template_best_channel, unit_index, bestChannel, xData, yData);
+          }
+        } catch (error) {
+          console.error("Error loading data:", error);
+        } finally {
+          isLoading = false;
+          document.getElementById("loader").style.display = "none";
+        }
+      }
+
+      function calculateBestChannel(single_template) {
+        // Placeholder for your logic to calculate the best channel
+        // This function needs to be implemented based on your existing logic
+        const numberOfChannels = single_template.shape[1];
+        const peak_to_peak_values = new Array(numberOfChannels).fill(0).map((_, channelIndex) => {
+          let channelMax = -Infinity;
+          let channelMin = Infinity;
+          single_template.data.forEach((sample) => {
+            const value = sample[channelIndex];
+            if (value > channelMax) channelMax = value;
+            if (value < channelMin) channelMin = value;
+          });
+          return channelMax - channelMin;
+        });
+        return peak_to_peak_values.indexOf(Math.max(...peak_to_peak_values));
+      }
+
+      function renderPlot(single_template_best_channel, templateIndex, bestChannel, xData, yData) {
+        const plotDiv = document.createElement("div");
+        const plotId = `plot-${templateIndex}`;
+        plotDiv.id = plotId;
+        document.getElementById("plots-container").appendChild(plotDiv);
+
+        // Get the location for the best channel
+        const locationX = xData.data[bestChannel];
+        const locationY = yData.data[bestChannel];
+
+        const figure = {
+          data: [
+            {
+              x: Array.from({ length: single_template_best_channel.shape[0] }, (_, i) => i),
+              y: single_template_best_channel.data,
+              type: "scatter",
+              xaxis: "x1",
+              yaxis: "y1",
+              name: "Template Data", // Optional, but useful for clarity
+              showlegend: false, // Optionally remove legend for individual traces
+            },
+            {
+              x: xData.data,
+              y: yData.data,
+              mode: "markers",
+              type: "scatter",
+              marker: { color: "orange" },
+              xaxis: "x2",
+              yaxis: "y2",
+              name: "XY Data", // Optional
+              showlegend: false,
+            },
+            {
+              x: [locationX],
+              y: [locationY],
+              mode: "markers",
+              type: "scatter",
+              marker: { color: "red", size: 25 },
+              xaxis: "x2",
+              yaxis: "y2",
+              name: "Best Channel", // Optional
+              showlegend: false,
+            },
+          ],
+          layout: {
+            title: `Template for unit index: ${unit_index} - on channel with index: ${bestChannel} - at location: (${locationX}, ${locationY})`,
+            grid: { rows: 1, columns: 2, pattern: "independent" },
+            xaxis1: { title: "Time (samples)" },
+            yaxis1: { title: "Amplitude (uV)" },
+            xaxis2: {
+              title: "X Location",
+              range: [Math.min(...xData.data) - 5, Math.max(...xData.data) + 5],
+            },
+            yaxis2: {
+              title: "Y Location",
+              anchor: "x2",
+              scale: 1.0,
+            },
+            annotations: [
+              {
+                x: locationX,
+                y: locationY,
+                xref: "x2",
+                yref: "y2",
+                text: "Unit Location",
+                showarrow: true,
+                arrowhead: 2,
+                ax: 30,
+                ay: 30,
+              },
+            ],
+            showlegend: false, // This will apply globally to all traces
+          },
+        };
+
+        Plotly.newPlot(plotId, figure.data, figure.layout);
+        // Create and append the checkbox for selecting the unit
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.id = `checkbox-${templateIndex}`;
+        checkbox.className = "plot-selection-checkbox";
+        checkbox.onchange = function () {
+          if (this.checked) {
+            selectedUnitIndices.push(templateIndex);
+          } else {
+            const index = selectedUnitIndices.indexOf(templateIndex);
+            if (index > -1) {
+              selectedUnitIndices.splice(index, 1);
+            }
+          }
+          console.log("Selected templates:", selectedUnitIndices);
+        };
+        plotDiv.appendChild(checkbox);
+      }
+
+      window.onscroll = function () {
+        if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
+          loadData();
+        }
+      };
+
+      loadData(); // Initial load
+    </script>
+  </body>
+</html>
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"><title>Visualization of Templates Data Base</title><script defer="defer" src="/static/js/main.e51fcf55.js"></script><link href="/static/css/main.64a8db64.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
diff --git a/logo192.png b/logo192.png
diff --git a/logo512.png b/logo512.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/robots.txt b/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/static/css/main.64a8db64.css b/static/css/main.64a8db64.css
diff --git a/static/css/main.64a8db64.css.map b/static/css/main.64a8db64.css.map
diff --git a/static/js/453.97f7d3b1.chunk.js b/static/js/453.97f7d3b1.chunk.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"><title>Visualization of Templates Data Base</title><script defer="defer" src="/static/js/main.e51fcf55.js"></script><link href="/static/css/main.64a8db64.css" rel="stylesheet"></head><body><div id="root"></div></body></html>