Changes to gSheet script

derjogi · derjogi · commit 8491b4c91bb6 · 2025-02-25T16:03:41.000+13:00
diff --git a/aux_tools/google/ColumnSelector.html b/aux_tools/google/ColumnSelector.html
@@ -2,6 +2,13 @@
 <html>
   <head>
     <base target="_top">
+    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+      body {
+        font-family: 'Google Sans', sans-serif;
+      }
+    </style>
+
     <style>
       .form-group {
         margin: 10px 0;
@@ -14,6 +21,31 @@
         color: red;
       }
     </style>
+
+    <style>
+      .spinner {
+        width: 40px;
+        height: 40px;
+        border: 4px solid #f3f3f3;
+        border-top: 4px solid #3498db;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin: 20px auto;
+      }
+      
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      
+      .loading-message {
+        margin: 10px;
+        font-style: italic;
+        color: #666;
+      }
+    </style>
+
+
   </head>
   <body>
     <form onsubmit="handleSubmit(this); return false;">
@@ -37,7 +69,7 @@
           <? }); ?>
         </select>
       </div>
-      
+
       <div class="form-group">
         <label>Author Column (optional)</label>
         <select name="authorColumn">
@@ -47,33 +79,68 @@
           <? }); ?>
         </select>
       </div>
+
+      <div class="form-group">
+        <label>Number of Ranked Results </label>
+        <input type="number" name="resultCount" min="1" max="500" value="10" required>
+      </div>
       
       <button type="submit">Analyze</button>
     </form>
-    <!-- Add this after the form -->
+    
     <div id="loadingIndicator" style="display: none; text-align: center; margin-top: 20px;">
-      <p>Analyzing ideas with SimScore...</p>
-      <p>This may take a few moments.</p>
+      <div class="spinner"></div>
+      <div id="loadingMessage" class="loading-message">Initializing SimScore analysis...</div>
     </div>
-
+    
     <script>
+      const loadingMessages = [
+        "Optimizing neural pathways...",
+        "Calibrating relativity biases...",
+        "Measuring cosine distances in vector space...",
+        "Aligning semantic tensors...",
+        "Computing similarity matrices...",
+        "Discovering idea clusters...",
+        "Calculating innovation potential...",
+        "Synchronizing thought vectors..."
+      ];
+    
+      function updateLoadingMessage() {
+        const messageElement = document.getElementById('loadingMessage');
+        let currentIndex = 0;
+        
+        return setInterval(() => {
+          messageElement.textContent = loadingMessages[currentIndex];
+          currentIndex = (currentIndex + 1) % loadingMessages.length;
+        }, 5000);
+      }
+    
       function handleSubmit(form) {
-        // Show loading indicator
         document.querySelector('form').style.display = 'none';
         document.getElementById('loadingIndicator').style.display = 'block';
         
+        // Start cycling through messages
+        const messageInterval = updateLoadingMessage();
+        
         const data = {
           idColumn: form.idColumn.value,
           ideaColumn: form.ideaColumn.value,
-          authorColumn: form.authorColumn.value
+          authorColumn: form.authorColumn.value,
+          resultCount: parseInt(form.resultCount.value) || 10
         };
         
         google.script.run
-          .withSuccessHandler(closeDialog)
-          .withFailureHandler(handleError)
+          .withSuccessHandler(() => {
+            clearInterval(messageInterval);
+            closeDialog();
+          })
+          .withFailureHandler((error) => {
+            clearInterval(messageInterval);
+            handleError(error);
+          })
           .processSelectedColumns(data);
       }
-      
+
       function closeDialog() {
         google.script.host.close();
       }
diff --git a/aux_tools/google/code.gs b/aux_tools/google/code.gs
@@ -58,7 +58,7 @@ function getApiUrl() {
 }
 
 function processSelectedColumns(
-  selections = { idColumn: "ID#", ideaColumn: "ideas", authorColumn: "author" }
+  selections = { idColumn: "ID", ideaColumn: "Challenge need", authorColumn: "Company", resultCount: 10 }
 ) {
   const sheet = SpreadsheetApp.getActiveSheet();
   const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
@@ -116,7 +116,7 @@ function processSelectedColumns(
     console.log("(Slices of) Ranked Ideas: \b", response.ranked_ideas.slice(0, 5), "\n[...]\n", response.ranked_ideas.slice(-10));
     console.log("Has similarity matrix? : ", Boolean(response.pairwise_similarity_matrix));
     console.log("Has cluster names? : ", Boolean(response.cluster_names));
-    displayResults(response);
+    displayResults(response, selections.resultCount);
   }
 }
 
