Direct Config Editing (#2)

* Start adding instrumentation
* Fix interactive config editing

examples/csv-with-explicit-inner-nodes/csvdata.ts

@@ -233,7 +233,7 @@ export class CSVData {
         };
 
         config.geometry = {
-            parentLayer: { showRoot: true },
+            parentLayer: { showRoot: false },
             leafLayer: {
                 colorMap: 'color:leaf',
                 height: 'bufferView:heights-normalized',

examples/direct-config/treemap.pug

@@ -28,20 +28,20 @@ block content
       div.col
 
         p.mb-1
-          | CSV Content:
+          | Config Content:
 
         textarea.form-control#csv-data(rows="25")
           | {
           |   "topology": {
           |       "format": "tupled",
           |       "semantics": "parent-id-id",
-          |       "edges": [ [ -1, 0 ] ]
+          |       "edges": [ [ -1, 0 ], [0, 1], [0,2], [0,3] ]
           |   },
           |   "buffers": [
           |     {
           |       "identifier": "source-weights",
           |       "type": "numbers",
-          |       "data": [ 0.0, 1.0 ],
+          |       "data": [ 0.0, 0.0, 1.0, 2.0, 1.0 ],
           |       "encoding": "native"
           |     }
           |   ],
@@ -57,7 +57,14 @@ block content
           |   ],
           |   "layout": {
           |       "algorithm": "strip",
-          |       "weight": "bufferView:weights"
+          |       "weight": "bufferView:weights",
+          |       "parentPadding": { "type": "relative", "value": 0.05 },
+          |       "siblingMargin": { "type": "relative", "value": 0.05 }
+          |   },
+          |   "geometry": {
+          |     "parentLayer": {
+          |       "showRoot": false
+          |     }
           |   }
           | }
 

examples/direct-config/treemap.ts

@@ -67,12 +67,32 @@ export class DirectConfigTreemapExample extends Example {
         const canvas = this._canvas as gloperate.Canvas;
         const visualization = this._visualization;
 
-        const loadConfig = (configData: object) => {
+        const loadConfig = (configString: string) => {
+            let configData = {};
+
+            try {
+                configData = JSON.parse(configString);
+            } catch (error) {
+                console.log(error);
+
+                return;
+            }
+
             const oldConfig = visualization.configuration;
 
             try {
                 const config = new Configuration();
 
+                if (oldConfig !== undefined) {
+                    config.topology = oldConfig.topology;
+                    config.layout = oldConfig.layout;
+                    config.buffers = oldConfig.buffers;
+                    config.bufferViews = oldConfig.bufferViews;
+                    config.colors = oldConfig.colors;
+                    config.geometry = oldConfig.geometry;
+                    config.labels = oldConfig.labels;
+                }
+
                 config.topology = (configData as Configuration).topology || {};
                 config.layout = (configData as Configuration).layout || {};
                 config.buffers = (configData as Configuration).buffers || [];
@@ -134,7 +154,7 @@ export class DirectConfigTreemapExample extends Example {
             dataElement.oninput = (event) => {
                 const testdata = dataElement.value;
 
-                loadConfig(JSON.parse(testdata));
+                loadConfig(testdata);
 
                 if (hashElement) {
                     hashElement.textContent = this.obtainUrl(btoa(testdata));

source/configuration.ts

@@ -94,8 +94,6 @@ export class Configuration {
             parentLayer: false,
         },
         labels: false,
-        // colorScheme: false,
-        animations: false,
     });
 
     /** @see {@link topology} */
@@ -137,9 +135,9 @@ export class Configuration {
         const schema = Configuration.TREEMAP_SCHEMA.properties.topology;
         /* Skip validation on this interleaved or tupled array due to crazy performance impact. This
         seems to be an issue within the jsonschema package (not webgl-operate). */
-        // if (!properties.validate(topology, schema, [])) {
-        //     return;
-        // }
+        if (!properties.validate(topology, schema, [])) {
+            return;
+        }
         properties.complement(topology, schema);
         properties.compare(topology, this._topology, this._altered, 'topology');
         this._topology = topology;
@@ -248,7 +246,7 @@ export class Configuration {
     public labelsToJSON(): object {
         const labels = Object.assign({}, this._labels);
 
-        if (typeof labels.names !== "string") {
+        if (labels.names && typeof labels.names !== "string") {
             (labels.names as object) = Object.fromEntries(this._labels.names as Map<number, string>);
         }
 

source/cuboidrenderpass.ts

@@ -12,6 +12,9 @@ import {
     Shader,
 } from 'webgl-operate';
 
+const log = auxiliaries.log;
+const LogLevel = auxiliaries.LogLevel;
+
 import { CuboidGeometry } from './cuboidgeometry';
 import { MultiRenderTarget } from './multirendertarget';
 import { Topology } from './topology';
@@ -195,6 +198,7 @@ export class CuboidRenderPass extends Initializable {
     @Initializable.assert_initialized()
     protected relink(): void {
         if (this._colorTable === undefined) {
+            log(LogLevel.Warning, "Color table is not defined. Could not compile shaders.");
             return;
         }
 

source/geometry.ts

@@ -234,15 +234,19 @@ export class Geometry extends Initializable {
     }
 
     set leafNodeAreaScales(leafNodeAreaScales: Uint8Array | undefined) {
+        this.assertInitialized();
         this._leafNodeAreaScales = leafNodeAreaScales;
+        this._altered.alter('leafNodeAreaScales');
     }
 
     get leafNodeColors(): Uint8Array | undefined {
         return this._leafNodeColors;
     }
 
     set leafNodeColors(leafNodeColors: Uint8Array | undefined) {
+        this.assertInitialized();
         this._leafNodeColors = leafNodeColors;
+        this._altered.alter('leafNodeColors');
     }
 
     set colorTable(colorTable: Float32Array | undefined) {
@@ -259,7 +263,9 @@ export class Geometry extends Initializable {
     }
 
     set leafNodeHeights(leafNodeHeights: Uint8Array | undefined) {
+        this.assertInitialized();
         this._leafNodeHeights = leafNodeHeights;
+        this._altered.alter('leafNodeHeights');
     }
 
 
@@ -311,7 +317,7 @@ export class Geometry extends Initializable {
 
     set showRoot(show: boolean) {
         this.assertInitialized();
-        this._showRoot = show;
+        this._showRoot = show ? true : false;
         this._altered.alter('any');
     }
     get showRoot(): boolean {

source/quadrenderpass.ts

@@ -333,7 +333,7 @@ export class QuadRenderPass extends Initializable {
     }
 
     set showRoot(show: boolean) {
-        this._showRoot = show;
+        this._showRoot = show ? true : false;
     }
 
     set topology(topology: Topology) {

source/renderer.ts

@@ -240,6 +240,7 @@ export class Renderer extends AbstractRenderer implements CoordsAccess, IdAccess
      */
     private renderInnerNodes(target: Framebuffer, attachment: MultiRenderTarget.Attachment,
         depthMask: boolean): void {
+
         if (!this._geometry.valid) {
             return;
         }
@@ -259,6 +260,7 @@ export class Renderer extends AbstractRenderer implements CoordsAccess, IdAccess
      */
     private renderLeafNodes(target: Framebuffer, attachment: MultiRenderTarget.Attachment,
         depthMask: boolean): void {
+
         if (!this._geometry.valid) {
             return;
         }
@@ -663,6 +665,7 @@ export class Renderer extends AbstractRenderer implements CoordsAccess, IdAccess
                 break;
             }
         }
+
         return changed || labelsChanged || this._altered.any || this._camera.altered;
     }
 
@@ -702,6 +705,7 @@ export class Renderer extends AbstractRenderer implements CoordsAccess, IdAccess
         }
 
         if (this._geometry.altered.colorTableLength) {
+
             this._leafPass.colorTableLengthAltered();
         }
 
@@ -843,6 +847,7 @@ export class Renderer extends AbstractRenderer implements CoordsAccess, IdAccess
         /* Avoid blitting before everything is initialized. */
         if (!this._accumulationPass.initialized || !this._accumulationPass.framebuffer?.initialized
             || !this._blitPass.initialized) {
+
             return;
         }
         const blit = this._blitPass;

source/visualization.ts

@@ -129,6 +129,7 @@ export class Visualization {
 
         /* @todo: also update when color table has changed (e.g., number of colors changed). */
         if (!altered.any && !config.altered.topology) {
+
             return;
         }
 
@@ -264,6 +265,7 @@ export class Visualization {
             if (this._geometry.initialized) {
                 this._geometry.uninitialize();
             }
+
             return true;
         }
 
@@ -322,7 +324,6 @@ export class Visualization {
 
         let weightBuffer = this._intermediaries.aggregatedWeights;
         if (weightBuffer === undefined || altered.layout.weight) {
-
             weightBuffer = this._intermediaries.aggregatedWeights =
                 this._bufferResolver.resolve(config.layout.weight, config, this._normalization)!;
 
@@ -351,7 +352,6 @@ export class Visualization {
         let labelPaddingSpaces = this._intermediaries.labelPaddingSpaces;
 
         if (layout === undefined || altered.layout.any) {
-
             accessorySpaces = this._intermediaries.accessorySpaces =
                 new Array<Rect>(tree.numberOfInnerNodes);
             labelRects = this._intermediaries.labelRects =
@@ -513,13 +513,14 @@ export class Visualization {
             this._colorLUT = new ColorTable(emphasisColor as Color, auxiliaryColor as Array<Color>,
                 innerColor as Array<Color>, leafColor as Array<Color>);
 
-            if (!this._geometry.colorTable
-                || this._geometry.colorTable.length !== this._colorLUT.bits.length) {
-                this._geometry.altered.alter('colorTableLength');
-                this._renderer.invalidate();
-            }
+            this._geometry.colorTable = undefined;
+        }
 
+        if (!this._geometry.colorTable || this._geometry.colorTable.length !== this._colorLUT.bits.length) {
             this._geometry.colorTable = this._colorLUT.bits;
+
+            this._geometry.altered.alter('colorTableLength');
+            this._renderer.invalidate();
         }
 
         /* Color Mapping */
@@ -560,7 +561,7 @@ export class Visualization {
             this._geometry.altered.alter('emphasisOutlineWidth');
         }
 
-        this._geometry.showRoot = config.geometry.parentLayer?.showRoot!;
+        this._geometry.showRoot = config.geometry.parentLayer?.showRoot ? true : false;
 
         /** @todo refine and move this to height buffer creation, similar to color buffer creation  */
         let heights = undefined;