⚡️ perf: maybe

SPARC-FAIR-Codeathon · Aug 12, 2024 · 1dacaa1 · 1dacaa1
1 parent ff4c46e
commit 1dacaa1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 25 deletions.
diff --git a/src/static/index.html b/src/static/index.html
@@ -25,27 +25,10 @@
     <script src="./raw_data_js/integrated_tsne_gsea.js"></script>
     <script src="./raw_data_js/top10_markers.js"></script>
     <script src="./raw_data_js/tsne_data.js"></script>
-  </head>
-  <!-- <body class="p-4">
-    <main class="bg-white w-full h-full">
-        <h1 cl>T-SNE</h1>
-    
-        <hr />
 
-        <div class="flex justify-between items-start">
+    <link rel="stylesheet" href="styles.css" />
+  </head>
 
-          
-          <div id="chart" class="py-3 w-full"></div>
-          <div class="flex flex-col gap-2 w-1/4 m-2">
-            <div id="cluster-info-panel"></div>
-            <div id="gsea-info-panel"></div>
-          </div>
-        </div>
-        <hr />
-    
-        <pre id="pre-data"></pre>
-      </main>
-  </body> -->
   <body class="h-full">
     <div class="min-h-full">
       <header class="bg-white shadow">

diff --git a/src/static/styles.css b/src/static/styles.css
@@ -0,0 +1,2 @@
+.data-point {
+}
diff --git a/src/static/tsne.js b/src/static/tsne.js
@@ -23,6 +23,8 @@ const BASE_COLORS = [
 const MARGIN = { bottom: 40, left: 40, right: 40, top: 40 };
 const HEIGHT = 1000 - MARGIN.top - MARGIN.bottom;
 
+let NUMBER_OF_CLUSTERS = 0;
+
 // Fetch all required data
 function fetchData() {
   return Promise.all([
@@ -146,7 +148,9 @@ function drawDataPoints(svg, data, X, Y) {
 
     circle.on("mouseover", () => {
       // Gray out all points
-      d3.selectAll(".data-point").transition().attr("fill", "ghostwhite");
+      d3.selectAll(`.data-point:not(.cluster-${point.cluster})`)
+        .transition()
+        .attr("fill", "ghostwhite");
       // Highlight the selected cluster
       d3.selectAll(`.cluster-${point.cluster}`)
         .transition()
@@ -160,12 +164,10 @@ function drawDataPoints(svg, data, X, Y) {
 
     circle.on("mouseout", () => {
       // Reset the color and size of all points
-      for (let i = 0; i < BASE_COLORS.length; i++) {
-        d3.selectAll(`.cluster-${i}`)
-          .transition()
-          .attr("fill", BASE_COLORS[i])
-          .attr("r", radius);
+      for (let i = 0; i < NUMBER_OF_CLUSTERS; i++) {
+        d3.selectAll(`.cluster-${i}`).attr("fill", BASE_COLORS[i]);
       }
+      d3.selectAll(`.cluster-${point.cluster}`).attr("r", radius);
     });
   });
 }
@@ -221,6 +223,9 @@ async function main() {
     if (!tsneData || tsneData.length === 0) {
       throw new Error("No data received or empty data set");
     }
+
+    NUMBER_OF_CLUSTERS = Object.keys(clusterInfo).length;
+
     drawSVG(tsneData, clusterInfo);
     console.log("Visualization completed successfully");
   } catch (error) {