Skip to content

Commit c2066f9

Browse files
stamalakhovstamalakhov
committed
[Metadata] Unify metadata rendering
This commit unifies rendering of metadata. ONE-vscode-DCO-1.0-Signed-off-by: s.malakhov <[email protected]>
1 parent 8b05393 commit c2066f9

File tree

2 files changed

+98
-193
lines changed

2 files changed

+98
-193
lines changed

‎media/MetadataViewer/index.js‎

Lines changed: 94 additions & 189 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@
1414
* limitations under the License.
1515
*/
1616

17-
let currentConfigType = null;
18-
1917
this.window.addEventListener("message", (event) => {
2018
const message = event.data;
2119
switch (message.command) {
@@ -51,198 +49,108 @@ function updateMetadataInfo(metadata) {
5149
"codicon"
5250
);
5351

54-
const viewItemContentBox = document.createElement("div");
55-
viewItemContentBox.setAttribute("id", "common-view-content-box");
56-
viewItemContentBox.classList.add("view-item-content-box");
52+
const commonItemContentBox = document.createElement("div");
53+
commonItemContentBox.setAttribute("id", "common-view-content-box");
54+
commonItemContentBox.classList.add("view-item-content-box");
5755

5856
document.body.appendChild(mainViewItemBox);
5957
mainViewItemBox.appendChild(viewItemBox);
60-
viewItemBox.append(viewItemHeaderBox, viewItemContentBox);
58+
viewItemBox.append(viewItemHeaderBox, commonItemContentBox);
6159
viewItemHeaderBox.append(viewItemHeader, viewItemShowButton);
6260

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

6664
// Store metadata information in variable
6765
const metadataInfo = metadata[mainFileName];
68-
6966
for (const subKey in metadataInfo) {
70-
if (subKey === "operations") {
71-
const viewItemBox = document.createElement("div");
72-
viewItemBox.setAttribute("id", "operations-view-item-box");
73-
viewItemBox.classList.add("view-item-box");
74-
75-
// draw header
76-
const viewItemHeader = document.createElement("div");
77-
viewItemHeader.classList.add("view-item-header");
78-
viewItemHeader.innerText = "Operations";
79-
80-
// add show button image
81-
const showButton = document.createElement("div");
82-
showButton.classList.add(
83-
"view-item-show-button",
84-
"codicon-collapse-all",
85-
"codicon"
86-
);
87-
showButton.setAttribute("id", "operations-view-item-show-button");
88-
89-
// draw a header box to hold headers and showButton
90-
const viewItemHeaderBox = document.createElement("div");
91-
viewItemHeaderBox.classList.add("view-item-header-box");
92-
93-
viewItemHeaderBox.append(viewItemHeader, showButton);
94-
viewItemBox.appendChild(viewItemHeaderBox);
95-
mainViewItemBox.appendChild(viewItemBox);
96-
97-
// draw content box
98-
const viewItemContentBox = document.createElement("div");
99-
viewItemContentBox.classList.add("view-item-content-box");
100-
viewItemContentBox.setAttribute("id", "operations-view-content-box");
101-
viewItemBox.appendChild(viewItemContentBox);
102-
103-
for (const operationsKey in metadataInfo[subKey]) {
104-
if (
105-
Object.prototype.hasOwnProperty.call(
106-
metadataInfo[subKey],
107-
operationsKey
108-
)
109-
) {
110-
metadataDivCreate(
111-
operationsKey,
112-
metadataInfo[subKey][operationsKey],
113-
"operations"
114-
);
115-
}
116-
}
117-
} else if (subKey === "cfg-settings") {
118-
const viewItemBox = document.createElement("div");
119-
viewItemBox.setAttribute("id", "cfg-settings-view-item-box");
120-
viewItemBox.classList.add("view-item-box");
121-
122-
const viewItemHeaderBox = document.createElement("div");
123-
viewItemHeaderBox.classList.add("view-item-header-box");
124-
125-
const viewItemHeader = document.createElement("div");
126-
viewItemHeader.classList.add("view-item-header");
127-
viewItemHeader.innerText = "Config";
67+
const type = typeof metadataInfo[subKey];
68+
if (type === "undefined" || type === "null") {
69+
continue;
70+
}
12871

129-
const showButton = document.createElement("div");
130-
showButton.setAttribute("id", "cfg-settings-view-item-show-button");
131-
showButton.classList.add(
132-
"view-item-show-button",
133-
"codicon-collapse-all",
134-
"codicon"
72+
if (type !== "object") {
73+
// simple type
74+
metadataDivCreate(subKey, metadataInfo[subKey], commonItemContentBox);
75+
} else {
76+
// complex
77+
metadataSectionCreate(
78+
subKey,
79+
metadataInfo[subKey],
80+
mainViewItemBox,
81+
false
13582
);
136-
// showButton.innerText = '-';
137-
138-
viewItemHeaderBox.append(viewItemHeader, showButton);
139-
viewItemBox.appendChild(viewItemHeaderBox);
140-
mainViewItemBox.appendChild(viewItemBox);
141-
142-
const viewItemContentBox = document.createElement("div");
143-
viewItemContentBox.classList.add("view-item-content-box");
144-
viewItemContentBox.setAttribute("id", "cfg-settings-view-content-box");
145-
viewItemBox.appendChild(viewItemContentBox);
146-
147-
const oneccInfo = metadataInfo[subKey];
148-
149-
// Store values that onecc`s value is true
150-
const oneccInfoList = [];
151-
152-
for (const configKey in oneccInfo) {
153-
if (Object.prototype.hasOwnProperty.call(oneccInfo, configKey)) {
154-
const viewItemSubHeaderBox = document.createElement("div");
155-
viewItemSubHeaderBox.classList.add("view-item-header-box");
156-
157-
const viewItemSubHeader = document.createElement("div");
158-
viewItemSubHeader.innerText = `[${configKey}]`;
159-
viewItemSubHeader.classList.add("view-item-sub-header");
83+
}
84+
}
16085

161-
const showButton = document.createElement("div");
162-
showButton.innerText = `-`;
163-
showButton.classList.add("view-item-show-button");
164-
showButton.style.fontSize = "20px";
165-
showButton.setAttribute("id", `${configKey}-view-item-show-button`);
86+
showButtonClickEvent();
87+
}
16688

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

170-
const subContentBox = document.createElement("div");
171-
subContentBox.classList.add("sub-view-item-content-box");
172-
subContentBox.setAttribute("id", `${configKey}-sub-view-content-box`);
94+
// draw header
95+
const viewItemHeader = document.createElement("div");
96+
if (sub) {
97+
viewItemHeader.innerText = `[${sectionKey}]`;
98+
viewItemHeader.classList.add("view-item-sub-header");
99+
} else {
100+
viewItemHeader.innerText = sectionKey;
101+
viewItemHeader.classList.add("view-item-header");
102+
}
173103

174-
viewItemContentBox.appendChild(subContentBox);
104+
// add show button image
105+
const showButton = document.createElement("div");
106+
if (sub) {
107+
showButton.innerText = `-`;
108+
showButton.classList.add("view-item-show-button");
109+
showButton.style.fontSize = "20px";
110+
showButton.setAttribute("id", `${sectionKey}-view-item-show-button`);
111+
} else {
112+
showButton.classList.add(
113+
"view-item-show-button",
114+
"codicon-collapse-all",
115+
"codicon"
116+
);
117+
showButton.setAttribute("id", `${sectionKey}-view-item-show-button`);
118+
}
175119

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

179-
if (configKey === "onecc") {
180-
// Handle if no onecc information is available
181-
const viewItemContent = document.createElement("div");
182-
viewItemContent.innerText = "There is no config information...";
183-
viewItemBox.appendChild(viewItemContent);
184-
viewItemContent.classList.add("view-item-info-content");
124+
viewItemHeaderBox.append(viewItemHeader, showButton);
125+
viewItemBox.appendChild(viewItemHeaderBox);
126+
parentBox.appendChild(viewItemBox);
127+
// draw content box
128+
const viewItemContentBox = document.createElement("div");
129+
if (sub) {
130+
viewItemContentBox.classList.add("sub-view-item-content-box");
131+
viewItemContentBox.setAttribute("id", `${sectionKey}-sub-view-content-box`);
132+
} else {
133+
viewItemContentBox.classList.add("view-item-content-box");
134+
viewItemContentBox.setAttribute("id", `${sectionKey}-view-content-box`);
135+
}
185136

186-
for (const oneccSubkey in oneccInfo[configKey]) {
187-
if (oneccInfo[configKey][oneccSubkey]) {
188-
oneccInfoList.push(oneccSubkey);
137+
viewItemBox.appendChild(viewItemContentBox);
189138

190-
// If you have cfg information, delete the no info statement
191-
viewItemContent?.remove();
192-
metadataDivCreate(
193-
oneccSubkey,
194-
oneccInfo[configKey][oneccSubkey],
195-
"cfg-settings"
196-
);
197-
}
198-
}
199-
} else {
200-
if (oneccInfoList.includes(configKey)) {
201-
viewItemSubHeader.style.marginTop = "15px";
202-
for (const oneccSubkey in oneccInfo[configKey]) {
203-
if (
204-
Object.prototype.hasOwnProperty.call(
205-
oneccInfo[configKey],
206-
oneccSubkey
207-
)
208-
) {
209-
metadataDivCreate(
210-
oneccSubkey,
211-
oneccInfo[configKey][oneccSubkey],
212-
"cfg-settings"
213-
);
214-
}
215-
}
216-
} else {
217-
viewItemSubHeader?.remove();
218-
}
219-
}
220-
}
139+
//iterate properties
140+
for (const key in section) {
141+
if (Object.prototype.hasOwnProperty.call(section, key)) {
142+
//if data is just an array or simple object just add it
143+
if (Array.isArray(section[key]) || typeof section[key] !== "object") {
144+
metadataDivCreate(key, section[key], viewItemContentBox);
145+
} else {
146+
// recurse
147+
metadataSectionCreate(key, section[key], viewItemContentBox, true);
221148
}
222-
} else {
223-
// Other common metadata information
224-
metadataDivCreate(subKey, metadataInfo[subKey], "common");
225149
}
226150
}
227-
showButtonClickEvent();
228151
}
229152

230-
function metadataDivCreate(subKey, value, type) {
231-
let viewItemContentBox = null;
232-
let subContentBox = null;
233-
if (type === "common") {
234-
viewItemContentBox = document.getElementById("common-view-content-box");
235-
} else if (type === "operations") {
236-
viewItemContentBox = document.getElementById("operations-view-content-box");
237-
} else if (type === "cfg-settings") {
238-
viewItemContentBox = document.getElementById(
239-
"cfg-settings-view-content-box"
240-
);
241-
subContentBox = document.getElementById(
242-
`${currentConfigType}-sub-view-content-box`
243-
);
244-
}
245-
153+
function metadataDivCreate(subKey, value, viewItemContentBox) {
246154
const viewItemContent = document.createElement("div");
247155
viewItemContent.classList.add("view-item-content");
248156
const viewItemName = document.createElement("div");
@@ -251,23 +159,25 @@ function metadataDivCreate(subKey, value, type) {
251159

252160
// If the value of the key is the object structure again, turn the repetition door.
253161
if (typeof value === "object" && value !== null) {
254-
const viewItemValueList = document.createElement("div");
255-
viewItemValueList.classList.add("view-item-value-list");
256-
257-
for (const key in value) {
258-
if (Object.prototype.hasOwnProperty.call(value, key)) {
259-
const viewItemValue = document.createElement("div");
260-
viewItemValue.classList.add("view-item-value");
261-
viewItemValue.innerText = `${value[key]}`;
262-
// if the size of the viewer is smaller, Set items to be smaller in proportion
263-
viewItemValue.style.width = "auto";
264-
viewItemValue.classList.add("margin-bottom-border-thin-gray");
265-
viewItemValueList.appendChild(viewItemValue);
162+
if (Array.isArray(value)) {
163+
const viewItemValueList = document.createElement("div");
164+
viewItemValueList.classList.add("view-item-value-list");
165+
166+
for (const key in value) {
167+
if (Object.prototype.hasOwnProperty.call(value, key)) {
168+
const viewItemValue = document.createElement("div");
169+
viewItemValue.classList.add("view-item-value");
170+
viewItemValue.innerText = `${value[key]}`;
171+
// if the size of the viewer is smaller, Set items to be smaller in proportion
172+
viewItemValue.style.width = "auto";
173+
viewItemValue.classList.add("margin-bottom-border-thin-gray");
174+
viewItemValueList.appendChild(viewItemValue);
175+
}
266176
}
267-
}
268177

269-
viewItemContent.append(viewItemName, viewItemValueList);
270-
viewItemContent.classList.add("aline-items-baseline");
178+
viewItemContent.append(viewItemName, viewItemValueList);
179+
viewItemContent.classList.add("aline-items-baseline");
180+
}
271181
} else {
272182
// If it's a simple string, it's shown on the screen right away.
273183
const viewItemValue = document.createElement("div");
@@ -276,12 +186,7 @@ function metadataDivCreate(subKey, value, type) {
276186
viewItemContent.append(viewItemName, viewItemValue);
277187
}
278188

279-
if (type === "cfg-settings") {
280-
viewItemContent.style.marginBottom = "1px";
281-
subContentBox.appendChild(viewItemContent);
282-
} else {
283-
viewItemContentBox.appendChild(viewItemContent);
284-
}
189+
viewItemContentBox.appendChild(viewItemContent);
285190
}
286191

287192
function showButtonClickEvent() {

‎src/MetadataViewer/example/MetadataExample.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ TODO Replace this sample logic into real logic
2020
*/
2121
export function getMetadata(_path: any) {
2222
return {
23+
/* eslint-disable */
2324
"test.log": {
2425
"file-extension": "log",
2526
"created-time": new Date().toLocaleString(),
@@ -28,12 +29,10 @@ export function getMetadata(_path: any) {
2829

2930
"toolchain-version": "toolchain v1.3.0",
3031
"onecc-version": "1.20.0",
31-
operations: { "op-total": 50, ops: ["conv2d", "relu", "conv", "spp"] },
32-
"cfg-settings": {
32+
Operations: { "op-total": 50, ops: ["conv2d", "relu", "conv", "spp"] },
33+
Config: {
3334
onecc: {
3435
"one-import-tf": true,
35-
"one-import-tflite": false,
36-
"one-import-onnx": false,
3736
"one-quantize": true,
3837
},
3938
"one-import-tf": {
@@ -51,5 +50,6 @@ export function getMetadata(_path: any) {
5150
},
5251
},
5352
},
53+
/* eslint-enable */
5454
};
5555
}

0 commit comments

Comments
 (0)