Skip to content

Commit

Permalink
Update view.js (#1306)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lutzroeder
lutzroeder committed Jun 24, 2024
1 parent 62e9611 commit a978e2b
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 25 deletions.
13 changes: 8 additions & 5 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@
.sidebar-item-name input { color: #777; font-family: inherit; font-size: inherit; color: inherit; background-color: inherit; width: 100%; text-align: right; margin: 0; padding: 0; border: 0; outline: none; text-overflow: ellipsis; }
.sidebar-item-value-list { margin: 0; margin-left: 105px; overflow: hidden; display: block; padding: 0; }
.sidebar-item-value { font-size: 11px; background-color: #fcfcfc; border-radius: 2px; border: 1px solid #fcfcfc; margin-top: 3px; margin-bottom: 3px; overflow: auto; }
.sidebar-item-value-fill { background-color: #f8f8f8; border: 1px solid #f8f8f8; }
.sidebar-item-value-content { background-color: #f8f8f8; border: 1px solid #f8f8f8; }
.sidebar-item-value b { font-weight: bold; }
.sidebar-item-value code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; overflow: auto; white-space: pre-wrap; word-wrap: break-word; }
.sidebar-item-value pre { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; margin: 0; overflow: auto; white-space: pre; word-wrap: normal; display: block; }
Expand All @@ -210,10 +210,12 @@
.sidebar-item-value-line-content { white-space: pre; word-wrap: normal; overflow: auto; display: block; }
.sidebar-item-value-expander { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; float: right; color: #aaa; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; padding: 4px 6px 4px 4px; }
.sidebar-item-value-expander:hover { color: #333; }
.sidebar-item-value-button { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; float: right; color: #aaa; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; padding: 0 3px 0 3px; }
.sidebar-item-value-button { display: flex; justify-content: center; align-items: center; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; width: 22px; height: 22px; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; color: #aaa; }
.sidebar-item-value-button svg use { fill: #aaa; stroke: #aaa; }
.sidebar-item-value-button:hover svg use { fill: #333; stroke: #333; }
.sidebar-item-select {
.sidebar-item-value-button-tool { float: right; padding-left: 3px; }
.sidebar-item-value-button-context { float: right; }
.sidebar-item-selector {
font-family: inherit; font-size: 12px;
background-color: #fcfcfc; border: #fcfcfc; color: #333;
border-radius: 2px; width: 100%; height: 23px; padding: 3px 12px 3px 7px;
Expand Down Expand Up @@ -258,9 +260,10 @@
.sidebar-closebutton { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #777777; opacity: 1.0; display: block; transition: 0.2s; position: absolute; top: 0; right: 15px; margin-left: 50px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.sidebar-closebutton:hover { color: #ffffff; }
.sidebar-item-value { background-color: #383838; border-color: #383838; }
.sidebar-item-value-fill { background-color: #3e3e3e; border-color: #3e3e3e; }
.sidebar-item-value-content { background-color: #3e3e3e; border-color: #3e3e3e; }
.sidebar-item-value-line-border { border-color: rgba(0, 0, 0, 0.09); }
.sidebar-item-select { background-color: #383838; border: #383838; color: #dfdfdf; background-image: linear-gradient(45deg, transparent 50%, #aaa 50%), linear-gradient(135deg, #aaa 50%, transparent 50%); }
.sidebar-item-selector { background-color: #383838; border: #383838; color: #dfdfdf; background-image: linear-gradient(45deg, transparent 50%, #aaa 50%), linear-gradient(135deg, #aaa 50%, transparent 50%); }
.sidebar-item-disable-select { user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.sidebar-header { border-bottom-color: #2d2d2d; color: #dfdfdf; }
.sidebar-documentation h1 { border-bottom: 1px solid #424242; color: #dfdfdf; }
.sidebar-documentation h2 { color: #dfdfdf; }
Expand Down
50 changes: 30 additions & 20 deletions source/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2660,8 +2660,7 @@ view.SelectView = class extends view.Control {
super(context);
this._elements = [];
this._entries = Array.from(entries);

const selectElement = this.createElement('select', 'sidebar-item-select');
const selectElement = this.createElement('select', 'sidebar-item-selector');
selectElement.addEventListener('change', (e) => {
this.emit('change', this._entries[e.target.selectedIndex][1]);
});
Expand Down Expand Up @@ -2855,7 +2854,7 @@ view.ValueView = class extends view.Control {
const quantization = this._value.quantization;
const location = this._value.location !== undefined;
if (initializer) {
this._element.classList.add('sidebar-item-value-fill');
this._element.classList.add('sidebar-item-value-content');
}
if (type || initializer || quantization || location || name !== undefined) {
this._expander = this.createElement('div', 'sidebar-item-value-expander');
Expand All @@ -2872,6 +2871,7 @@ view.ValueView = class extends view.Control {
}
if (initializer && !attribute) {
const element = this.createElement('div', 'sidebar-item-value-button');
element.classList.add('sidebar-item-value-button-tool');
element.setAttribute('title', 'Show Tensor');
element.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-icon-weight"></use></svg>`;
element.addEventListener('pointerenter', () => this.emit('focus', this._value));
Expand Down Expand Up @@ -2975,7 +2975,7 @@ view.ValueView = class extends view.Control {
this._code('stride', stride.join(','));
}
const tensor = new view.TensorView(this._view, initializer);
const content = tensor.content(this._element);
const content = tensor.content;
const line = this.createElement('div', 'sidebar-item-value-line-border');
line.appendChild(content);
this._element.appendChild(line);
Expand Down Expand Up @@ -3038,37 +3038,47 @@ view.TensorView = class extends view.Control {
}
});
this._element.appendChild(this._expander);
this._container = this.createElement('div', 'sidebar-item-value-line');
this._container.innerHTML = '\u2026';
this._element.appendChild(this._container);
const line = this.createElement('div', 'sidebar-item-value-line');
line.classList.add('sidebar-item-disable-select');
line.innerHTML = '&nbsp';
this._button = this.createElement('div', 'sidebar-item-value-button');
this._button.setAttribute('style', 'float: left;');
this._button.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-icon-weight"></use></svg>`;
this._button.addEventListener('click', () => {
try {
this.toggle();
} catch (error) {
this.error(error, false);
}
});
this._element.appendChild(this._button);
this._element.appendChild(line);
}
return [this._element];
}

toggle() {
if (this._expander) {
while (this._element.childElementCount > 1) {
while (this._element.childElementCount > 3) {
this._element.removeChild(this._element.lastChild);
}
if (this._expander.innerText === '+') {
this._expander.innerText = '-';
try {
this._container.innerHTML = '';
const content = this.content(this._element);
this._container.appendChild(content);
this._element.appendChild(this._container);
const content = this.content;
const container = this.createElement('div', 'sidebar-item-value-line-border');
container.appendChild(content);
this._element.appendChild(container);
} catch (error) {
this.error(error, false);
}
} else {
this._expander.innerText = '+';
this._container.innerHTML = '\u2026';
this._element.appendChild(this._container);
}
}
}

content(element) {
get content() {
const content = this.createElement('pre');
const value = this._value;
const tensor = this._tensor;
Expand All @@ -3084,15 +3094,15 @@ view.TensorView = class extends view.Control {
content.innerHTML = 'Tensor shape is not defined.';
} else {
content.innerHTML = tensor.toString();
if (this._host.save &&
value.type.shape && value.type.shape.dimensions &&
value.type.shape.dimensions.length > 0) {
this._saveButton = this.createElement('div', 'sidebar-item-value-expander');
if (this._host.save && value.type.shape && value.type.shape.dimensions && value.type.shape.dimensions.length > 0) {
this._saveButton = this.createElement('div', 'sidebar-item-value-button');
this._saveButton.classList.add('sidebar-item-value-button-context');
this._saveButton.setAttribute('style', 'float: right;');
this._saveButton.innerHTML = '&#x1F4BE;';
this._saveButton.addEventListener('click', async () => {
await this.export();
});
element.appendChild(this._saveButton);
content.insertBefore(this._saveButton, content.firstChild);
}
}
return content;
Expand Down

0 comments on commit a978e2b

Please sign in to comment.