Skip to content

Commit

Permalink
Minimap and info tray improvements (#222)
Browse files Browse the repository at this point in the history
  • Loading branch information
@phschaad
phschaad authored Jun 29, 2023
1 parent 18a82b6 commit 0449497
Show file tree
Hide file tree
Showing 6 changed files with 245 additions and 41 deletions.
4 changes: 2 additions & 2 deletions media/components/sdfv/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion packages/sdfv
Submodule sdfv updated 19 files
+1 −0 .gitignore
+ − dist/0c35d18bf06992036b69.woff2
+ − dist/219aa9140e099e6c72ed.woff2
+ − dist/3a4004a46a653d4b2166.woff
+ − dist/3baa5b8f3469222b822d.woff
+ − dist/49fd0b03628bd34cee24.woff2
+ − dist/4d73cb90e394b34b7670.woff
+ − dist/4ef4218c522f1eb6b5b1.woff2
+ − dist/5d681e2edae8c60630db.woff
+ − dist/6a6dcf1589ce1dc14fa5.woff2
+ − dist/6f420cf17cc0d7676fad.woff2
+ − dist/c380809fd3677d7d6903.woff2
+ − dist/ee62cb535c36a1bc4ca7.woff2
+ − dist/f882956fd323fd322f31.woff
+0 −9 dist/sdfv.js
+0 −223 dist/sdfv.js.LICENSE.txt
+0 −1 dist/sdfv.js.map
+107 −14 src/renderer/renderer.ts
+1 −1 src/sdfv.ts
4 changes: 2 additions & 2 deletions src/components/sdfg_editor/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"',
Expand Down
173 changes: 160 additions & 13 deletions src/webclients/components/sdfv/utils/attributes_table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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]) {
Expand Down Expand Up @@ -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 } },
Expand All @@ -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',
Expand Down Expand Up @@ -1406,20 +1551,17 @@ 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);
});
});
}

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',
Expand Down Expand Up @@ -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,
Expand All @@ -1476,14 +1619,18 @@ export function appendDataDescriptorTable(
newProp.deleteBtn.on('click', () => {
if (newProp.key) {
delete descriptors[newProp.key];

row.remove();
const sdfg = VSCodeRenderer
.getInstance()?.get_sdfg();
if (sdfg)
vscodeWriteGraph(sdfg);
}
});
}
const sdfg =
VSCodeRenderer.getInstance()?.get_sdfg();
if (sdfg)
vscodeWriteGraph(sdfg);
});

descriptors[nameVal] = defaultValues;
Expand Down
9 changes: 1 addition & 8 deletions src/webclients/components/sdfv/vscode_sdfv.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit 0449497

Please sign in to comment.