Skip to content

Commit

Permalink
Update view.js (#1285)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lutzroeder
lutzroeder committed Jun 17, 2024
1 parent 26b7164 commit 1ee1628
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 19 deletions.
22 changes: 15 additions & 7 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-dark { background-color: #f8f8f8; border: 1px solid #f8f8f8; }
.sidebar-item-value-fill { 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 @@ -208,8 +208,11 @@
.sidebar-item-value-line-link:hover { text-decoration: underline; }
.sidebar-item-value-line-border { padding: 4px 6px 4px 6px; border-top: 1px solid rgba(27, 31, 35, 0.05); }
.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 6px; }
.sidebar-item-value-expander:hover { color: #000; }
.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 0 0 3px; }
.sidebar-item-value-button svg use { fill: #aaa; stroke: #aaa; }
.sidebar-item-value-button:hover svg use { fill: #333; stroke: #333; }
.sidebar-item-select {
font-family: inherit; font-size: 12px;
background-color: #fcfcfc; border: #fcfcfc; color: #333;
Expand Down Expand Up @@ -255,7 +258,7 @@
.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-dark { background-color: #3e3e3e; border-color: #3e3e3e; }
.sidebar-item-value-fill { 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-header { border-bottom-color: #2d2d2d; color: #dfdfdf; }
Expand All @@ -272,6 +275,11 @@
.sidebar-find-content li { color: #aaaaaa; }
.sidebar-find-content li:hover { background: #383838; color: #dfdfdf; }
.sidebar-find-content-icon { stroke: #888888; fill: #888888; }
.sidebar-item-value-expander { color: #888; }
.sidebar-item-value-expander:hover { color: #e5e5e5; }
.sidebar-item-value-button { color: #888; }
.sidebar-item-value-button svg use { fill: #888; stroke: #888; }
.sidebar-item-value-button:hover svg use { fill: #e5e5e5; stroke: #e5e5e5; }
}
@media screen and (prefers-reduced-motion: reduce) {
.menu { transition: none; }
Expand All @@ -289,14 +297,14 @@ <h1 id="sidebar-title" class="sidebar-title"></h1>
<div id="sidebar-content" class="sidebar-content"></div>
<svg width="0" height="0" display="none">
<defs>
<symbol id="sidebar-find-icon-node" viewBox="0 0 20 20">
<symbol id="sidebar-icon-node" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="6" stroke-width="2" fill="none"/>
</symbol>
<symbol id="sidebar-find-icon-connection" viewBox="0 0 20 20">
<symbol id="sidebar-icon-connection" viewBox="0 0 20 20">
<line x1="4" y1="10" x2="15" y2="10" stroke-width="2" />
<polyline points="11,6 15,10 11,14" stroke-width="2" />
</symbol>
<symbol id="sidebar-find-icon-weight" viewBox="0 0 20 20">
<symbol id="sidebar-icon-weight" viewBox="0 0 20 20">
<circle cx="5" cy="5" r="1" />
<circle cx="10" cy="5" r="1" />
<circle cx="15" cy="5" r="1" />
Expand Down
34 changes: 22 additions & 12 deletions source/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2479,7 +2479,7 @@ view.NodeSidebar = class extends view.ObjectSidebar {
const type = node.type;
const item = this.addProperty('type', node.type.identifier || node.type.name);
if (type && (type.description || type.inputs || type.outputs || type.attributes)) {
item.action(type.nodes ? '\u0192' : '?', () => {
item.action(type.nodes ? '\u0192' : '?', 'Show Definition', () => {
this.emit('show-documentation', null);
});
}
Expand Down Expand Up @@ -2674,8 +2674,9 @@ view.ValueTextView = class extends view.Control {
}
}

action(text, callback) {
action(text, description, callback) {
this._action = this.createElement('div', 'sidebar-item-value-expander');
this._action.setAttribute('title', description);
this._action.innerHTML = text;
this._action.addEventListener('click', () => {
callback();
Expand Down Expand Up @@ -2807,14 +2808,15 @@ view.ValueView = class extends view.Control {
constructor(context, value, name) {
super(context);
this._value = value;
this._count = 2;
this._element = this.createElement('div', 'sidebar-item-value');
try {
const type = this._value.type;
const initializer = this._value.initializer;
const quantization = this._value.quantization;
const location = this._value.location !== undefined;
if (initializer) {
this._element.classList.add('sidebar-item-value-dark');
this._element.classList.add('sidebar-item-value-fill');
}
if (type || initializer || quantization || location || name !== undefined) {
this._expander = this.createElement('div', 'sidebar-item-value-expander');
Expand All @@ -2829,6 +2831,14 @@ view.ValueView = class extends view.Control {
});
this._element.appendChild(this._expander);
}
if (initializer) {
const element = this.createElement('div', 'sidebar-item-value-button');
element.setAttribute('title', 'Show Tensor');
element.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-icon-weight"></use></svg>`;
element.addEventListener('click', () => this.emit('select', this._value));
this._element.appendChild(element);
this._count = 3;
}
const tensor = name !== undefined;
name = this._value.name ? this._value.name.split('\n').shift() : ''; // custom argument id
this._hasId = name && !tensor ? true : false;
Expand All @@ -2842,10 +2852,8 @@ view.ValueView = class extends view.Control {
element.innerHTML = `<span class='sidebar-item-value-line-content'>name: <b>${name || ' '}</b></span>`;
element.addEventListener('pointerenter', () => this.emit('activate', this._value));
element.addEventListener('pointerleave', () => this.emit('deactivate', this._value));
// if (!initializer) {
element.style.cursor = 'pointer';
element.addEventListener('click', () => this.emit('select', this._value));
// }
this._element.appendChild(element);
} else if (this._hasCategory) {
this._bold('category', initializer.category);
Expand Down Expand Up @@ -2924,16 +2932,16 @@ view.ValueView = class extends view.Control {
if (Array.isArray(stride) && stride.length > 0) {
this._code('stride', stride.join(','));
}
const tensor = new view.TensorView(this._view, initializer);
tensor.tensor(this._element);
// const tensor = new view.TensorView(this._view, initializer);
// tensor.tensor(this._element);
}
} catch (error) {
super.error(error, false);
this._info('ERROR', error.message);
}
} else {
this._expander.innerText = '+';
while (this._element.childElementCount > 2) {
while (this._element.childElementCount > this._count) {
this._element.removeChild(this._element.lastChild);
}
}
Expand All @@ -2959,7 +2967,7 @@ view.ValueView = class extends view.Control {
}

_add(child) {
child.className = this._element.childNodes.length < 2 ? 'sidebar-item-value-line' : 'sidebar-item-value-line-border';
child.className = this._element.childNodes.length < this._count ? 'sidebar-item-value-line' : 'sidebar-item-value-line-border';
this._element.appendChild(child);
}
};
Expand Down Expand Up @@ -3208,7 +3216,9 @@ view.TensorSidebar = class extends view.ObjectSidebar {
const value = this._value;
const tensor = value.initializer;
const [name] = value.name.split('\n');
this.addProperty('name', name);
if (name) {
this.addProperty('name', name);
}
const category = tensor.category;
if (category) {
this.addProperty('category', category);
Expand Down Expand Up @@ -3575,7 +3585,7 @@ view.FindSidebar = class extends view.Control {
this._index++;
this._table.set(key, value);
const element = this.createElement('li');
element.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-find-icon-${icon}"></use></svg>`;
element.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-icon-${icon}"></use></svg>`;
const text = this.createElement('span');
text.innerText = content;
element.appendChild(text);
Expand Down Expand Up @@ -3681,7 +3691,7 @@ view.FindSidebar = class extends view.Control {
});
for (const [name, toggle] of Object.entries(this._toggles)) {
toggle.element = this.createElement('label', 'sidebar-find-toggle');
toggle.element.innerHTML = `<svg class='sidebar-find-toggle-icon'><use href="#sidebar-find-icon-${name}"></use></svg>`;
toggle.element.innerHTML = `<svg class='sidebar-find-toggle-icon'><use href="#sidebar-icon-${name}"></use></svg>`;
toggle.element.setAttribute('title', this._state[name] ? toggle.hide : toggle.show);
toggle.checkbox = this.createElement('input');
toggle.checkbox.setAttribute('type', 'checkbox');
Expand Down

0 comments on commit 1ee1628

Please sign in to comment.