Equation Explorer: Search by Number and Download Explorer CSV (#625)

Adjusted files `script.js` and `index.html` to create a Download CSV button for this issue: #419 The file provides a CSV file version of the table on the main equation explorer page. ![image](https://github.com/user-attachments/assets/408fe660-0aa7-4f2e-a02b-2690b43fd287) Also adjusted files `index.html` and `find_equation_id.js` so that now you can search on the equation editor by an integer instead of a specific equation: #565 ![image](https://github.com/user-attachments/assets/6c43fa95-15e6-417c-98f4-f1fd9cfe2140)
teorth · Oct 18, 2024 · 1823299 · 1823299
1 parent e8a011a
commit 1823299
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 7 deletions.
diff --git a/home_page/implications/find_equation_id.js b/home_page/implications/find_equation_id.js
@@ -230,10 +230,17 @@ function findEquationNumber(inputEq) {
 function findEquation() {
     const inputEq = document.getElementById('equationInput').value;
     const resultDiv = document.getElementById('result');
-
+    let eqNum = 0;
+
     try {
-        const eqNum = findEquationNumber(inputEq)-1;
-
+        // Determine if user entered integer input or equation input
+        if (!isNaN(inputEq) && (eqNum === parseInt(eqNum, 10))){
+            eqNum = parseInt(eqNum, 10) - 1;
+        }
+        else{
+            eqNum = findEquationNumber(inputEq)-1;
+        }
+
         if (eqNum) {
             renderImplications(eqNum);
             showPage('detailPage');

diff --git a/home_page/implications/index.html b/home_page/implications/index.html
@@ -105,7 +105,7 @@
       <h1>Equation Explorer</h1>
 
 
-      <input type="text" id="equationInput" placeholder="Enter an equation (e.g., x*y=y*x)">
+      <input type="text" id="equationInput" placeholder="Enter equation (e.g. x*y=y*x) or equation number">
       <button onclick="findEquation()">Jump to Equation</button>
       <div id="result"></div>
 
@@ -121,6 +121,10 @@ <h2>Oops! There's an issue with your equation</h2>
         Why not try proving a random unknown implication?
         <button onclick="randomProof()">I'm Feeling Lucky</button>
       </p>
+      <p>
+        Download this table as a CSV File
+        <button onclick="downloadEquationListCSV()">Download</button>
+      </p>
 
 
       <div class="checkbox-container">

diff --git a/home_page/implications/script.js b/home_page/implications/script.js
@@ -77,6 +77,30 @@ let filteredCachedItems = [];
 let cachedItems = [];
 let cachedItemElements = [];
 
+function downloadEquationListCSV() {
+    const rows = Array.from(equationList.children);
+    const csv = "\uFEFF" + rows.map((row) => (
+        Array.from(row.children).map(
+            (element) => element.textContent
+        ).join(",")))
+        .join("\n");
+
+        const filename = 'export_explorer_' + new Date().toLocaleDateString() + '.csv';
+        downloadStringAsCSV(csv, filename)
+}
+
+function downloadStringAsCSV(string, filename) {
+        // Export code gathered from https://stackoverflow.com/a/56370447/7059087
+        var link = document.createElement('a');
+        link.style.display = 'none';
+        link.setAttribute('target', '_blank');
+        link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(string));
+        link.setAttribute('download', filename);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+}
+
 function showPage(pageId) {
     document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
     document.getElementById(pageId).classList.add('active');
@@ -379,7 +403,7 @@ function renderImplications(index) {
   }
 
   smallest_magma = smallest_magma_data[index+1]
-  smallestMagmaLink.innerHTML = smallest_magma 
+  smallestMagmaLink.innerHTML = smallest_magma
     ? `<br />(Size of smallest non-trivial magma: ${smallest_magma.length} <a target="_blank" href="${FME_BASE_URL}?magma=${encodeURIComponent(JSON.stringify(smallest_magma))}">(Explore)</a>)`
     : `<br />(Size of smallest non-trivial magma: N/A)`
 
@@ -492,10 +516,10 @@ window.addEventListener('popstate', handleUrlChange);
 document.addEventListener('DOMContentLoaded', function() {
     const timestamp = last_updated.timestamp * 1000; // Convert to milliseconds
     const commitHash = last_updated.commit_hash;
-    
+
     const localDate = new Date(timestamp);
     document.getElementById('lastUpdated').textContent = localDate.toLocaleString();
-    
+
     const commitLink = document.getElementById('commitLink');
     commitLink.href = `https://github.com/teorth/equational_theories/tree/${commitHash}`;
     commitLink.textContent = commitHash.substring(0, 7); // Display first 7 characters of the hash