@@ -146,9 +146,40 @@ function callSimScoreApi(requestData) {
   }
 }
 
-function displayResults(response) {
+function displayResults(response, numRankedResults) {
   const ss = SpreadsheetApp.getActiveSpreadsheet();
 
+  // Format ranked ideas
+  const rankedData = response.ranked_ideas.map((item, index) => {
+    const clusterName =
+      response.cluster_names?.find((c) => c.id === item.cluster_id)?.name || item.cluster_id;
+    return [
+      "# " + (index + 1),
+      item.idea,
+      item.author_id || "",
+      item.similarity_score,
+      clusterName,
+      item.id,
+    ];
+  });
+
+  console.log("Ranked Data: ", rankedData.slice(0,5), rankedData.slice(-5))
+
+  const rankingsSheet = createRankedSheet(ss, rankedData, numRankedResults)
+
+  if (response.relationship_graph) {
+    createBubbleChart(response, rankingsSheet, rankedData, numRankedResults);
+  }
+
+  if (response.pairwise_similarity_matrix) {
+    createMatrixSheet(ss, response)
+  }
+
+  ss.setActiveSheet(ss.getSheetByName("SimScore Rankings"))
+}
+
+function createRankedSheet(ss, rankedData, numRankedResults) {
+    
   // Create Rankings Sheet
   let rankingsSheet = ss.getSheetByName("SimScore Rankings");
   if (rankingsSheet) {
@@ -160,44 +191,91 @@ function displayResults(response) {
   // Headers for rankings
   const headers = [
     "Priority",
-    "ID",
     "Idea",
     "Author",
     "Similarity Score",
     "Cluster",
+    "ID",
   ];
   rankingsSheet.getRange(1, 1, 1, headers.length).setValues([headers]);
 
-  // Format ranked ideas
-  const rankedData = response.ranked_ideas.map((item, index) => {
-    const clusterName =
-      response.cluster_names?.find((c) => c.id === item.cluster_id)?.name || item.cluster_id;
-    return [
-      "# " + (index + 1),
-      item.id,
-      item.idea,
-      item.author_id || "",
-      item.similarity_score,
-      clusterName,
-    ];
-  });
-
-  console.log("Ranked Data: ", rankedData.slice(0,5), rankedData.slice(-5))
-
   if (rankedData.length > 0) {
     rankingsSheet
-      .getRange(2, 1, rankedData.length, rankedData[0].length)
-      .setValues(rankedData);
+      .getRange(2, 1, rankedData.slice(0, numRankedResults).length, rankedData[0].length)
+      .setValues(rankedData.slice(0, numRankedResults));
+  
+    // Format similarity score column (column 4) to show 2 decimal places
+    rankingsSheet
+      .getRange(2, 4, rankedData.slice(0, numRankedResults).length, 1)
+      .setNumberFormat("0.00");
   }
+  return rankingsSheet;
+}
 
+function createBubbleChart(response, sheet, rankedData, numRankedResults) {
+  // Data for the chart - in required API order
+  const chartData = [["X", "Y", "Priority", "Similarity"]];
+  const colorMap = {};
 
-  if (response.relationship_graph) {
-    createScatterPlot(response, rankingsSheet, rankedData);
-  }
+  const topScores = response.ranked_ideas
+    .slice(0, numRankedResults)
+    .map(i => i.similarity_score);
+  const minTopScore = Math.min(...topScores);
 
-  // Create Matrix Sheet if available
-  if (response.pairwise_similarity_matrix) {
-    let matrixSheet = ss.getSheetByName("SimScore Matrix");
+  response.relationship_graph.nodes.forEach((node, index) => {
+    const idea = response.ranked_ideas.find((i) => i.id === node.id);
+    const similarity = idea ? idea.similarity_score : 1.0;
+    const isPriority = index < numRankedResults;
+
+    // Add data point
+    chartData.push([
+      node.coordinates.x,
+      node.coordinates.y,
+      node.id.toString(),
+      similarity,
+    ]);
+
+    const t = isPriority // don't use similarity for the top results
+      ? 1 - ((index+1) / numRankedResults) * (1-minTopScore-0.1)  // This keeps t between 1.0 and 0.1 higher than minTopScore for priority items
+      : similarity;
+      
+    let color = "#" +
+      Math.round(251 - (isPriority ? 251 : 185) * t).toString(16).padStart(2, "0") +
+      Math.round(188 - (isPriority ? 188 : 55) * t).toString(16).padStart(2, "0") +
+      Math.round(4 + (isPriority ? 250 : 240) * t).toString(16).padStart(2, "0");
+
+    colorMap[index] = { color };
+  });
+  
+  const chartRange = sheet.getRange(1, rankedData[0].length + 2, chartData.length, chartData[0].length);
+  chartRange.setValues(chartData);
+  sheet.hideColumns(chartRange.getColumn(), chartRange.getNumColumns());
+
+  const chart = sheet
+    .newChart()
+    .setChartType(Charts.ChartType.BUBBLE)
+    .addRange(chartRange)
+    .setOption("title", "Similarity to the most similar point")
+    .setOption("subtitle", `(Top ${numRankedResults} colors enhanced)`)
+    .setOption("height", 600)
+    .setOption("width", 800)
+    .setOption("series", colorMap)
+    .setOption("tooltip", {
+      trigger: "focus",
+      textStyle: { fontSize: 12 },
+      showColorCode: false,
+      ignoreBounds: false
+    })
+    // Hide other columns from tooltip
+    .setOption("hAxis", { textPosition: "none" })
+    .setOption("vAxis", { textPosition: "none" })
+    .setPosition(3, chartRange.getColumn() + chartRange.getNumColumns() + 1, 0, 0)
+    .build();
+  sheet.insertChart(chart);
+}
+
+function createMatrixSheet(ss, response) {
+  let matrixSheet = ss.getSheetByName("SimScore Matrix");
     if (matrixSheet) {
       matrixSheet.clear();
     } else {
@@ -241,50 +319,4 @@ function displayResults(response) {
       .build();
 
     matrixSheet.setConditionalFormatRules([rule]);
-  }
-}
-
-function createScatterPlot(response, sheet, rankedData) {
-  // Data for the chart - in required API order
-  const chartData = [["X", "Y", "ID", "Similarity"]];
-  const colorMap = {};
-  response.relationship_graph.nodes.forEach((node, index) => {
-    const idea = response.ranked_ideas.find((i) => i.id === node.id);
-    const similarity = idea ? idea.similarity_score : 1.0;
-
-    // Add data point
-    chartData.push([
-      node.coordinates.x,
-      node.coordinates.y,
-      node.id.toString(),
-      similarity,
-    ]);
-
-    // Calculate color using index instead of ID
-    const t = similarity;
-    let color = "#" +
-        Math.round(251 - 185 * t).toString(16).padStart(2, "0") +
-        Math.round(188 - 55 * t).toString(16).padStart(2, "0") +
-        Math.round(4 + 240 * t).toString(16).padStart(2, "0")
-    
-    colorMap[index] = { color };
-  });
-  
-  console.log(colorMap.slice(0, 5), colorMap.slice(-5));
-
-  const chartRange = sheet.getRange(1, rankedData[0].length, chartData.length, chartData[0].length);
-  chartRange.setValues(chartData);
-  sheet.hideColumns(chartRange.getColumn(), chartRange.getNumColumns());
-
-  const chart = sheet
-    .newChart()
-    .setChartType(Charts.ChartType.BUBBLE)
-    .addRange(chartRange)
-    .setOption("title", "Similarity to the most similar point")
-    .setOption("height", 600)
-    .setOption("width", 800)
-    .setOption("series", colorMap)
-    .setPosition(3, chartRange.getColumn() + chartRange.getNumColumns() + 1, 0, 0)
-    .build();
-  sheet.insertChart(chart);
 }
