Skip to content

Commit 947fe42

Browse files
lutzroederlutzroeder
committed
Update view.js (#1285)
1 parent f85f041 commit 947fe42

File tree

4 files changed

+155
-130
lines changed

4 files changed

+155
-130
lines changed

‎source/grapher.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@
5151
.node-item-undefined:hover { cursor: pointer; }
5252
.node-item-undefined:hover path { fill: #fff; }
5353

54-
.node-attribute-list > path { fill: #fff; stroke-width: 0; stroke: #000; }
55-
.node-attribute-list:hover { cursor: pointer; }
56-
.node-attribute-list:hover > path { fill: #f6f6f6; }
57-
.node-attribute > text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 9px; font-weight: normal; text-rendering: geometricPrecision; user-select: none; }
54+
.node-argument-list > path { fill: #fff; stroke-width: 0; stroke: #000; }
55+
.node-argument-list:hover { cursor: pointer; }
56+
.node-argument-list:hover > path { fill: #f6f6f6; }
57+
.node-argument > text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 9px; font-weight: normal; text-rendering: geometricPrecision; user-select: none; }
5858

5959
.graph-item-input path { fill: #eee; }
6060
.graph-item-input:hover { cursor: pointer; }
@@ -110,9 +110,9 @@
110110
.node-item path { stroke: #fff; }
111111
.node-item text { fill: #dfdfdf; }
112112

113-
.node-attribute > text { fill: #b2b2b2; }
114-
.node-attribute-list > path { fill: #2d2d2d; }
115-
.node-attribute-list:hover > path { fill: #666666; }
113+
.node-argument > text { fill: #b2b2b2; }
114+
.node-argument-list > path { fill: #2d2d2d; }
115+
.node-argument-list:hover > path { fill: #666666; }
116116

117117
.graph-item-input path { fill: #404040; }
118118
.graph-item-input:hover { cursor: pointer; }

‎source/grapher.js‎

Lines changed: 55 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ grapher.Node = class {
277277
}
278278

279279
list() {
280-
const block = new grapher.Node.List();
280+
const block = new grapher.ArgumentList();
281281
this._blocks.push(block);
282282
return block;
283283
}
@@ -524,17 +524,19 @@ grapher.Node.Header.Entry = class {
524524
}
525525
};
526526

527-
grapher.Node.List = class {
527+
grapher.ArgumentList = class {
528528

529529
constructor() {
530530
this._items = [];
531531
this._events = {};
532532
}
533533

534-
add(name, value, tooltip, separator) {
535-
const item = new grapher.Node.List.Item(name, value, tooltip, separator);
536-
this._items.push(item);
537-
return item;
534+
argument(name, value) {
535+
return new grapher.Argument(name, value);
536+
}
537+
538+
add(value) {
539+
this._items.push(value);
538540
}
539541

540542
on(event, callback) {
@@ -553,7 +555,7 @@ grapher.Node.List = class {
553555
build(document, parent) {
554556
this._document = document;
555557
this.element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
556-
this.element.setAttribute('class', 'node-attribute-list');
558+
this.element.setAttribute('class', 'node-argument-list');
557559
if (this._events.click) {
558560
this.element.addEventListener('click', (e) => {
559561
e.stopPropagation();
@@ -564,38 +566,7 @@ grapher.Node.List = class {
564566
this.element.appendChild(this.background);
565567
parent.appendChild(this.element);
566568
for (const item of this._items) {
567-
const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
568-
group.setAttribute('class', 'node-attribute');
569-
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
570-
text.setAttribute('xml:space', 'preserve');
571-
if (item.tooltip) {
572-
const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
573-
title.textContent = item.tooltip;
574-
text.appendChild(title);
575-
}
576-
const colon = item.type === 'node' || item.type === 'node[]';
577-
const name = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
578-
name.textContent = colon ? `${item.name}:` : item.name;
579-
if (item.separator.trim() !== '=' && !colon) {
580-
name.style.fontWeight = 'bold';
581-
}
582-
text.appendChild(name);
583-
group.appendChild(text);
584-
this.element.appendChild(group);
585-
item.group = group;
586-
item.text = text;
587-
if (item.type === 'node') {
588-
const node = item.value;
589-
node.build(document, item.group);
590-
} else if (item.type === 'node[]') {
591-
for (const node of item.value) {
592-
node.build(document, item.group);
593-
}
594-
} else {
595-
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
596-
tspan.textContent = item.separator + item.value;
597-
item.text.appendChild(tspan);
598-
}
569+
item.build(document, this.element);
599570
}
600571
if (!this.first) {
601572
this.line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
@@ -697,19 +668,59 @@ grapher.Node.List = class {
697668
}
698669
};
699670

700-
grapher.Node.List.Item = class {
671+
grapher.Argument = class {
701672

702-
constructor(name, value, tooltip, separator) {
673+
constructor(name, value) {
703674
this.name = name;
704675
this.value = value;
705-
this.tooltip = tooltip;
706-
this.separator = separator;
707676
if (value instanceof grapher.Node) {
708677
this.type = 'node';
709678
} else if (Array.isArray(value) && value.every((value) => value instanceof grapher.Node)) {
710679
this.type = 'node[]';
711680
}
712681
}
682+
683+
build(document, parent) {
684+
const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
685+
group.setAttribute('class', 'node-argument');
686+
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
687+
text.setAttribute('xml:space', 'preserve');
688+
if (this.tooltip) {
689+
const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
690+
title.textContent = this.tooltip;
691+
text.appendChild(title);
692+
}
693+
const colon = this.type === 'node' || this.type === 'node[]';
694+
const name = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
695+
name.textContent = colon ? `${this.name}:` : this.name;
696+
if (this.separator && this.separator.trim() !== '=' && !colon) {
697+
name.style.fontWeight = 'bold';
698+
}
699+
text.appendChild(name);
700+
group.appendChild(text);
701+
parent.appendChild(group);
702+
this.group = group;
703+
this.text = text;
704+
switch (this.type) {
705+
case 'node': {
706+
const node = this.value;
707+
node.build(document, this.group);
708+
break;
709+
}
710+
case 'node[]': {
711+
for (const node of this.value) {
712+
node.build(document, this.group);
713+
}
714+
break;
715+
}
716+
default: {
717+
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
718+
tspan.textContent = (this.separator || '') + this.value;
719+
this.text.appendChild(tspan);
720+
break;
721+
}
722+
}
723+
}
713724
};
714725

715726
grapher.Node.Canvas = class {
@@ -947,4 +958,4 @@ grapher.Edge.Path = class {
947958
}
948959
};
949960

950-
export const { Graph, Node, Edge } = grapher;
961+
export const { Graph, Node, Edge, Argument } = grapher;

‎source/pytorch.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@ pytorch.Node = class {
291291
return type;
292292
};
293293
const createAttribute = (metadata, name, value) => {
294-
let visible = false;
294+
let visible = true;
295295
let type = null;
296296
if (name === 'training') {
297297
visible = false;

0 commit comments

Comments
 (0)