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 Jul 4, 2024
1 parent f85f041 commit 55ec770
Show file tree
Hide file tree
Showing 4 changed files with 155 additions and 130 deletions.
14 changes: 7 additions & 7 deletions source/grapher.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@
.node-item-undefined:hover { cursor: pointer; }
.node-item-undefined:hover path { fill: #fff; }

.node-attribute-list > path { fill: #fff; stroke-width: 0; stroke: #000; }
.node-attribute-list:hover { cursor: pointer; }
.node-attribute-list:hover > path { fill: #f6f6f6; }
.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; }
.node-argument-list > path { fill: #fff; stroke-width: 0; stroke: #000; }
.node-argument-list:hover { cursor: pointer; }
.node-argument-list:hover > path { fill: #f6f6f6; }
.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; }

.graph-item-input path { fill: #eee; }
.graph-item-input:hover { cursor: pointer; }
Expand Down Expand Up @@ -110,9 +110,9 @@
.node-item path { stroke: #fff; }
.node-item text { fill: #dfdfdf; }

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

.graph-item-input path { fill: #404040; }
.graph-item-input:hover { cursor: pointer; }
Expand Down
99 changes: 55 additions & 44 deletions source/grapher.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ grapher.Node = class {
}

list() {
const block = new grapher.Node.List();
const block = new grapher.ArgumentList();
this._blocks.push(block);
return block;
}
Expand Down Expand Up @@ -524,17 +524,19 @@ grapher.Node.Header.Entry = class {
}
};

grapher.Node.List = class {
grapher.ArgumentList = class {

constructor() {
this._items = [];
this._events = {};
}

add(name, value, tooltip, separator) {
const item = new grapher.Node.List.Item(name, value, tooltip, separator);
this._items.push(item);
return item;
argument(name, value) {
return new grapher.Argument(name, value);
}

add(value) {
this._items.push(value);
}

on(event, callback) {
Expand All @@ -553,7 +555,7 @@ grapher.Node.List = class {
build(document, parent) {
this._document = document;
this.element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
this.element.setAttribute('class', 'node-attribute-list');
this.element.setAttribute('class', 'node-argument-list');
if (this._events.click) {
this.element.addEventListener('click', (e) => {
e.stopPropagation();
Expand All @@ -564,38 +566,7 @@ grapher.Node.List = class {
this.element.appendChild(this.background);
parent.appendChild(this.element);
for (const item of this._items) {
const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
group.setAttribute('class', 'node-attribute');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('xml:space', 'preserve');
if (item.tooltip) {
const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
title.textContent = item.tooltip;
text.appendChild(title);
}
const colon = item.type === 'node' || item.type === 'node[]';
const name = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
name.textContent = colon ? `${item.name}:` : item.name;
if (item.separator.trim() !== '=' && !colon) {
name.style.fontWeight = 'bold';
}
text.appendChild(name);
group.appendChild(text);
this.element.appendChild(group);
item.group = group;
item.text = text;
if (item.type === 'node') {
const node = item.value;
node.build(document, item.group);
} else if (item.type === 'node[]') {
for (const node of item.value) {
node.build(document, item.group);
}
} else {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.textContent = item.separator + item.value;
item.text.appendChild(tspan);
}
item.build(document, this.element);
}
if (!this.first) {
this.line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
Expand Down Expand Up @@ -697,19 +668,59 @@ grapher.Node.List = class {
}
};

grapher.Node.List.Item = class {
grapher.Argument = class {

constructor(name, value, tooltip, separator) {
constructor(name, value) {
this.name = name;
this.value = value;
this.tooltip = tooltip;
this.separator = separator;
if (value instanceof grapher.Node) {
this.type = 'node';
} else if (Array.isArray(value) && value.every((value) => value instanceof grapher.Node)) {
this.type = 'node[]';
}
}

build(document, parent) {
const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
group.setAttribute('class', 'node-argument');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('xml:space', 'preserve');
if (this.tooltip) {
const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
title.textContent = this.tooltip;
text.appendChild(title);
}
const colon = this.type === 'node' || this.type === 'node[]';
const name = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
name.textContent = colon ? `${this.name}:` : this.name;
if (this.separator && this.separator.trim() !== '=' && !colon) {
name.style.fontWeight = 'bold';
}
text.appendChild(name);
group.appendChild(text);
parent.appendChild(group);
this.group = group;
this.text = text;
switch (this.type) {
case 'node': {
const node = this.value;
node.build(document, this.group);
break;
}
case 'node[]': {
for (const node of this.value) {
node.build(document, this.group);
}
break;
}
default: {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.textContent = (this.separator || '') + this.value;
this.text.appendChild(tspan);
break;
}
}
}
};

grapher.Node.Canvas = class {
Expand Down Expand Up @@ -947,4 +958,4 @@ grapher.Edge.Path = class {
}
};

export const { Graph, Node, Edge } = grapher;
export const { Graph, Node, Edge, Argument } = grapher;
2 changes: 1 addition & 1 deletion source/pytorch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ pytorch.Node = class {
return type;
};
const createAttribute = (metadata, name, value) => {
let visible = false;
let visible = true;
let type = null;
if (name === 'training') {
visible = false;
Expand Down
Loading

0 comments on commit 55ec770

Please sign in to comment.