From 0449497a1199552c41538eff3ffc84d9322f9822 Mon Sep 17 00:00:00 2001
From: Philipp Schaad <philipp.schaad@inf.ethz.ch>
Date: Thu, 29 Jun 2023 13:40:32 +0200
Subject: [PATCH] Minimap and info tray improvements (#222)

---
 media/components/sdfv/index.html              |   4 +-
 packages/sdfv                                 |   2 +-
 src/components/sdfg_editor/common.ts          |   4 +-
 .../components/sdfv/utils/attributes_table.ts | 173 ++++++++++++++++--
 .../components/sdfv/vscode_sdfv.css           |   9 +-
 src/webclients/components/sdfv/vscode_sdfv.ts |  94 ++++++++--
 6 files changed, 245 insertions(+), 41 deletions(-)

diff --git a/media/components/sdfv/index.html b/media/components/sdfv/index.html
index 4404432..7c65efd 100644
--- a/media/components/sdfv/index.html
+++ b/media/components/sdfv/index.html
@@ -164,8 +164,8 @@
                 </div>
             </div>
         </div>
-        <div id="expand-info-btn" title="Expand Tray" class="expand-info-btn-top">
-            <span><i class="material-icons">menu_open</i></span>
+        <div id="expand-info-btn" title="Expand Tray">
+            <span><i class="material-symbols-outlined">right_panel_open</i></span>
         </div>
     </div>
 
diff --git a/packages/sdfv b/packages/sdfv
index 6daba21..248a55c 160000
--- a/packages/sdfv
+++ b/packages/sdfv
@@ -1 +1 @@
-Subproject commit 6daba2113c3b1886fc3c9b73ea49d33e01be1350
+Subproject commit 248a55c8ab43f7f0e431c045fbfd50579a9da3ae
diff --git a/src/components/sdfg_editor/common.ts b/src/components/sdfg_editor/common.ts
index e91ae1f..fe75d32 100644
--- a/src/components/sdfg_editor/common.ts
+++ b/src/components/sdfg_editor/common.ts
@@ -107,8 +107,8 @@ export abstract class SDFGEditorBase extends BaseComponent {
                 'offcanvas offcanvas-bottom'
             );
             baseHtml = baseHtml.replace(
-                'expand-info-btn-top',
-                'expand-info-btn-bottom'
+                'right_panel_open',
+                'bottom_panel_open'
             );
             baseHtml = baseHtml.replace(
                 'id="layout-toggle-btn" class="vertical"',
diff --git a/src/webclients/components/sdfv/utils/attributes_table.ts b/src/webclients/components/sdfv/utils/attributes_table.ts
index a186f80..b137949 100644
--- a/src/webclients/components/sdfv/utils/attributes_table.ts
+++ b/src/webclients/components/sdfv/utils/attributes_table.ts
@@ -1130,6 +1130,25 @@ export async function attributeTablePutEntry(
     };
 }
 
+
+const ATTR_TABLE_HIDDEN_ATTRIBUTES = [
+    'layout',
+    'sdfg',
+    'sdfg_id',
+    'state_id',
+    'expr_index',
+    'type',
+    'transformation',
+    'docstring',
+    'CATEGORY',
+    'is_collapsed',
+    'orig_sdfg',
+    'position',
+    'transformation_hist',
+    'symbols',
+];
+
+
 export function generateAttributesTable(
     elem: any | undefined, xform: any | undefined, root: JQuery<HTMLElement>
 ): void {
@@ -1166,12 +1185,7 @@ export function generateAttributesTable(
         let sortedAttributes: { [key: string]: any } = {};
         Object.keys(attributes).forEach(k => {
             const val = attributes[k];
-            if (k === 'layout' || k === 'sdfg' || k === 'sdfg_id' ||
-                k === 'state_id' || k === 'expr_index' || k === 'type' ||
-                k === 'transformation' || k === 'docstring' ||
-                k === 'CATEGORY' || k === 'is_collapsed' || k === 'orig_sdfg' ||
-                k === 'position' || k === 'transformation_hist' ||
-                k.startsWith('_'))
+            if (ATTR_TABLE_HIDDEN_ATTRIBUTES.includes(k) || k.startsWith('_'))
                 return;
 
             if (metadata && metadata[k]) {
@@ -1320,6 +1334,133 @@ export function generateAttributesTable(
     }
 }
 
+export function appendSymbolsTable(
+    root: JQuery<HTMLElement>, symbols: Record<string, string>, sdfg: JsonSDFG
+): void {
+    const symbolsTableBaseContainer = $('<div>', {
+        'class': 'container-fluid attr-table-base-container',
+    }).appendTo(root);
+
+    const catRow = $('<div>', {
+        'class': 'row attr-table-cat-row',
+    }).appendTo(symbolsTableBaseContainer);
+    const catContainer = $('<div>', {
+        'class': 'col-12 attr-table-cat-container',
+    }).appendTo(catRow);
+    const catToggleBtn = $('<button>', {
+        'class': 'attr-cat-toggle-btn active',
+        'type': 'button',
+        'text': 'Symbols',
+        'data-bs-toggle': 'collapse',
+        'data-bs-target': '#info-table-symbols-containers',
+        'aria-expanded': 'false',
+        'aria-controls': 'info-table-symbols-containers',
+    }).appendTo(catContainer);
+    $('<i>', {
+        'class': 'attr-cat-toggle-btn-indicator material-icons',
+        'text': 'expand_less'
+    }).appendTo(catToggleBtn);
+
+    const attrTable = $('<div>', {
+        'class': 'container-fluid attr-table collapse show',
+        'id': 'info-table-symbols-containers',
+    }).appendTo(catContainer);
+    attrTable.on('hide.bs.collapse', () => {
+        catToggleBtn.removeClass('active');
+    });
+    attrTable.on('show.bs.collapse', () => {
+        catToggleBtn.addClass('active');
+    });
+
+    VSCodeSDFV.getInstance().getMetaDict().then(metaDict => {
+        const attrMeta = metaDict['__reverse_type_lookup__']['typeclass'];
+        for (const symbol in symbols) {
+            const symType = symbols[symbol];
+
+            const row = $('<div>', {
+                class: 'row attr-table-row',
+            }).appendTo(attrTable);
+            attributeTablePutEntry(
+                symbol, symType, attrMeta, symbols, undefined,
+                undefined, row, true, true, true, undefined, undefined, true
+            ).then(res => {
+                if (res.deleteBtn)
+                    res.deleteBtn.on('click', () => {
+                        delete symbols[symbol];
+                        row.remove();
+                        const sdfg = VSCodeRenderer.getInstance()?.get_sdfg();
+                        if (sdfg)
+                            vscodeWriteGraph(sdfg);
+                    });
+            });
+        }
+
+        const addItemButtonRow = $('<div>', {
+            'class': 'row',
+        }).appendTo(attrTable);
+        $('<i>', {
+            'class': 'material-icons property-add-row-btn',
+            'text': 'playlist_add',
+            'title': 'Add symbol',
+            'click': () => {
+                const nContModalRet = createSingleUseModal(
+                    'New Symbol Name', true, ''
+                );
+
+                const nameInput = $('<input>', {
+                    type: 'text',
+                }).appendTo($('<div>', {
+                    class: 'container-fluid',
+                }).appendTo(nContModalRet.body));
+
+                nContModalRet.confirmBtn?.on('click', () => {
+                    const nameVal = nameInput.val();
+
+                    if (nameVal && nameVal !== '' &&
+                        typeof nameVal === 'string') {
+                        nContModalRet.modal.modal('hide');
+
+                        const defaultNewType = 'int32';
+                        const row = $('<div>', {
+                            class: 'row attr-table-row',
+                        });
+                        addItemButtonRow.before(row);
+                        attributeTablePutEntry(
+                            nameVal, defaultNewType, attrMeta, symbols,
+                            undefined, undefined, row, true, true, true,
+                            undefined, undefined, true
+                        ).then(newProp => {
+                            if (newProp) {
+                                if (newProp.deleteBtn)
+                                    newProp.deleteBtn.on('click', () => {
+                                        if (newProp.key) {
+                                            delete symbols[newProp.key];
+                                        row.remove();
+                                        const sdfg = VSCodeRenderer
+                                            .getInstance()?.get_sdfg();
+                                        if (sdfg)
+                                            vscodeWriteGraph(sdfg);
+                                    }
+                                });
+                            }
+                            const sdfg =
+                                VSCodeRenderer.getInstance()?.get_sdfg();
+                            if (sdfg)
+                                vscodeWriteGraph(sdfg);
+                        });
+
+                        symbols[nameVal] = defaultNewType;
+                    }
+                });
+
+                nContModalRet.modal.modal('show');
+            },
+        }).appendTo($('<div>', {
+            'class': 'col-2',
+        }).appendTo(addItemButtonRow));
+    });
+}
+
 export function appendDataDescriptorTable(
     root: JQuery<HTMLElement>,
     descriptors: { [key: string]: { type: string, attributes: any } },
@@ -1344,6 +1485,10 @@ export function appendDataDescriptorTable(
         'aria-expanded': 'false',
         'aria-controls': 'info-table-data-containers',
     }).appendTo(catContainer);
+    $('<i>', {
+        'class': 'attr-cat-toggle-btn-indicator material-icons',
+        'text': 'expand_less'
+    }).appendTo(catToggleBtn);
 
     const attrTable = $('<div>', {
         'class': 'container-fluid attr-table collapse show',
@@ -1406,7 +1551,7 @@ export function appendDataDescriptorTable(
                 if (res.deleteBtn)
                     res.deleteBtn.on('click', () => {
                         delete descriptors[descriptor];
-
+                        row.remove();
                         const sdfg = VSCodeRenderer.getInstance()?.get_sdfg();
                         if (sdfg)
                             vscodeWriteGraph(sdfg);
@@ -1414,12 +1559,9 @@ export function appendDataDescriptorTable(
             });
         }
 
-        const addItemRowContainer = $('<div>', {
-            'class': 'container-fluid attr-table',
-        }).appendTo(catContainer);
         const addItemButtonRow = $('<div>', {
             'class': 'row',
-        }).appendTo(addItemRowContainer);
+        }).appendTo(attrTable);
         $('<i>', {
             'class': 'material-icons property-add-row-btn',
             'text': 'playlist_add',
@@ -1465,7 +1607,8 @@ export function appendDataDescriptorTable(
 
                         const row = $('<div>', {
                             class: 'row attr-table-row',
-                        }).appendTo(attrTable);
+                        });
+                        addItemButtonRow.before(row);
                         attributeTablePutEntry(
                             nameVal, defaultValues, newMetaType, descriptors,
                             undefined, undefined, row, true, true, true,
@@ -1476,7 +1619,7 @@ export function appendDataDescriptorTable(
                                     newProp.deleteBtn.on('click', () => {
                                         if (newProp.key) {
                                             delete descriptors[newProp.key];
-
+                                        row.remove();
                                         const sdfg = VSCodeRenderer
                                             .getInstance()?.get_sdfg();
                                         if (sdfg)
@@ -1484,6 +1627,10 @@ export function appendDataDescriptorTable(
                                     }
                                 });
                             }
+                            const sdfg =
+                                VSCodeRenderer.getInstance()?.get_sdfg();
+                            if (sdfg)
+                                vscodeWriteGraph(sdfg);
                         });
 
                         descriptors[nameVal] = defaultValues;
diff --git a/src/webclients/components/sdfv/vscode_sdfv.css b/src/webclients/components/sdfv/vscode_sdfv.css
index b5ecbc3..b432c35 100644
--- a/src/webclients/components/sdfv/vscode_sdfv.css
+++ b/src/webclients/components/sdfv/vscode_sdfv.css
@@ -331,14 +331,6 @@ pre.code {
   cursor: pointer;
   position: absolute;
   margin: .4rem;
-}
-
-#expand-info-btn.expand-info-btn-top {
-  top: 0;
-  right: 0;
-}
-
-#expand-info-btn.expand-info-btn-bottom {
   bottom: 0;
   right: 0;
 }
@@ -376,6 +368,7 @@ pre.code {
 .attr-cat-toggle-btn>.attr-cat-toggle-btn-indicator {
   float: right;
   transition: all .5s;
+  transform: rotate(90deg);
 }
 
 .attr-cat-toggle-btn.active>.attr-cat-toggle-btn-indicator {
diff --git a/src/webclients/components/sdfv/vscode_sdfv.ts b/src/webclients/components/sdfv/vscode_sdfv.ts
index de1db6b..fd35675 100644
--- a/src/webclients/components/sdfv/vscode_sdfv.ts
+++ b/src/webclients/components/sdfv/vscode_sdfv.ts
@@ -78,6 +78,7 @@ import {
 } from './transformation/transformation';
 import {
     appendDataDescriptorTable,
+    appendSymbolsTable,
     generateAttributesTable
 } from './utils/attributes_table';
 import {
@@ -131,8 +132,8 @@ export class VSCodeSDFV extends SDFV {
 
     private infoDragBar?: JQuery<HTMLElement>;
     private draggingInfoBar: boolean = false;
-    private infoBarLastVertWidth: string = '250px';
-    private infoBarLastHorHeight: string = '200px';
+    private infoBarLastVertWidth: number = 350;
+    private infoBarLastHorHeight: number = 200;
 
     private monaco: any | null = null;
     private origSDFG: JsonSDFG | null = null;
@@ -185,8 +186,10 @@ export class VSCodeSDFV extends SDFV {
                 if (documentHeight) {
                     const newHeight = documentHeight - e.originalEvent.y;
                     if (newHeight < documentHeight) {
-                        this.infoBarLastHorHeight = newHeight.toString() + 'px';
-                        this.infoContainer?.height(this.infoBarLastHorHeight);
+                        this.infoBarLastHorHeight = newHeight;
+                        this.infoContainer?.height(
+                            this.infoBarLastHorHeight.toString() + 'px'
+                        );
                     }
                 }
             }
@@ -197,13 +200,15 @@ export class VSCodeSDFV extends SDFV {
                 if (documentWidth) {
                     const newWidth = documentWidth - e.originalEvent.x;
                     if (newWidth < documentWidth) {
-                        this.infoBarLastVertWidth = newWidth.toString() + 'px';
-                        this.infoContainer?.width(this.infoBarLastVertWidth);
+                        this.infoBarLastVertWidth = newWidth;
+                        this.infoContainer?.width(newWidth.toString() + 'px');
 
-                        if (SDFVSettings.minimap)
+                        if (SDFVSettings.minimap) {
+                            $('#minimap').css('transition', '');
                             $('#minimap').css(
                                 'right', (newWidth + 5).toString() + 'px'
                             );
+                        }
                     }
                 }
             }
@@ -231,27 +236,36 @@ export class VSCodeSDFV extends SDFV {
                 this.infoContainer?.addClass('offcanvas-bottom');
                 this.infoDragBar?.removeClass('gutter-vertical');
                 this.infoDragBar?.addClass('gutter-horizontal');
-                this.expandInfoBtn?.removeClass('expand-info-btn-top');
-                this.expandInfoBtn?.addClass('expand-info-btn-bottom');
+                this.expandInfoBtn?.html(
+                    '<span><i class="material-symbols-outlined">' +
+                        'bottom_panel_open</i></span>'
+                );
                 $(document).off('mousemove', infoChangeWidthHandler);
                 $(document).on('mousemove', infoChangeHeightHandler);
                 this.infoContainer?.width('100%');
-                this.infoContainer?.height(this.infoBarLastHorHeight);
+                this.infoContainer?.height(
+                    this.infoBarLastHorHeight.toString() + 'px'
+                );
             } else {
                 this.infoContainer?.removeClass('offcanvas-bottom');
                 this.infoContainer?.addClass('offcanvas-end');
                 this.infoDragBar?.removeClass('gutter-horizontal');
                 this.infoDragBar?.addClass('gutter-vertical');
-                this.expandInfoBtn?.removeClass('expand-info-btn-bottom');
-                this.expandInfoBtn?.addClass('expand-info-btn-top');
+                this.expandInfoBtn?.html(
+                    '<span><i class="material-symbols-outlined">' +
+                        'right_panel_open</i></span>'
+                );
                 $(document).off('mousemove', infoChangeHeightHandler);
                 $(document).on('mousemove', infoChangeWidthHandler);
                 this.infoContainer?.height('100%');
-                this.infoContainer?.width(this.infoBarLastVertWidth);
+                this.infoContainer?.width(
+                    this.infoBarLastVertWidth.toString() + 'px'
+                );
             }
 
             infoBoxCheckStacking(this.infoContainer);
             infoBoxCheckUncoverTopBar(this.infoContainer, this.topBar);
+            this.checkTrayCoversMinimap();
 
             SDFVComponent.getInstance().invoke(
                 'setSplitDirection', [SPLIT_DIRECTION]
@@ -268,15 +282,45 @@ export class VSCodeSDFV extends SDFV {
             this.expandInfoBtn?.show();
             this.infoContainer?.removeClass('show');
             VSCodeSDFV.getInstance().infoTrayExplicitlyHidden = true;
+            this.checkTrayCoversMinimap(true);
         });
         this.expandInfoBtn?.on('click', () => {
             this.expandInfoBtn?.hide();
             infoBoxCheckUncoverTopBar(this.infoContainer, this.topBar);
             this.infoContainer?.addClass('show');
             VSCodeSDFV.getInstance().infoTrayExplicitlyHidden = false;
+            this.checkTrayCoversMinimap(true);
         });
     }
 
+    private checkTrayCoversMinimap(animate: boolean = false): void {
+        if (SDFVSettings.minimap) {
+            if (SPLIT_DIRECTION === 'vertical' && this.infoBarLastVertWidth &&
+                !this.infoTrayExplicitlyHidden) {
+                try {
+                    const pixels = this.infoBarLastVertWidth + 5;
+                    if (animate)
+                        $('#minimap').css(
+                            'transition', 'right 0.3s ease-in-out'
+                        );
+                    else
+                        $('#minimap').css('transition', '');
+                    $('#minimap').css('right', pixels.toString() + 'px');
+                } catch (e) {
+                    console.warn(e);
+                }
+            } else {
+                if (animate)
+                    $('#minimap').css(
+                        'transition', 'right 0.3s ease-in-out'
+                    );
+                else
+                    $('#minimap').css('transition', '');
+                $('#minimap').css('right', '5px');
+            }
+        }
+    }
+
     public initSearch(): void {
         const caseBtn = $('#search-case-sensitive-btn');
         const searchInput = $('#search');
@@ -350,7 +394,17 @@ export class VSCodeSDFV extends SDFV {
             const infoBox = $('#info-container');
             infoBoxCheckUncoverTopBar(infoBox, $('#top-bar'));
             infoBox.addClass('show');
+            this.checkTrayCoversMinimap(true);
         }
+
+        if (SPLIT_DIRECTION === 'vertical')
+            this.infoContainer?.width(
+                this.infoBarLastVertWidth.toString() + 'px'
+            );
+        else
+            this.infoContainer?.height(
+                this.infoBarLastHorHeight.toString() + 'px'
+            );
     }
 
     /**
@@ -729,17 +783,27 @@ export class VSCodeSDFV extends SDFV {
                     );
                 }
             } else if (elem instanceof SDFG) {
-                if (elem.data && elem.data.attributes)
+                if (elem.data?.attributes) {
                     appendDataDescriptorTable(
                         contents, elem.data.attributes._arrays, elem.data
                     );
+                    appendSymbolsTable(
+                        contents, elem.data.attributes.symbols, elem.data
+                    );
+                }
             } else if (elem instanceof NestedSDFG) {
-                if (elem.data && elem.data.node.attributes)
+                if (elem.data?.node?.attributes) {
                     appendDataDescriptorTable(
                         contents,
                         elem.data.node.attributes.sdfg.attributes._arrays,
                         elem.data.node.attributes.sdfg
                     );
+                    appendSymbolsTable(
+                        contents,
+                        elem.data.node.attributes.sdfg.attributes.symbols,
+                        elem.data.node.attributes.sdfg
+                    );
+                }
             }
 
             infoBoxCheckStacking($('#info-container'));