Skip to content

Commit

Permalink
more functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@kentquirk
kentquirk committed Oct 20, 2024
1 parent 8326b77 commit 9649619
Show file tree
Hide file tree
Showing 6 changed files with 340 additions and 55 deletions.
4 changes: 4 additions & 0 deletions docs/straws/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@
<body>
<a href="..">back</a>
<h1>Straws UI Prototype</h1>
<h3>Add component</h3>
<div id="button-holder"></div>
<div id="selected-component">
</div>
<div id="sketch-holder">
</div>
<h2>HPSF from the graph</h2>
Expand Down
188 changes: 151 additions & 37 deletions docs/straws/sketch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ let bg = 0;
let zoomLevel = 1;
let components = [];
let connections = [];
let componentKinds = new Map();
let partialConnection = null;
let dragComponent = null;
let dragPort = null;
Expand All @@ -17,7 +18,7 @@ function verticalCurve(p1, p2) {
c1.y = (p1.y + p2.y) / 2;
c2.y = (p1.y + p2.y) / 2;
noFill();
stroke(0);
stroke(240);
strokeWeight(2);
bezier(p1.x, p1.y, c1.x, c1.y, c2.x, c2.y, p2.x, p2.y);
// line(p1.x, p1.y, p2.x, p2.y);
Expand All @@ -44,9 +45,10 @@ class Shape {
}

class Port {
constructor(parent, type, label, col) {
this.parent = parent;
constructor(parent, type, direction, label, col) {
this.type = type;
this.parent = parent;
this.direction = direction;
this.label = label;
this.col = col;
this.x = 0;
Expand All @@ -60,7 +62,7 @@ class Port {
draw() {
let align = BOTTOM;
let offset = this.portRadius;
if (this.type === 'input') {
if (this.direction === 'input') {
align = TOP;
offset = -this.portRadius;
}
Expand All @@ -78,17 +80,18 @@ class Port {
// ask if x, y is inside the port
hit(x, y) {
let offset = this.portRadius;
if (this.type === 'input') {
if (this.direction === 'input') {
offset = -this.portRadius;
}
return dist(x, y, this.x, this.y + offset) <= this.portRadius;
}

yaml(indent) {
let spaces = ' '.repeat(indent) + '- ';
let yaml = spaces + "Name: " + this.label + '\n';
let yaml = spaces + 'Name: ' + this.label + '\n';
spaces = ' '.repeat(indent+2);
yaml += spaces + "Direction: " + this.type + '\n';
yaml += spaces + 'Direction: ' + this.direction + '\n';
yaml += spaces + 'Type: ' + this.type + '\n';
return yaml;
}
}
Expand All @@ -105,13 +108,13 @@ class ComponentShape extends Shape {
this.textFill = textCol;
}

addInput(parent, label, col) {
this.inputs.set(label, new Port(parent, "input", label, col));
addInput(parent, type, label, col) {
this.inputs.set(label, new Port(parent, type, 'input', label, col));
this._layoutPorts();
}

addOutput(parent, label, col) {
this.outputs.set(label, new Port(parent, "output", label, col));
addOutput(parent, type, label, col) {
this.outputs.set(label, new Port(parent, type, 'output', label, col));
this._layoutPorts();
}

Expand Down Expand Up @@ -183,31 +186,81 @@ class ComponentShape extends Shape {
}
}

class ComponentKind {
constructor(kind, ports, w, h, col) {
this.kind = kind;
this.ports = ports;
this.w = w;
this.h = h;
this.col = col;
this.labelNumber = 0;
this.properties = new Map();
componentKinds.set(kind, this);
}

addProperty(name, value) {
this.properties.set(name, value);
}

addPortsTo(component) {
for (let port of this.ports) {
if (port.direction === 'input') {
component.addInput(port.type, port.label, port.col);
} else {
component.addOutput(port.type, port.label, port.col);
}
}
}
}

function addComponentKind(kind, ports, w=150, h=50, col=200) {
let k = new ComponentKind(kind, ports, w, h, col);
button = createButton(kind);
buttondiv = select('#button-holder');
button.parent(buttondiv);
let createComponent = () => {
let c = new Component(kind, 250+10*(k.labelNumber+1), 200+10*(k.labelNumber+1));
components.push(c);
changed = true;
}
button.mousePressed(createComponent);
return k;
}

class Component {
constructor(label, x, y) {
constructor(kind, x, y, label='') {
let ckind = componentKinds.get(kind);
this.kind = kind;
this.label = label;
if (label === '') {
ckind.labelNumber += 1;
this.label = kind + '_' + ckind.labelNumber;
}
this.x = x;
this.y = y;
this.shape = new ComponentShape(x, y, 150, 50, label);
this.shape = new ComponentShape(x, y, ckind.w, ckind.h, this.label);
this.properties = ckind.properties;
this.dragging = false;
this.hovering = false;
this.dragX = 0;
this.dragY = 0;
ckind.addPortsTo(this);
}

addInput(label, col) {
this.shape.addInput(this, label, col);
addInput(type, label, col) {
this.shape.addInput(this, type, label, col);
}

addOutput(label, col) {
this.shape.addOutput(this, label, col);
addOutput(type, label, col) {
this.shape.addOutput(this, type, label, col);
}

draw() {
let ckind = componentKinds.get(this.kind);
if (this.hovering) {
this.shape.bodyfill = color(255, 255, 0);
this.shape.bodyfill = lerpColor(ckind.col, color(255), 0.5);
} else {
this.shape.bodyfill = color(255);
this.shape.bodyfill = ckind.col;
}
this.shape.draw();
}
Expand Down Expand Up @@ -275,17 +328,46 @@ class Component {
}
}

select() {
let container = select('#selected-component');
let html = '<h3>' + this.label + '</h3>';
html += '<table>';
// set up the table
for (let [name, value] of this.properties) {
let tfield = '<input type="text" class="textfield" id="prop-' + name + '" value="' + value + '">';
html += '<tr><td class="propname">' + name + '</td><td class="propvalue">' + tfield + '</td></tr>';
}
html += '</table>';
// add the table to the container
container.html(html);
// set up the event handlers
for (let [name, value] of this.properties) {
let input = select('#prop-' + name);
input.changed(() => {
this.properties.set(name, input.value());
changed = true;
});
}
}

yaml(indent) {
let spaces = ' '.repeat(indent) + '- ';
let yaml = spaces + "Name: " + this.label + '\n';
let yaml = spaces + 'Name: ' + this.label + '\n';
spaces = ' '.repeat(indent+2);
yaml += spaces + "Ports:\n";
yaml += spaces + 'Kind: ' + this.kind + '\n';
yaml += spaces + 'Ports:\n';
for (let input of this.shape.inputs.values()) {
yaml += input.yaml(indent+2);
}
for (let output of this.shape.outputs.values()) {
yaml += output.yaml(indent+2);
}
yaml += spaces + 'Properties:\n';
let sp = '- ';
for (let [name, value] of this.properties) {
yaml += spaces + sp + name + ': ' + value + '\n';
sp = ' ';
}
return yaml;
}
}
Expand All @@ -294,7 +376,8 @@ class Connection {
constructor(frComp, frPort, toComp, toPort) {
// always go from the output to the input
let p = frComp.port(frPort);
if (frComp.port(frPort).type == 'input') {
print(frComp);
if (frComp.port(frPort).direction == 'input') {
// print('reversing connection');
this.frComp = toComp;
this.frPort = toPort;
Expand Down Expand Up @@ -332,22 +415,42 @@ class Connection {


function restart() {
bg = 128;
zoomLevel = 2;
inputCol = color(128, 128, 255);
outputCol = color(255, 128, 128);

c1 = new Component('TraceGRPC', 100, 100);
c1.addOutput('TraceOut', outputCol);
c2 = new Component('DeterministicSampler', 100, 300);
c2.addInput('Input', inputCol);
c2.addOutput('Kept', outputCol);
c2.addOutput('Dropped', outputCol);
c3 = new Component('HoneycombExporter', 100, 500);
c3.addInput('Traces', inputCol);
bg = 80;
zoomLevel = 2;
inputCol = color(128, 255, 128);
outputCol = color(255, 192, 192);
buttondiv = select('#button-holder');
buttondiv.html('');

let k = addComponentKind('TraceGRPC', [
{direction: 'output', type: 'OtelTraces', label: 'TraceOut', col: outputCol}
], 100, 70, color(128, 255, 128));
k.addProperty('Port', 4317);
k = addComponentKind('DeterministicSampler', [
{direction: 'input', type: 'OtelTraces', label: 'Input', col: inputCol},
{direction: 'output', type: 'OtelTraces', label: 'Kept', col: outputCol},
{direction: 'output', type: 'OtelTraces', label: 'Dropped', col: outputCol}
], 150, 100, color(192, 192, 255));
k.addProperty('SampleRate', 10);
k = addComponentKind('HoneycombExporter', [
{direction: 'input', type: 'OtelTraces', label: 'Traces', col: inputCol}
], 180, 80, color(255, 255, 128));
k.addProperty('Dataset', 'mydataset');
k.addProperty('APIKey', '$HONEYCOMB_APIKEY');
k = addComponentKind('EMAThroughputSampler', [
{direction: 'input', type: 'OtelTraces', label: 'Input', col: inputCol},
{direction: 'output', type: 'OtelTraces', label: 'Kept', col: outputCol},
{direction: 'output', type: 'OtelTraces', label: 'Dropped', col: outputCol}
], 150, 100, color(192, 192, 255));
k.addProperty('TPS', 100);
k.addProperty('KeyFields', 'key1, key2, key3');

c1 = new Component('TraceGRPC', 300, 100);
c2 = new Component('DeterministicSampler', 300, 300);
c3 = new Component('HoneycombExporter', 300, 500);
components = [c1, c2, c3];
let connection = new Connection(c1, 'TraceOut', c2, 'Input');
connections.push(connection);
connections = [connection];
generateYaml();
}

Expand Down Expand Up @@ -397,17 +500,28 @@ function mousePressed() {
}
}

function mouseClicked() {
// print('clicked');
for (let component of components) {
if (component.bodyHit(mouseX, mouseY)) {
component.select();
}
}
}

function mouseReleased() {
if (dragComponent) {
dragComponent.endDrag();
dragComponent = null;
}
partialConnection = null;
if (dragPort) {
// print('dragPort', dragPort);
dragPort.hovering = false;
for (let component of components) {
let port = component.portHit(mouseX, mouseY);
if (port && port !== dragPort && port.parent !== dragPort.parent && port.type !== dragPort.type) {
// print('port', port);
if (port && port !== dragPort && port.parent !== dragPort.parent && port.direction !== dragPort.direction) {
// print('connecting', dragPort, 'to', port);
let connection = new Connection(dragPort.parent, dragPort.label, component, port.label);
connections.push(connection);
Expand Down
26 changes: 26 additions & 0 deletions docs/straws/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,30 @@ pre {
padding: 20px;
border-radius: 5px;
overflow-x: auto;
}

table {
margin-left: 2rem;
border-collapse: collapse;
width: 30rem;
margin-bottom: 20px;
background-color: beige;
}

.propname {
color: #000080;
width: 35%;
}

.propvalue {
text-align: left;
color: #1e90ff;
}

.textfield {
width: 90%;
padding: 5px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
4 changes: 4 additions & 0 deletions p5/straws/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@
<body>
<a href="..">back</a>
<h1>Straws UI Prototype</h1>
<h3>Add component</h3>
<div id="button-holder"></div>
<div id="selected-component">
</div>
<div id="sketch-holder">
</div>
<h2>HPSF from the graph</h2>
Expand Down
Loading

0 comments on commit 9649619

Please sign in to comment.