fix: implement proper scrolling for ISA explorer using data chunks (#990)

Fixes #831. 

Currently the instructions and CSR tables in ISA explorer take very long
to load or do not load properly. By loading large datasets in chunks,
the tables can be rendered quickly on page load. This can be done using
the `addData` method provided by tabulator to populate the table after
its been built.

Scrolling Instructions table currently:


https://github.com/user-attachments/assets/3d62860e-4551-48a9-9985-04cd11066f25

Scrolling Instructions table with fix applied:


https://github.com/user-attachments/assets/5ac7d695-983c-43f0-ac57-5a94dc65493b

Requesting review @james-ball-qualcomm

Author: cmd05

backends/isa_explorer/csr_table.html

@@ -9,5 +9,6 @@
   <div id="csr_table"></div>
   <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
   <script type="text/javascript" src="csr_table.js"></script>
+  <script type="text/javascript" src="load_table.js"></script>
 </body>
 </html>

backends/isa_explorer/ext_table.html

@@ -9,5 +9,6 @@
   <div id="ext_table"></div>
   <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
   <script type="text/javascript" src="ext_table.js"></script>
+  <script type="text/javascript" src="load_table.js"></script>
 </body>
 </html>

backends/isa_explorer/inst_table.html

@@ -9,5 +9,6 @@
   <div id="inst_table"></div>
   <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
   <script type="text/javascript" src="inst_table.js"></script>
+  <script type="text/javascript" src="load_table.js"></script>
 </body>
 </html>

backends/isa_explorer/isa_explorer.rb

@@ -346,6 +346,12 @@ def gen_js_table(table, div_name, output_pname)
     fp.write "  ]\n"
     fp.write "});\n"
     fp.write "\n"
+
+    fp.write "// Load data in chunks after table is built\n"
+    fp.write "table.on(\"tableBuilt\", function() {\n"
+    fp.write "    loadDataInChunks(tabledata);\n"
+    fp.write "});\n"
+    fp.write "\n"
   end
 end
 

backends/isa_explorer/load_table.js

@@ -0,0 +1,36 @@
+// Chunked data loading for better performance
+function loadDataInChunks(data, chunkSize = 500, delay = 50) {
+    if (!Array.isArray(data) || data.length === 0) return;
+
+    const totalChunks = Math.ceil(data.length / chunkSize);
+    let currentChunk = 0;
+
+    function loadNextChunk() {
+        const startIndex = currentChunk * chunkSize;
+        const endIndex = Math.min(startIndex + chunkSize, data.length);
+        const chunk = data.slice(startIndex, endIndex);
+
+        try {
+            if (currentChunk === 0) {
+                table.clearData();
+                table.setData(chunk);
+            } else {
+                table.addData(chunk);
+            }
+
+            currentChunk++;
+            console.log(`Chunk ${currentChunk}/${totalChunks}: ${endIndex}/${data.length} items`);
+
+            if (currentChunk < totalChunks) {
+                setTimeout(loadNextChunk, delay);
+            } else {
+                console.log('All data loaded successfully.');
+            }
+        } catch (error) {
+            console.error('Error loading chunk:', error);
+            if (currentChunk < totalChunks) setTimeout(loadNextChunk, delay);
+        }
+    }
+
+    loadNextChunk();
+}

backends/isa_explorer/tasks.rake

@@ -15,6 +15,7 @@ BACKEND_DIR = "#{$root}/backends/#{BACKEND_NAME}"
 SRC_EXT_HTML_PNAME = "#{BACKEND_DIR}/ext_table.html"
 SRC_INST_HTML_PNAME = "#{BACKEND_DIR}/inst_table.html"
 SRC_CSR_HTML_PNAME = "#{BACKEND_DIR}/csr_table.html"
+SRC_LOAD_TABLE_JS_PNAME = "#{BACKEND_DIR}/load_table.js"
 
 # Generated directories/files
 GEN_ROOT = $root / "gen" / BACKEND_NAME
@@ -93,7 +94,8 @@ end
 
 file "#{GEN_HTML_EXT_TABLE}" => [
     __FILE__,
-  SRC_EXT_HTML_PNAME
+  SRC_EXT_HTML_PNAME,
+  SRC_LOAD_TABLE_JS_PNAME
 ].flatten do |t|
     # Ensure directory holding target file is present.
     FileUtils.mkdir_p File.dirname(t.name)
@@ -109,11 +111,16 @@ file "#{GEN_HTML_EXT_TABLE}" => [
 
     # Just copy static HTML file.
     FileUtils.copy_file(SRC_EXT_HTML_PNAME, t.name)
+
+    # Copy static JS file for table loading
+    js_target = File.join(File.dirname(t.name), File.basename(SRC_LOAD_TABLE_JS_PNAME))
+    FileUtils.copy_file(SRC_LOAD_TABLE_JS_PNAME, js_target)
 end
 
 file "#{GEN_HTML_INST_TABLE}" => [
     __FILE__,
-  SRC_INST_HTML_PNAME
+  SRC_INST_HTML_PNAME,
+  SRC_LOAD_TABLE_JS_PNAME
 ].flatten do |t|
     # Ensure directory holding target file is present.
     FileUtils.mkdir_p File.dirname(t.name)
@@ -129,11 +136,16 @@ file "#{GEN_HTML_INST_TABLE}" => [
 
     # Just copy static HTML file.
     FileUtils.copy_file(SRC_INST_HTML_PNAME, t.name)
+
+    # Copy static JS file for table loading
+    js_target = File.join(File.dirname(t.name), File.basename(SRC_LOAD_TABLE_JS_PNAME))
+    FileUtils.copy_file(SRC_LOAD_TABLE_JS_PNAME, js_target)
 end
 
 file "#{GEN_HTML_CSR_TABLE}" => [
     __FILE__,
-  SRC_CSR_HTML_PNAME
+  SRC_CSR_HTML_PNAME,
+  SRC_LOAD_TABLE_JS_PNAME
 ].flatten do |t|
     # Ensure directory holding target file is present.
     FileUtils.mkdir_p File.dirname(t.name)
@@ -149,6 +161,10 @@ file "#{GEN_HTML_CSR_TABLE}" => [
 
     # Just copy static HTML file.
     FileUtils.copy_file(SRC_CSR_HTML_PNAME, t.name)
+
+    # Copy static JS file for table loading
+    js_target = File.join(File.dirname(t.name), File.basename(SRC_LOAD_TABLE_JS_PNAME))
+    FileUtils.copy_file(SRC_LOAD_TABLE_JS_PNAME, js_target)
 end
 
 file "#{GEN_JS_EXT_TABLE}" => [