Skip to content

Commit

Permalink
[Metadata] Unify metadata rendering
Browse files Browse the repository at this point in the history 
This commit unifies rendering of metadata.

ONE-vscode-DCO-1.0-Signed-off-by: s.malakhov <[email protected]>
  • Loading branch information
@stamalakhov
stamalakhov committed May 16, 2023
1 parent 8b05393 commit c2066f9
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 193 deletions.
283 changes: 94 additions & 189 deletions media/MetadataViewer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
* limitations under the License.
*/

let currentConfigType = null;

this.window.addEventListener("message", (event) => {
const message = event.data;
switch (message.command) {
Expand Down Expand Up @@ -51,198 +49,108 @@ function updateMetadataInfo(metadata) {
"codicon"
);

const viewItemContentBox = document.createElement("div");
viewItemContentBox.setAttribute("id", "common-view-content-box");
viewItemContentBox.classList.add("view-item-content-box");
const commonItemContentBox = document.createElement("div");
commonItemContentBox.setAttribute("id", "common-view-content-box");
commonItemContentBox.classList.add("view-item-content-box");

document.body.appendChild(mainViewItemBox);
mainViewItemBox.appendChild(viewItemBox);
viewItemBox.append(viewItemHeaderBox, viewItemContentBox);
viewItemBox.append(viewItemHeaderBox, commonItemContentBox);
viewItemHeaderBox.append(viewItemHeader, viewItemShowButton);

// Pull out the main key.(File Name)
const mainFileName = Object.keys(metadata)[0];

// Store metadata information in variable
const metadataInfo = metadata[mainFileName];

for (const subKey in metadataInfo) {
if (subKey === "operations") {
const viewItemBox = document.createElement("div");
viewItemBox.setAttribute("id", "operations-view-item-box");
viewItemBox.classList.add("view-item-box");

// draw header
const viewItemHeader = document.createElement("div");
viewItemHeader.classList.add("view-item-header");
viewItemHeader.innerText = "Operations";

// add show button image
const showButton = document.createElement("div");
showButton.classList.add(
"view-item-show-button",
"codicon-collapse-all",
"codicon"
);
showButton.setAttribute("id", "operations-view-item-show-button");

// draw a header box to hold headers and showButton
const viewItemHeaderBox = document.createElement("div");
viewItemHeaderBox.classList.add("view-item-header-box");

viewItemHeaderBox.append(viewItemHeader, showButton);
viewItemBox.appendChild(viewItemHeaderBox);
mainViewItemBox.appendChild(viewItemBox);

// draw content box
const viewItemContentBox = document.createElement("div");
viewItemContentBox.classList.add("view-item-content-box");
viewItemContentBox.setAttribute("id", "operations-view-content-box");
viewItemBox.appendChild(viewItemContentBox);

for (const operationsKey in metadataInfo[subKey]) {
if (
Object.prototype.hasOwnProperty.call(
metadataInfo[subKey],
operationsKey
)
) {
metadataDivCreate(
operationsKey,
metadataInfo[subKey][operationsKey],
"operations"
);
}
}
} else if (subKey === "cfg-settings") {
const viewItemBox = document.createElement("div");
viewItemBox.setAttribute("id", "cfg-settings-view-item-box");
viewItemBox.classList.add("view-item-box");

const viewItemHeaderBox = document.createElement("div");
viewItemHeaderBox.classList.add("view-item-header-box");

const viewItemHeader = document.createElement("div");
viewItemHeader.classList.add("view-item-header");
viewItemHeader.innerText = "Config";
const type = typeof metadataInfo[subKey];
if (type === "undefined" || type === "null") {
continue;
}

const showButton = document.createElement("div");
showButton.setAttribute("id", "cfg-settings-view-item-show-button");
showButton.classList.add(
"view-item-show-button",
"codicon-collapse-all",
"codicon"
if (type !== "object") {
// simple type
metadataDivCreate(subKey, metadataInfo[subKey], commonItemContentBox);
} else {
// complex
metadataSectionCreate(
subKey,
metadataInfo[subKey],
mainViewItemBox,
false
);
// showButton.innerText = '-';

viewItemHeaderBox.append(viewItemHeader, showButton);
viewItemBox.appendChild(viewItemHeaderBox);
mainViewItemBox.appendChild(viewItemBox);

const viewItemContentBox = document.createElement("div");
viewItemContentBox.classList.add("view-item-content-box");
viewItemContentBox.setAttribute("id", "cfg-settings-view-content-box");
viewItemBox.appendChild(viewItemContentBox);

const oneccInfo = metadataInfo[subKey];

// Store values that onecc`s value is true
const oneccInfoList = [];

for (const configKey in oneccInfo) {
if (Object.prototype.hasOwnProperty.call(oneccInfo, configKey)) {
const viewItemSubHeaderBox = document.createElement("div");
viewItemSubHeaderBox.classList.add("view-item-header-box");

const viewItemSubHeader = document.createElement("div");
viewItemSubHeader.innerText = `[${configKey}]`;
viewItemSubHeader.classList.add("view-item-sub-header");
}
}

const showButton = document.createElement("div");
showButton.innerText = `-`;
showButton.classList.add("view-item-show-button");
showButton.style.fontSize = "20px";
showButton.setAttribute("id", `${configKey}-view-item-show-button`);
showButtonClickEvent();
}

viewItemSubHeaderBox.append(viewItemSubHeader, showButton);
viewItemContentBox.appendChild(viewItemSubHeaderBox);
function metadataSectionCreate(sectionKey, section, parentBox, sub) {
const viewItemBox = document.createElement("div");
viewItemBox.setAttribute("id", `${sectionKey}-view-item-box`);
viewItemBox.classList.add("view-item-box");

const subContentBox = document.createElement("div");
subContentBox.classList.add("sub-view-item-content-box");
subContentBox.setAttribute("id", `${configKey}-sub-view-content-box`);
// draw header
const viewItemHeader = document.createElement("div");
if (sub) {
viewItemHeader.innerText = `[${sectionKey}]`;
viewItemHeader.classList.add("view-item-sub-header");
} else {
viewItemHeader.innerText = sectionKey;
viewItemHeader.classList.add("view-item-header");
}

viewItemContentBox.appendChild(subContentBox);
// add show button image
const showButton = document.createElement("div");
if (sub) {
showButton.innerText = `-`;
showButton.classList.add("view-item-show-button");
showButton.style.fontSize = "20px";
showButton.setAttribute("id", `${sectionKey}-view-item-show-button`);
} else {
showButton.classList.add(
"view-item-show-button",
"codicon-collapse-all",
"codicon"
);
showButton.setAttribute("id", `${sectionKey}-view-item-show-button`);
}

// Save the current key to use as id
currentConfigType = configKey;
// draw a header box to hold headers and showButton
const viewItemHeaderBox = document.createElement("div");
viewItemHeaderBox.classList.add("view-item-header-box");

if (configKey === "onecc") {
// Handle if no onecc information is available
const viewItemContent = document.createElement("div");
viewItemContent.innerText = "There is no config information...";
viewItemBox.appendChild(viewItemContent);
viewItemContent.classList.add("view-item-info-content");
viewItemHeaderBox.append(viewItemHeader, showButton);
viewItemBox.appendChild(viewItemHeaderBox);
parentBox.appendChild(viewItemBox);
// draw content box
const viewItemContentBox = document.createElement("div");
if (sub) {
viewItemContentBox.classList.add("sub-view-item-content-box");
viewItemContentBox.setAttribute("id", `${sectionKey}-sub-view-content-box`);
} else {
viewItemContentBox.classList.add("view-item-content-box");
viewItemContentBox.setAttribute("id", `${sectionKey}-view-content-box`);
}

for (const oneccSubkey in oneccInfo[configKey]) {
if (oneccInfo[configKey][oneccSubkey]) {
oneccInfoList.push(oneccSubkey);
viewItemBox.appendChild(viewItemContentBox);

// If you have cfg information, delete the no info statement
viewItemContent?.remove();
metadataDivCreate(
oneccSubkey,
oneccInfo[configKey][oneccSubkey],
"cfg-settings"
);
}
}
} else {
if (oneccInfoList.includes(configKey)) {
viewItemSubHeader.style.marginTop = "15px";
for (const oneccSubkey in oneccInfo[configKey]) {
if (
Object.prototype.hasOwnProperty.call(
oneccInfo[configKey],
oneccSubkey
)
) {
metadataDivCreate(
oneccSubkey,
oneccInfo[configKey][oneccSubkey],
"cfg-settings"
);
}
}
} else {
viewItemSubHeader?.remove();
}
}
}
//iterate properties
for (const key in section) {
if (Object.prototype.hasOwnProperty.call(section, key)) {
//if data is just an array or simple object just add it
if (Array.isArray(section[key]) || typeof section[key] !== "object") {
metadataDivCreate(key, section[key], viewItemContentBox);
} else {
// recurse
metadataSectionCreate(key, section[key], viewItemContentBox, true);
}
} else {
// Other common metadata information
metadataDivCreate(subKey, metadataInfo[subKey], "common");
}
}
showButtonClickEvent();
}

function metadataDivCreate(subKey, value, type) {
let viewItemContentBox = null;
let subContentBox = null;
if (type === "common") {
viewItemContentBox = document.getElementById("common-view-content-box");
} else if (type === "operations") {
viewItemContentBox = document.getElementById("operations-view-content-box");
} else if (type === "cfg-settings") {
viewItemContentBox = document.getElementById(
"cfg-settings-view-content-box"
);
subContentBox = document.getElementById(
`${currentConfigType}-sub-view-content-box`
);
}

function metadataDivCreate(subKey, value, viewItemContentBox) {
const viewItemContent = document.createElement("div");
viewItemContent.classList.add("view-item-content");
const viewItemName = document.createElement("div");
Expand All @@ -251,23 +159,25 @@ function metadataDivCreate(subKey, value, type) {

// If the value of the key is the object structure again, turn the repetition door.
if (typeof value === "object" && value !== null) {
const viewItemValueList = document.createElement("div");
viewItemValueList.classList.add("view-item-value-list");

for (const key in value) {
if (Object.prototype.hasOwnProperty.call(value, key)) {
const viewItemValue = document.createElement("div");
viewItemValue.classList.add("view-item-value");
viewItemValue.innerText = `${value[key]}`;
// if the size of the viewer is smaller, Set items to be smaller in proportion
viewItemValue.style.width = "auto";
viewItemValue.classList.add("margin-bottom-border-thin-gray");
viewItemValueList.appendChild(viewItemValue);
if (Array.isArray(value)) {
const viewItemValueList = document.createElement("div");
viewItemValueList.classList.add("view-item-value-list");

for (const key in value) {
if (Object.prototype.hasOwnProperty.call(value, key)) {
const viewItemValue = document.createElement("div");
viewItemValue.classList.add("view-item-value");
viewItemValue.innerText = `${value[key]}`;
// if the size of the viewer is smaller, Set items to be smaller in proportion
viewItemValue.style.width = "auto";
viewItemValue.classList.add("margin-bottom-border-thin-gray");
viewItemValueList.appendChild(viewItemValue);
}
}
}

viewItemContent.append(viewItemName, viewItemValueList);
viewItemContent.classList.add("aline-items-baseline");
viewItemContent.append(viewItemName, viewItemValueList);
viewItemContent.classList.add("aline-items-baseline");
}
} else {
// If it's a simple string, it's shown on the screen right away.
const viewItemValue = document.createElement("div");
Expand All @@ -276,12 +186,7 @@ function metadataDivCreate(subKey, value, type) {
viewItemContent.append(viewItemName, viewItemValue);
}

if (type === "cfg-settings") {
viewItemContent.style.marginBottom = "1px";
subContentBox.appendChild(viewItemContent);
} else {
viewItemContentBox.appendChild(viewItemContent);
}
viewItemContentBox.appendChild(viewItemContent);
}

function showButtonClickEvent() {
Expand Down
8 changes: 4 additions & 4 deletions src/MetadataViewer/example/MetadataExample.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ TODO Replace this sample logic into real logic
*/
export function getMetadata(_path: any) {
return {
/* eslint-disable */
"test.log": {
"file-extension": "log",
"created-time": new Date().toLocaleString(),
Expand All @@ -28,12 +29,10 @@ export function getMetadata(_path: any) {

"toolchain-version": "toolchain v1.3.0",
"onecc-version": "1.20.0",
operations: { "op-total": 50, ops: ["conv2d", "relu", "conv", "spp"] },
"cfg-settings": {
Operations: { "op-total": 50, ops: ["conv2d", "relu", "conv", "spp"] },
Config: {
onecc: {
"one-import-tf": true,
"one-import-tflite": false,
"one-import-onnx": false,
"one-quantize": true,
},
"one-import-tf": {
Expand All @@ -51,5 +50,6 @@ export function getMetadata(_path: any) {
},
},
},
/* eslint-enable */
};
}

0 comments on commit c2066f9

Please sign in to comment.