Enable table visualisation for Tables. (enso-org/ide#1181)

Original commit: enso-org/ide@b6c4339

ide/CHANGELOG.md

@@ -14,6 +14,8 @@ read the notes of the `Enso 2.0.0-alpha.1` release.
 - Fixes to some visual glitches, like small "pixel-like" things appearing sometimes on the screen.
 - The shortcuts to close the application and to toggle the developer tools at runtime are working
   now on all supported platforms.
+- [You can now see data frames in the table visualisation][1181]. Big tables get truncated to 2000 
+  entries.
 
 #### EnsoGL
 - New multi-camera management system, allowing the same shape systems be rendered on different 
@@ -33,6 +35,7 @@ read the notes of the `Enso 2.0.0-alpha.1` release.
   appears another icon that will reset the position to the original position.
 
 [1096]: https://github.com/enso-org/ide/pull/1172
+[1181]: https://github.com/enso-org/ide/pull/1181
 <br/>
 
 

ide/src/rust/ide/view/graph-editor/src/builtin/visualization/java_script/table.js

@@ -3,6 +3,13 @@ class TableVisualization extends Visualization {
     static label = 'Table'
 
     onDataReceived(data) {
+        if (!this.isInit) {
+            this.setPreprocessor(
+                'x -> (Json.from_pairs [["header", x.columns.map .name], ["data", x.columns.map .to_vector . map (x -> x.take_start 2000) ]]).to_text '
+            )
+            this.isInit = true
+        }
+
         function tableOf(content, level) {
             let open = '<table class="level' + level + '">'
             return open + content + '</table>'
@@ -92,7 +99,7 @@ class TableVisualization extends Visualization {
                 })
             }
             result += '</tr>'
-            table = []
+            const table = []
 
             data.forEach((d, i) => {
                 d.forEach((elem, idx) => {
@@ -261,7 +268,7 @@ class TableVisualization extends Visualization {
         if (document.getElementById('root').classList.contains('dark-theme')) {
             style = style_dark
         }
-        let table = genTable(
+        const table = genTable(
             parsedData.data || parsedData,
             0,
             parsedData.header