Enable rendering with undefined properties (#120)

* Enable rendering with undefined properties

* Fix empty memlet tooltip

* More default property fixes

* Use text decoder to retrieve gzipped JSON as string

* Tried to catch all attributes

* More attributes

src/local_view/lview_parser.ts

@@ -130,7 +130,7 @@ export class LViewParser {
             let container = graph.dataContainers.get(name);
             if (!container) {
                 const dimensions = [];
-                for (const s of sdfgContainer.attributes.shape) {
+                for (const s of sdfgContainer.attributes.shape ?? []) {
                     const val = this.parseSymbolic(s, symbolMap);
                     dimensions.push(new DataDimension(s.toString(), val));
                 }
@@ -157,8 +157,8 @@ export class LViewParser {
                     name,
                     dimensions,
                     8, // TODO
-                    sdfgContainer.attributes.start_offset,
-                    sdfgContainer.attributes.alignment,
+                    sdfgContainer.attributes.start_offset ?? 0,
+                    sdfgContainer.attributes.alignment ?? 0,
                     storageType?.type,
                     strides,
                 );
@@ -203,8 +203,8 @@ export class LViewParser {
             attributes.data, graph, state, symbolMap
         );
         const ranges = attributes.other_subset ?
-            attributes.other_subset.ranges : attributes.subset.ranges;
-        const volume = this.parseSymbolic(attributes.num_accesses, symbolMap);
+            attributes.other_subset.ranges : attributes.subset?.ranges;
+        const volume = this.parseSymbolic(attributes.num_accesses ?? 0, symbolMap);
         if (dataContainer && ranges) {
             if (volume === 1) {
                 const accessIdx = [];
@@ -428,8 +428,8 @@ export class LViewParser {
         sdfg: JsonSDFG
     ): Promise<Map<string, number>> {
         const symbolMap = new Map<string, number>();
-        const symbols = sdfg.attributes.symbols;
-        const constants = sdfg.attributes.constants_prop;
+        const symbols = sdfg.attributes.symbols ?? [];
+        const constants = sdfg.attributes.constants_prop ?? [];
 
         if (symbols) {
             for (const symbol in symbols) {

src/overlay_manager.ts

@@ -20,7 +20,7 @@ export class SymbolResolver {
         this.sdfg = this.renderer.get_sdfg();
 
         // Initialize the symbol mapping to the graph's symbol table.
-        Object.keys(this.sdfg.attributes.symbols).forEach((s) => {
+        Object.keys(this.sdfg.attributes.symbols ?? []).forEach((s) => {
             if (this.sdfg.attributes.constants_prop !== undefined &&
                 Object.keys(this.sdfg.attributes.constants_prop).includes(s) &&
                 this.sdfg.attributes.constants_prop[s][0]['type'] === 'Scalar')
@@ -36,7 +36,7 @@ export class SymbolResolver {
 
     public removeStaleSymbols(): void {
         const toKeep: SymbolMap = {};
-        for (const sym in this.renderer.get_sdfg().attributes.symbols)
+        for (const sym in this.renderer.get_sdfg().attributes.symbols ?? [])
             toKeep[sym] = this.symbol_value_map[sym];
         this.symbol_value_map = toKeep;
     }

src/overlays/avg_parallelism_overlay.ts

@@ -73,7 +73,7 @@ export class AvgParallelismOverlay extends GenericSdfgOverlay {
                     if (node instanceof NestedSDFG) {
                         const nested_symbols_map: SymbolMap = {};
                         const mapping =
-                            node.data.node.attributes.symbol_mapping;
+                            node.data.node.attributes.symbol_mapping ?? {};
                         // Translate the symbol mappings for the nested SDFG
                         // based on the mapping described on the node.
                         Object.keys(mapping).forEach((symbol: string) => {

src/overlays/depth_overlay.ts

@@ -73,7 +73,7 @@ export class DepthOverlay extends GenericSdfgOverlay {
                     if (node instanceof NestedSDFG) {
                         const nested_symbols_map: SymbolMap = {};
                         const mapping =
-                            node.data.node.attributes.symbol_mapping;
+                            node.data.node.attributes.symbol_mapping ?? {};
                         // Translate the symbol mappings for the nested SDFG
                         // based on the mapping described on the node.
                         Object.keys(mapping).forEach((symbol: string) => {

src/overlays/memory_volume_overlay.ts

@@ -86,7 +86,7 @@ export class MemoryVolumeOverlay extends GenericSdfgOverlay {
                     const node = state_graph.node(v);
                     if (node instanceof NestedSDFG) {
                         const nested_symbols_map: SymbolMap = {};
-                        const mapping = node.data.node.attributes.symbol_mapping;
+                        const mapping = node.data.node.attributes.symbol_mapping ?? {};
                         // Translate the symbol mappings for the nested SDFG
                         // based on the mapping described on the node.
                         Object.keys(mapping).forEach((symbol) => {

src/overlays/operational_intensity_overlay.ts

@@ -136,7 +136,7 @@ export class OperationalIntensityOverlay extends GenericSdfgOverlay {
                     if (node instanceof NestedSDFG) {
                         const nested_symbols_map: SymbolMap = {};
                         const mapping =
-                            node.data.node.attributes.symbol_mapping;
+                            node.data.node.attributes.symbol_mapping ?? {};
                         // Translate the symbol mappings for the nested SDFG
                         // based on the mapping described on the node.
                         Object.keys(mapping).forEach((symbol: string) => {

src/overlays/static_flops_overlay.ts

@@ -73,7 +73,7 @@ export class StaticFlopsOverlay extends GenericSdfgOverlay {
                     if (node instanceof NestedSDFG) {
                         const nested_symbols_map: SymbolMap = {};
                         const mapping =
-                            node.data.node.attributes.symbol_mapping;
+                            node.data.node.attributes.symbol_mapping ?? {};
                         // Translate the symbol mappings for the nested SDFG
                         // based on the mapping described on the node.
                         Object.keys(mapping).forEach((symbol: string) => {

src/renderer/renderer.ts

@@ -3524,16 +3524,16 @@ function relayoutSDFGState(
         node.attributes.layout = {};
 
         // Set connectors prior to computing node size
-        node.attributes.layout.in_connectors = node.attributes.in_connectors;
+        node.attributes.layout.in_connectors = node.attributes.in_connectors ?? [];
         if ('is_collapsed' in node.attributes && node.attributes.is_collapsed &&
             node.type !== SDFGElementType.NestedSDFG &&
             node.type !== SDFGElementType.ExternalNestedSDFG)
             node.attributes.layout.out_connectors = find_exit_for_entry(
                 state.nodes, node
-            )?.attributes.out_connectors;
+            )?.attributes.out_connectors ?? [];
         else
             node.attributes.layout.out_connectors =
-                node.attributes.out_connectors;
+                node.attributes.out_connectors ?? [];
 
         const nodeSize = calculateNodeSize(sdfg, node, ctx);
         node.attributes.layout.width = nodeSize.width;

src/renderer/renderer_elements.ts

@@ -471,14 +471,16 @@ export class LoopRegion extends ControlFlowRegion {
             ctx.stroke();
 
             ctx.font = LoopRegion.LOOP_STATEMENT_FONT;
-            const initStatement = this.attributes().init_statement.string_data;
+            const initStatement = this.attributes().init_statement?.string_data;
             const initTextY = (
                 (topleft.y + (LoopRegion.INIT_SPACING / 2)) +
                 (SDFV.LINEHEIGHT / 2)
             );
-            const initTextMetrics = ctx.measureText(initStatement);
-            const initTextX = this.x - (initTextMetrics.width / 2);
-            ctx.fillText(initStatement, initTextX, initTextY);
+            if (initStatement) {
+                const initTextMetrics = ctx.measureText(initStatement);
+                const initTextX = this.x - (initTextMetrics.width / 2);
+                ctx.fillText(initStatement, initTextX, initTextY);
+            }
 
             ctx.font = oldFont;
             ctx.fillText(
@@ -506,18 +508,20 @@ export class LoopRegion extends ControlFlowRegion {
         ctx.lineTo(topleft.x + this.width, condLineY);
         ctx.stroke();
         ctx.font = LoopRegion.LOOP_STATEMENT_FONT;
-        const condStatement = this.attributes().loop_condition.string_data;
+        const condStatement = this.attributes().loop_condition?.string_data;
         const condTextY = (
             (condTopY + (LoopRegion.CONDITION_SPACING / 2)) +
             (SDFV.LINEHEIGHT / 2)
         );
-        const condTextMetrics = ctx.measureText(condStatement);
-        const condTextX = this.x - (condTextMetrics.width / 2);
-        ctx.fillText(condStatement, condTextX, condTextY);
-        ctx.font = oldFont;
-        ctx.fillText(
-            'while', topleft.x + LoopRegion.META_LABEL_MARGIN, condTextY
-        );
+        if (condStatement) {
+            const condTextMetrics = ctx.measureText(condStatement);
+            const condTextX = this.x - (condTextMetrics.width / 2);
+            ctx.fillText(condStatement, condTextX, condTextY);
+            ctx.font = oldFont;
+            ctx.fillText(
+                'while', topleft.x + LoopRegion.META_LABEL_MARGIN, condTextY
+            );
+        }
 
         // Draw the update statement if there is one.
         if (this.attributes().update_statement) {
@@ -939,7 +943,7 @@ export class Memlet extends Edge {
         let skipArrow = false;
         if (this.attributes().data) {
             // CR edges have dashed lines
-            if (this.data.attributes.wcr !== null)
+            if (this.data.attributes.wcr)
                 ctx.setLineDash([3, 2]);
             else
                 ctx.setLineDash([1, 0]);
@@ -982,7 +986,7 @@ export class Memlet extends Edge {
         const dsettings = renderer.view_settings();
         const attr = this.attributes();
 
-        if (attr.subset === null) {  // Empty memlet
+        if (attr.data === null || attr.data === undefined) {  // Empty memlet
             container.style.display = 'none';
             return;
         }
@@ -1157,10 +1161,10 @@ export class InterstateEdge extends Edge {
 
         const labelLines = [];
         if (this.attributes().assignments) {
-            for (const k of Object.keys(this.attributes().assignments))
+            for (const k of Object.keys(this.attributes().assignments ?? []))
                 labelLines.push(k + ' 🡐 ' + this.attributes().assignments[k]);
         }
-        const cond = this.attributes().condition.string_data;
+        const cond = this.attributes().condition?.string_data;
         if (cond && cond !== '1' && cond !== 'true')
             labelLines.push('if ' + cond);
 
@@ -1369,10 +1373,10 @@ export class AccessNode extends SDFGNode {
         }
 
         // Non-transient (external) data is thicker
-        if (nodedesc && nodedesc.attributes.transient === false) {
-            ctx.lineWidth = 3.0;
-        } else {
+        if (nodedesc && nodedesc.attributes.transient === true) {
             ctx.lineWidth = 1.0;
+        } else {
+            ctx.lineWidth = 3.0;
         }
         ctx.stroke();
         ctx.lineWidth = 1.0;
@@ -1387,7 +1391,8 @@ export class AccessNode extends SDFGNode {
             ctx.fillStyle = this.getCssProperty(
                 renderer, '--reference-background-color'
             );
-        } else if (nodedesc && this.sdfg.attributes.constants_prop[name] !== undefined) {
+        } else if (nodedesc && this.sdfg.attributes.constants_prop &&
+            this.sdfg.attributes.constants_prop[name] !== undefined) {
             ctx.fillStyle = this.getCssProperty(
                 renderer, '--connector-scoped-color'
             );
@@ -1547,9 +1552,9 @@ export class ScopeNode extends SDFGNode {
                 SDFV.SCOPE_LOD, SDFV.DEFAULT_MAX_FONTSIZE, 0.7,
                 SDFV.DEFAULT_FAR_FONT_MULTIPLIER, true,
                 TextVAlign.BOTTOM, TextHAlign.RIGHT, {
-                    bottom: 2.0,
-                    right: this.height,
-                }
+                bottom: 2.0,
+                right: this.height,
+            }
             );
     }
 
@@ -1588,9 +1593,9 @@ export class ScopeNode extends SDFGNode {
                 attrs = entry.attributes;
         }
 
-        let label = attrs.schedule;
+        let label = attrs.schedule ?? 'Default';
         try {
-            label = this.schedule_label_dict[attrs.schedule];
+            label = this.schedule_label_dict[label];
         } catch (_err) {
         }
 
@@ -1622,7 +1627,7 @@ export class ScopeNode extends SDFGNode {
 
         if (this instanceof ConsumeEntry || this instanceof ConsumeExit) {
             result += sdfg_consume_elem_to_string(
-                attrs.num_pes, renderer.view_settings()
+                attrs.num_pes ?? 1, renderer.view_settings()
             );
         } else {
             for (let i = 0; i < attrs.params.length; ++i)
@@ -1663,7 +1668,7 @@ export class ScopeNode extends SDFGNode {
         result += '[';
         if (this instanceof ConsumeEntry || this instanceof ConsumeExit) {
             result += attrs.pe_index + '=' + sdfg_consume_elem_to_string(
-                attrs.num_pes, renderer.view_settings()
+                attrs.num_pes ?? 1, renderer.view_settings()
             );
         } else {
             for (let i = 0; i < attrs.params.length; ++i) {
@@ -1796,9 +1801,9 @@ export class Tasklet extends SDFGNode {
         const lang = this.attributes().code.language?.toLowerCase() || 'python';
         const code = this.attributes().code.string_data;
 
-        const sdfgSymbols = Object.keys(this.sdfg.attributes.symbols);
-        const inConnectors = Object.keys(this.attributes().in_connectors);
-        const outConnectors = Object.keys(this.attributes().out_connectors);
+        const sdfgSymbols = Object.keys(this.sdfg.attributes.symbols ?? []);
+        const inConnectors = Object.keys(this.attributes().in_connectors ?? []);
+        const outConnectors = Object.keys(this.attributes().out_connectors ?? []);
 
         const lines = code.split('\n');
         let maxline_len = 0;
@@ -1840,7 +1845,7 @@ export class Tasklet extends SDFGNode {
                         }
                     } else if (token.type.startsWith('number')) {
                         taskletToken.type = TaskletCodeTokenType.Number;
-                    }                        
+                    }
 
                     highlightedLine.push(taskletToken);
                 }
@@ -2143,10 +2148,10 @@ export class NestedSDFG extends SDFGNode {
             const labelsize =
                 this.data.node.attributes.label.length * SDFV.LINEHEIGHT * 0.8;
             const inconnsize = 2 * SDFV.LINEHEIGHT * Object.keys(
-                this.data.node.attributes.in_connectors
+                this.data.node.attributes.in_connectors ?? []
             ).length - SDFV.LINEHEIGHT;
             const outconnsize = 2 * SDFV.LINEHEIGHT * Object.keys(
-                this.data.node.attributes.out_connectors
+                this.data.node.attributes.out_connectors ?? []
             ).length - SDFV.LINEHEIGHT;
             const maxwidth = Math.max(labelsize, inconnsize, outconnsize);
             let maxheight = 2 * SDFV.LINEHEIGHT;
@@ -2280,7 +2285,7 @@ function batchedDrawEdges(
         if (!(graph instanceof State)) {
             if (edge.parent_id !== null) {
                 // WCR edge or dependency edge.
-                if (edge.attributes().wcr !== null || !edge.attributes().data) {
+                if (edge.attributes().wcr || !edge.attributes().data) {
                     deferredEdges.push(edge);
                     return;
                 }

src/utils/sdfg/display.ts

@@ -49,7 +49,7 @@ export function sdfg_property_to_string(
     prop: any,
     settings: any = null
 ): string {
-    if (prop === null) return prop;
+    if (prop === null || prop === undefined) return prop;
     if (typeof prop === 'boolean') {
         if (prop)
             return 'True';

src/utils/sdfg/json_serializer.ts

@@ -8,7 +8,7 @@ export function read_or_decompress(
     json: string | ArrayBuffer
 ): [string, boolean] {
     try {
-        return [gunzipSync(Buffer.from(json as Uint8Array)).toString(), true];
+        return [new TextDecoder().decode(gunzipSync(Buffer.from(json as Uint8Array))), true];
     } catch {
         if (typeof json !== 'string') {
             const enc = new TextDecoder('utf-8');

src/utils/sdfg/sdfg_parser.ts

@@ -37,7 +37,7 @@ export class SDFGParser {
                 // Find symbols used (may be Indices or Range).
                 const mdata = m.attributes.data.attributes.subset;
                 // Check for indices
-                if (mdata.type == 'subsets.Indices') {
+                if (mdata && mdata.type == 'subsets.Indices') {
                     // These are constants or variables.
                     // Reverse to have smallest unit first.
                     const tmp = mdata.indices.map((x: any) => x).reverse();
@@ -47,7 +47,7 @@ export class SDFGParser {
                         depth += 1;
                         syms.push({ var: x, val: null, depth: depth });
                     }
-                } else if (mdata.type == 'subsets.Range') {
+                } else if (mdata && mdata.type == 'subsets.Range') {
                     // These are ranges.
                     // These ranges are not of interest, as they specify what is
                     // copied and don't define new variables.