2b:null 2c:["$","title",null,{"children":"SCG Inspectors 🦭 | port.studio | Observable"}] 31:T724,sentenceField = (box, prompt = "talk to me 💬") => { const inputElement = html``; const styledElement = html`

${inputElement}

`; let words = []; let ids = []; styledElement.value = { words, ids }; inputElement.oninput = () => { const newWords = inputElement.value .split(/[\s~=`!@#$%^&\*{}\[\];:\"'<,\.>\?\/\|\-_\+\\]+/g) .slice(0, -1); let firstUncommon; for ( firstUncommon = 0; firstUncommon < words.length && firstUncommon < newWords.length && words[firstUncommon] === newWords[firstUncommon]; firstUncommon++ ); ids = firstUncommon < words.length ? words.map(_ => tribles.UFOID.now()) : [ ...ids, ...newWords.slice(firstUncommon).map(_ => tribles.UFOID.now()) ]; words = newWords; box.commit(kb => kb.with(wordNS, () => ids.map((id, i) => ({ [tribles.id]: id, wordForm: words[i], tag: ["scg/word"], startIndex: BigInt(i), endIndex: BigInt(i+1), precededBy: ids.slice(0, i), ...(i !== 0 && { metBy: ids[i - 1] }) })) ) ); styledElement.value = { words, ids }; styledElement.dispatchEvent(new CustomEvent("input")); }; return styledElement; }32:T7cd,makeSimulation = searchSpace => { const sim = d3 .forceSimulation() .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(0, 0)) .force("link", d3.forceLink().id(d => d.id)); sim.nodeById = new Map(); const partialQueuedHandler = ({ detail: { partial: p } }) => { const nodes = sim.nodes(); const node = { id: p.id, interactionIndex: nodes.length, queued: true, data: p }; nodes.push(node); sim.nodeById.set(p.id, node); sim.nodes(nodes); const links = sim.force("link").links(); // links.push( // ...[...p.parents].map(parentId => ({ // source: p.id, // target: parentId // })) // ); links.push({ source: p.id, target: p.parentNode.id }); sim.force("link").links(links); sim.alpha(1); sim.restart(); }; const partialDequeuedHandler = ({ detail: { partial: p } }) => { sim.nodeById.get(p.id).queued = false; }; searchSpace.addEventListener("partialQueued", partialQueuedHandler); invalidation.then(() => searchSpace.removeEventListener("partialQueued", partialQueuedHandler) ); searchSpace.addEventListener("partialDequeued", partialDequeuedHandler); invalidation.then(() => searchSpace.removeEventListener("partialDequeued", partialDequeuedHandler) ); const nodeHandler = ({ detail: { node: n } }) => { const nodes = sim.nodes(); const node = { id: n.id, interactionIndex: nodes.length, data: n }; nodes.push(node); sim.nodeById.set(n.id, node); sim.nodes(nodes); const links = sim.force("link").links(); links.push( ...[...n.parentPartials].map(parentId => ({ source: n.id, target: parentId })) ); sim.force("link").links(links); sim.alpha(1); sim.restart(); }; searchSpace.addEventListener("nodeAdded", nodeHandler); invalidation.then(() => searchSpace.removeEventListener("nodeAdded", nodeHandler) ); return sim; }33:T1478,parseProcessInspector = searchSpace => { const simulation = makeSimulation(searchSpace); const dx = 12; const dy = 24; const marginLeft = 40; const nodeRadius = 8; const highlightGap = 2; const arrowGap = 10; const font = "10px sans-serif"; const fontGap = 2; const cxnInitials = cxnId => cxnId.match(/^.|[A-Z]/g).join(""); const canvas = DOM.canvas(width, simHeight); const interactionCanvas = DOM.canvas(width, simHeight); const context = canvas.getContext("2d"); const interactionContext = interactionCanvas.getContext("2d"); const treeLink = d3 .linkHorizontal() .x(d => d.x) .y(d => d.y) .context(context); const pixelRatio = window.devicePixelRatio; canvas.width = width * pixelRatio; canvas.height = simHeight * pixelRatio; interactionCanvas.width = width * pixelRatio; interactionCanvas.height = simHeight * pixelRatio; canvas.style.width = `${width}px`; canvas.style.height = `${simHeight}px`; canvas.style.cursor = "move"; interactionCanvas.style.width = `${width}px`; interactionCanvas.style.height = `${simHeight}px`; const draw = () => { const nodes = simulation.nodes(); const links = simulation.force("link").links(); const transform = d3.zoomTransform(canvas); context.save(); context.clearRect(0, 0, canvas.width, canvas.height); //context.translate((width / 2) * pixelRatio, (simHeight / 2) * pixelRatio); context.translate(transform.x, transform.y); context.scale(transform.k * pixelRatio, transform.k * pixelRatio); for (const link of links) { let s = [link.target.x, link.target.y]; let t = [link.source.x, link.source.y]; let d = vnorm(vsub(s, t)); context.strokeStyle = context.fillStyle = hashPastel.hex( link.target.data.cxnId ); context.beginPath(); context.moveTo(...s); context.lineTo(...vadd(t, vsmul(arrowGap + 2, d))); context.stroke(); context.save(); context.translate(...vadd(t, vsmul(arrowGap, d))); context.restore(); } context.textAlign = "center"; context.textBaseline = "middle"; context.font = font; for (const node of nodes) { context.fillStyle = hashPastel.hex(node.data.cxnId) + (node.queued ? "80" : ""); context.beginPath(); context.arc( node.x, node.y, nodeRadius * (node.data.parentPartials ? 1.5 : 1), 0, 2 * Math.PI ); context.fill(); context.fillStyle = "#FFF"; context.fillText( cxnInitials(node.data.cxnId), node.x, node.y, (nodeRadius - fontGap) * 2 ); } if (canvas.value) { context.strokeStyle = hashPastel.hex(canvas.value.data.cxnId); context.beginPath(); context.arc( canvas.value.x, canvas.value.y, nodeRadius + highlightGap, 0, 2 * Math.PI ); context.stroke(); } context.restore(); interactionContext.save(); interactionContext.clearRect( 0, 0, interactionCanvas.width, interactionCanvas.height ); interactionContext.translate(transform.x, transform.y); interactionContext.scale( transform.k * pixelRatio, transform.k * pixelRatio ); for (const node of nodes) { interactionContext.fillStyle = idToColor(node.interactionIndex); interactionContext.beginPath(); interactionContext.arc(node.x, node.y, nodeRadius, 0, 2 * Math.PI); interactionContext.fill(); } interactionContext.restore(); }; const zoom = d3 .zoom() .scaleExtent([0.05, 2]) .on("zoom", e => draw()); function dragsubject(event) { const [x, y] = [event.x * pixelRatio, event.y * pixelRatio]; const colorData = interactionContext.getImageData(x, y, 1, 1).data; if (colorData[3] === 255) { const transform = d3.zoomTransform(canvas); const node = simulation.nodes()[colorToId(colorData)]; return { x: transform.applyX(node.x), y: transform.applyY(node.y), node }; } } function dragged(event) { const transform = d3.zoomTransform(canvas); const [x, y] = transform.invert([event.x, event.y]); event.subject.node.fx = x; event.subject.node.fy = y; simulation.alpha(1).restart(); } function dragended(event) { event.subject.node.fx = undefined; event.subject.node.fy = undefined; } const drag = d3 .drag() .container(canvas) .subject(dragsubject) // .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); d3.select(canvas) .call(drag) .call(zoom) .on("click", e => { let [x, y] = d3.pointer(e); [x, y] = [x * pixelRatio, y * pixelRatio]; const colorData = interactionContext.getImageData(x, y, 1, 1).data; if (colorData[3] === 255) { const transform = d3.zoomTransform(canvas); //TODO why? const node = simulation.nodes()[colorToId(colorData)]; canvas.value = node; canvas.dispatchEvent(new Event("input")); draw(); } }); invalidation.then(() => simulation.on("tick.selectedNode", null)); simulation.on("tick.selectedNode", draw); draw(); return canvas; }34:T7a1,appliedCxnDistribution = (searchSpace) => { const data = [ ...searchSpace.previouslyCombinedByCxn .entrySeq() .map(([name, partials]) => ({ value: partials.size, name })) .sortBy((d) => -d.value) ]; const height = 200; const margin = { top: 30, right: 0, bottom: 50, left: 40 }; const x = d3 .scaleBand() .domain(data.map(({ name }) => name)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLog() .domain([1, d3.max(data, (d) => d.value)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat((name) => name.length > 16 ? name.substr(0, 16 - 1) + "…" : name ) .tickSizeOuter(0) ) .selectAll(".tick text") .each(function (_, i) { d3.select(this).attr("transform", `translate(0, ${12 * (i % 3)})`); }); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(3)) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(data.y) ); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", (d) => hashPastel.hex(d.name)) .attr("x", (d, i) => x(d.name)) .attr("y", (d) => y(d.value)) .attr("height", (d) => y(1) - y(d.value)) .attr("width", x.bandwidth()); /*.on("click", (n, i, nodes) => { manualExpansion(n.name); });*/ svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }35:T797,partialDistribution = (searchSpace) => { const data = [ ...searchSpace.partialByCxnId .entrySeq() .map(([name, partials]) => ({ value: partials.length, name })) .sortBy((d) => -d.value) ]; const height = 200; const margin = { top: 30, right: 0, bottom: 50, left: 40 }; const x = d3 .scaleBand() .domain(data.map(({ name }) => name)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLog() .domain([1, d3.max(data, (d) => d.value)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat((name) => name.length > 16 ? name.substr(0, 16 - 1) + "…" : name ) .tickSizeOuter(0) ) .selectAll(".tick text") .each(function (_, i) { d3.select(this).attr("transform", `translate(0, ${12 * (i % 3)})`); }); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(3)) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(data.y) ); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", (d) => hashPastel.hex(d.name)) .attr("x", (d, i) => x(d.name)) .attr("y", (d) => y(d.value)) .attr("height", (d) => y(1) - y(d.value)) .attr("width", x.bandwidth()); /*.on("click", (n, i, nodes) => { manualExpansion(n.name); });*/ svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }36:T7c5,precompMatchingDistribution = (grammar) => { const data = [ ...grammar.precomps .valueSeq() .groupBy((p) => p.matchingId) .entrySeq() .map(([name, partials]) => ({ value: partials.size, name })) .sortBy((d) => -d.value) ]; const height = 200; const margin = { top: 30, right: 0, bottom: 50, left: 40 }; const x = d3 .scaleBand() .domain(data.map(({ name }) => name)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLog() .domain([1, d3.max(data, (d) => d.value)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat((name) => name.length > 16 ? name.substr(0, 16 - 1) + "…" : name ) .tickSizeOuter(0) ) .selectAll(".tick text") .each(function (_, i) { d3.select(this).attr("transform", `translate(0, ${12 * (i % 3)})`); }); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(3)) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(data.y) ); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", (d) => hashPastel.hex(d.name)) .attr("x", (d, i) => x(d.name)) .attr("y", (d) => y(d.value)) .attr("height", (d) => y(1) - y(d.value)) .attr("width", x.bandwidth()); /*.on("click", (n, i, nodes) => { manualExpansion(n.name); });*/ svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }37:T7c3,precompMergingDistribution = (grammar) => { const data = [ ...grammar.precomps .valueSeq() .groupBy((p) => p.mergingId) .entrySeq() .map(([name, partials]) => ({ value: partials.size, name })) .sortBy((d) => -d.value) ]; const height = 200; const margin = { top: 30, right: 0, bottom: 50, left: 40 }; const x = d3 .scaleBand() .domain(data.map(({ name }) => name)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLog() .domain([1, d3.max(data, (d) => d.value)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat((name) => name.length > 16 ? name.substr(0, 16 - 1) + "…" : name ) .tickSizeOuter(0) ) .selectAll(".tick text") .each(function (_, i) { d3.select(this).attr("transform", `translate(0, ${12 * (i % 3)})`); }); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(3)) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(data.y) ); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", (d) => hashPastel.hex(d.name)) .attr("x", (d, i) => x(d.name)) .attr("y", (d) => y(d.value)) .attr("height", (d) => y(1) - y(d.value)) .attr("width", x.bandwidth()); /*.on("click", (n, i, nodes) => { manualExpansion(n.name); });*/ svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }38:T11c6,precompGraph = (grammar) => { const dx = 12; const dy = 24; const marginLeft = 40; const height = 600; const canvas = DOM.canvas(width, height); const interactionCanvas = DOM.canvas(width, height); const context = canvas.getContext("2d"); const interactionContext = interactionCanvas.getContext("2d"); const treeLink = d3 .linkHorizontal() .x((d) => d.x) .y((d) => d.y) .context(context); const pixelRatio = window.devicePixelRatio; canvas.width = width * pixelRatio; canvas.height = height * pixelRatio; interactionCanvas.width = width * pixelRatio; interactionCanvas.height = height * pixelRatio; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; canvas.style.cursor = "move"; interactionCanvas.style.width = `${width}px`; interactionCanvas.style.height = `${height}px`; const simulation = d3 .forceSimulation() .stop() .force("charge", d3.forceManyBody().strength(-500)) .force("center", d3.forceCenter(width / 2, height / 2)); const zoom = d3.zoom().scaleExtent([0.05, 3]); function dragsubject(event) { const [x, y] = [event.x * pixelRatio, event.y * pixelRatio]; const colorData = interactionContext.getImageData(x, y, 1, 1).data; if (colorData[3] === 255) { const transform = d3.zoomTransform(canvas); const node = nodes[colorToId(colorData)]; return { x: transform.applyX(node.x), y: transform.applyY(node.y), node }; } } function dragstarted(event) { console.log("start"); } function dragged(event) { const transform = d3.zoomTransform(canvas); const [x, y] = transform.invert([event.x, event.y]); event.subject.node.fx = x; event.subject.node.fy = y; simulation.alpha(1); } function dragended(event) { event.subject.node.fx = undefined; event.subject.node.fy = undefined; } const drag = d3 .drag() .container(canvas) .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); d3.select(canvas).call(drag).call(zoom); let nodes = [...grammar.cxns.keys()].map((cxnId, i) => ({ cxnId, interactionIndex: i })); let links = [ ...grammar.precomps .valueSeq() .map((p) => im.List([p.matchingId, p.mergingId])) .countBy((i) => i) .entries() ].map(([[matchingId, mergingId], count]) => ({ source: matchingId, target: mergingId, count })); const maxCount = Math.max(...links.map((l) => l.count)); simulation.nodes(nodes); simulation.force( "link", d3.forceLink(links).id((d) => d.cxnId) ); while (true) { simulation.tick(); const transform = d3.zoomTransform(canvas); context.save(); context.clearRect(0, 0, canvas.width, canvas.height); context.translate(transform.x, transform.y); context.scale(transform.k * pixelRatio, transform.k * pixelRatio); for (const link of links) { let s = [link.source.x, link.source.y]; let t = [link.target.x, link.target.y]; let d = vnorm(vsub(s, t)); context.strokeStyle = context.fillStyle = "#000000" + ((link.count / maxCount) * 255).toString(16).padStart(2, "0"); context.beginPath(); context.moveTo(...s); context.lineTo(...vadd(t, vsmul(20, d))); context.stroke(); context.save(); context.translate(...vadd(t, vsmul(20, d))); context.rotate(vang(d) - 1.5 * Math.PI); context.beginPath(); context.moveTo(0, 0); context.lineTo(2, -4); context.lineTo(-2, -4); context.closePath(); context.fill(); context.restore(); } for (const node of nodes) { context.fillStyle = hashPastel.hex(node.cxnId); context.beginPath(); context.arc(node.x, node.y, 4, 0, 2 * Math.PI); context.fill(); } context.restore(); interactionContext.save(); interactionContext.clearRect( 0, 0, interactionCanvas.width, interactionCanvas.height ); interactionContext.translate(transform.x, transform.y); interactionContext.scale( transform.k * pixelRatio, transform.k * pixelRatio ); for (const node of nodes) { interactionContext.fillStyle = idToColor(node.interactionIndex); interactionContext.beginPath(); interactionContext.arc(node.x, node.y, 4, 0, 2 * Math.PI); interactionContext.fill(); } interactionContext.restore(); return canvas; //await new Promise(resolve => zoom.on('zoom', resolve)); } }39:T2d61,frameInspector = (ns, binding, triples) => { const attrNames = new Map( [...ns.attributes.entries()].map(([k, v]) => [v.id, k]) ); const height = 450; const charge = -50; const attrsLeft = 50; const valsRight = 50; const linkDistance = 300; let container; if (!this) { //# Setup //# Visuals container = html``; container.containerSelection = d3 .select(container) .classed("frame-graph-container", true) .style("width", `${width}px`) .style("height", `${height}px`) .style("overflow", "hidden") .style("position", "relative"); container.tableSelection = container.containerSelection .append("div") .classed("frame-graph-tables", true) .style("transform-origin", "0 0") .style("position", "absolute") .style("top", "0px") .style("left", "0px"); //# Data container.facts = im.Set(); // Holds all pushed facts, prevents the addition of dublicates container.factIndex = im.Map({ E: im.Map(), EA: im.Map(), EV: im.Map() }); //which simplifies the logic for handling added facts. container.attrs = im.Map(); // Maps entity IDs to entity attributes. container.nodesById = im.Map(); // Maps entity IDs to nodes. container.forceEdges = []; // Holds all the force information between nodes container.draw = function draw() { const z = d3.zoomTransform(container.canvasSelection.node()); const ctx = container.ctx; //Simulation container.simulation.force( "collision", bboxCollide.bboxCollide((d, i) => { if (!d.node) { return [-10, -10, 10, 10]; } return [ [-10, -10], [d.node.offsetWidth + 10, d.node.offsetHeight + 10] ]; }) ); //Nodes/Tables container.tableSelection .style( "transform", "translate(" + z.x + "px," + z.y + "px) scale(" + z.k + ")" ) .selectAll(".entitytable") .style("transform", d => `translate(${d.x}px,${d.y}px)`); //Edges ctx.save(); ctx.clearRect( 0, 0, container.canvasSelection.node().width, container.canvasSelection.node().height ); //Draw ctx.font = "12px sans"; ctx.textAlign = "center"; container.facts.forEach(f => { const sourceAttr = container.attrs.get(f); const source = container.nodesById.get(f.get(0)); const target = container.nodesById.get(f.get(2)); if ( source && target && source.node && target.node && sourceAttr.nodeValueCell ) { let s = z.apply([ source.x + sourceAttr.nodeValueCell.offsetLeft + sourceAttr.nodeValueCell.offsetWidth / 2, source.y + sourceAttr.nodeValueCell.offsetTop + sourceAttr.nodeValueCell.offsetHeight / 2 ]); let t = im .List([ z.apply([target.x, target.y]), z.apply([target.x + target.node.offsetWidth, target.y]), z.apply([target.x, target.y + target.node.offsetHeight]), z.apply([ target.x + target.node.offsetWidth, target.y + target.node.offsetHeight ]) ]) .minBy(v => vlen(vsub(v, s))); let d = vnorm(vsub(s, t)); ctx.strokeStyle = ctx.fillStyle = hashPastel.hex(f.get(1)) + "80"; ctx.beginPath(); ctx.moveTo(...s); ctx.lineTo(...vadd(t, vsmul(10, d))); ctx.stroke(); ctx.save(); ctx.translate(...vadd(t, vsmul(10, d))); ctx.rotate(vang(d) - 1.5 * Math.PI); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(5, -10); ctx.lineTo(-5, -10); ctx.closePath(); ctx.fill(); ctx.restore(); } }); ctx.restore(); }; //# Simulation container.simulation = d3 .forceSimulation() .stop() .on("tick", () => container.draw()); //Force based node layout engine. container.ctx = DOM.context2d(width, height); container.canvas = container.ctx.canvas; container.containerSelection.append(() => container.canvas); container.canvasSelection = d3 .select(container.canvas) .style("position", "absolute") .style("top", "0px") .style("left", "0px") .style("pointer-events", "none"); container.zoom = d3.zoom(); // The zoom an pan manager. container.containerSelection.call( container.zoom.on("zoom", () => container.draw()) ); container.zoom.translateTo( container.containerSelection, -width / 2, -height / 2 ); container.drag = d3 .drag() .on("drag", (e, d) => { d.fx = e.x; d.fy = e.y; d.x = e.x; d.y = e.y; container.draw(); }) .on("end", (e, d) => { d.x = d.fx; d.y = d.fy; d.xv = 0; d.yv = 0; d.fx = null; d.fy = null; container.draw(); }); } else { container = this; } //# Data let facts = im.Set(); // Holds all pushed facts, prevents the addition of duplicates let factIndex = im.Map({ E: im.Map(), EA: im.Map(), EV: im.Map() }); //which simplifies the logic for handling added facts. let attrs = im.Map(); // Maps entity IDs to entity attributes. let nodesById = im.Map(); // Maps entity IDs to nodes. let forceEdges = []; // Holds all the force information between nodes for (const triple of triples) { const e = triple.e; const a = triple.a; const v = triple.v; const fact = im.List([e, a, v]); facts = facts.add(fact); factIndex = factIndex .updateIn(["EA", im.List([e, a])], (facts = im.List()) => facts.push(fact) ) .updateIn(["EV", im.List([e, v])], (facts = im.List()) => facts.push(fact) ) .updateIn(["E", im.List([e])], (facts = im.List()) => facts.push(fact)); nodesById = nodesById.set( e, nodesById.get( e, container.nodesById.get(e, { id: e, label: e, color: hashPastel.hex(e) + "80" }) ) ); let vn = nodesById.get(v, container.nodesById.get(v)); attrs = attrs.set( fact, container.attrs.get(fact, { id: tribles.UFOID.now(), fact, entity: e, attribute: a, value: v, label: attrNames.get(a), color: hashPastel.hex(a) + "80" }) ); } container.facts = facts; container.factIndex = factIndex; container.attrs = attrs; container.nodesById = nodesById; container.forceEdges = [ ...container.facts .filter( fact => container.nodesById.get(fact.get(0)) && container.nodesById.get(fact.get(2)) ) .toSet() .map(fact => ({ source: container.nodesById.get(fact.get(0)), target: container.nodesById.get(fact.get(2)) })) ]; const nodes = [...nodesById.values()]; // const matchedFacts = im.Set(selectedNode.cxnApplication?.binding.bindTriples(selectedNode.cxnApplication.matching.triples).map(t => im.List([t.e,t.a,t.v]))); // const mergedFacts = im.Set(selectedNode.cxnApplication?.binding.bindTriples(selectedNode.cxnApplication.merging.triples).map(t => im.List([t.e,t.a,t.v]))); let entitytables = container.tableSelection .selectAll(".entitytable") .data(nodes, d => d.id) .join(enter => { let tables = enter .append("table") .classed("entitytable", true) .style("padding", "0px") .style("margin", "0px") .style("color", "#1b1e23") .style("font", "12px/1.5 Iowan Old Style") .style("border", "1px solid #a9b0bd") .style("border-collapse", "collapse") .style("transform-origin", "0 0") .style("position", "absolute") .call(container.drag) .each((d, i, g) => (d.node = g[i])); tables.append("thead"); tables.append("tbody"); return tables; }); let entitytableheads = entitytables.select("thead"); let entitytablebodys = entitytables.select("tbody"); const rowSelection = entitytablebodys .selectAll("tr") .data( d => [ ...container.factIndex .getIn(["E", im.List([d.id])]) .map(fact => container.attrs.get(fact)) ], d => d.id ) .join(enter => { let rows = enter.append("tr").classed("entityattribute", true); rows .append("td") .classed("attributecell", true) .style("height", "20px") .style("padding", "2px 4px 2px 4px") .style("border", "1px solid #a9b0bd") .style("text-align", "left") .style("overflow", "hidden") .style("text-overflow", "ellipsis") .style("white-space", "nowrap"); rows .append("td") .classed("valuecell", true) .style("padding", "2px 4px 2px 4px") .style("text-align", "left") .style("overflow-wrap", "break-word") .style("overflow", "hidden") .style("text-overflow", "ellipsis") .style("white-space", "nowrap") .style("max-width", "120px"); return rows; }); // .style('background', d => { // const topColor = matchedFacts.has(d.fact) ? "#ff99cc" : null; // const bottomColor = mergedFacts.has(d.fact) ? "#ffe699" : null; // const gradient = `linear-gradient(to bottom, ${topColor || // bottomColor || // "#fff"} 0%,${topColor || bottomColor || "#fff"} 50%,${bottomColor || // topColor || // "#fff"} 50%,${bottomColor || topColor || "#fff"} 100%)`; // return gradient; // }) // .sort((a, b) => a.label.localeCompare(b.label)); rowSelection .selectAll(".attributecell") .each((d, i, g) => (d.nodeAttrCell = g[i])) .text(d => d.label); rowSelection .selectAll(".valuecell") .each((d, i, g) => (d.nodeValueCell = g[i])) // .style("background-color", d => isVariable(d.value) && hashPastel.hex(d.value.id)) // Colouring variables for better visibility .text(d => {if(container.factIndex.get("E").has(im.List([d.value]))) return ""; if(isVariable(d.value)) { const upperBound = binding.upperBounds.get(d.value, ""); const lowerBound = binding.lowerBounds.get(d.value, ""); return `?${d.value.name} (${lowerBound}/${upperBound})`; } return d.value; } ); container.simulation.nodes(nodes); container.simulation .force("center", d3.forceCenter(width / 2, height / 2)) .force("charge", d3.forceManyBody().strength(charge)) .force("valsRight", alpha => { const strength = valsRight; container.factIndex .get("EV") .keySeq() .forEach(([e_id, v_id]) => { let e = container.nodesById.get(e_id); let v = container.nodesById.get(v_id); if (e && v) { let vel; if (v.x <= e.x) { vel = alpha * strength; } else { const dist = v.x - e.x || 1; vel = alpha * strength * (1 / (Math.pow(dist / 300, 2) + 1)); } e.vx -= vel; v.vx += vel; } }); }) .force( "link", d3.forceLink(container.forceEdges).distance(d => linkDistance) ) .alpha(1) .restart(); container.draw(); return container; }3a:T1502,viewof combinableNodes = { const dx = 12; const dy = 24; const marginLeft = 40; const nodeRadius = 8; const highlightGap = 2; const arrowGap = 10; const font = '10px sans-serif'; const fontGap = 2; const cxnInitials = cxnId => cxnId.match(/^.|[A-Z]/g).join(""); let matchingCxnId = null; const canvas = DOM.canvas(width, simHeight); const interactionCanvas = DOM.canvas(width, simHeight); const context = canvas.getContext('2d'); const interactionContext = interactionCanvas.getContext('2d'); const treeLink = d3 .linkHorizontal() .x(d => d.x) .y(d => d.y) .context(context); const pixelRatio = window.devicePixelRatio; canvas.width = width * pixelRatio; canvas.height = simHeight * pixelRatio; interactionCanvas.width = width * pixelRatio; interactionCanvas.height = simHeight * pixelRatio; canvas.style.width = `${width}px`; canvas.style.height = `${simHeight}px`; canvas.style.cursor = 'move'; interactionCanvas.style.width = `${width}px`; interactionCanvas.style.height = `${simHeight}px`; const draw = () => { const nodes = simulation.nodes(); const links = simulation.force("link").links(); const transform = d3.zoomTransform(canvas); context.save(); context.clearRect(0, 0, canvas.width, canvas.height); //context.translate((width / 2) * pixelRatio, (simHeight / 2) * pixelRatio); context.translate(transform.x, transform.y); context.scale(transform.k * pixelRatio, transform.k * pixelRatio); for (const link of links) { let s = [link.target.x, link.target.y]; let t = [link.source.x, link.source.y]; let d = vnorm(vsub(s, t)); context.strokeStyle = context.fillStyle = hashPastel.hex( link.target.data.cxnId ); context.beginPath(); context.moveTo(...s); context.lineTo(...vadd(t, vsmul(arrowGap + 2, d))); context.stroke(); context.save(); context.translate(...vadd(t, vsmul(arrowGap, d))); context.restore(); } context.textAlign = "center"; context.textBaseline = "middle"; context.font = font; for (const node of nodes) { context.fillStyle = context.strokeStyle = hashPastel.hex(node.data.cxnId); context.beginPath(); context.arc(node.x, node.y, nodeRadius, 0, 2 * Math.PI); context.fill(); if (canvas.value && canvas.value.has(node.id)) { context.beginPath(); context.arc(node.x, node.y, nodeRadius + highlightGap, 0, 2 * Math.PI); context.stroke(); } context.fillStyle = "#FFF"; context.fillText( cxnInitials(node.data.cxnId), node.x, node.y, (nodeRadius - fontGap) * 2 ); } context.restore(); interactionContext.save(); interactionContext.clearRect( 0, 0, interactionCanvas.width, interactionCanvas.height ); interactionContext.translate(transform.x, transform.y); interactionContext.scale( transform.k * pixelRatio, transform.k * pixelRatio ); for (const node of nodes) { interactionContext.fillStyle = idToColor(node.interactionIndex); interactionContext.beginPath(); interactionContext.arc(node.x, node.y, nodeRadius, 0, 2 * Math.PI); interactionContext.fill(); } interactionContext.restore(); }; const zoom = d3 .zoom() .scaleExtent([0.05, 2]) .on("zoom", e => draw()); function dragsubject(event) { const [x, y] = [event.x * pixelRatio, event.y * pixelRatio]; const colorData = interactionContext.getImageData(x, y, 1, 1).data; if (colorData[3] === 255) { const transform = d3.zoomTransform(canvas); const node = simulation.nodes()[colorToId(colorData)]; return { x: transform.applyX(node.x), y: transform.applyY(node.y), node }; } } function dragged(event) { const transform = d3.zoomTransform(canvas); const [x, y] = transform.invert([event.x, event.y]); event.subject.node.fx = x; event.subject.node.fy = y; simulation.alpha(1).restart(); } function dragended(event) { event.subject.node.fx = undefined; event.subject.node.fy = undefined; simulation.alpha(1).restart(1); } const drag = d3 .drag() .container(canvas) .subject(dragsubject) // .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); d3.select(canvas) .call(drag) .on("click", e => { if (e.defaultPrevented) return; let [x, y] = d3.pointer(e); [x, y] = [x * pixelRatio, y * pixelRatio]; const colorData = interactionContext.getImageData(x, y, 1, 1).data; if (colorData[3] === 255) { e.preventDefault(); e.stopPropagation(); const node = simulation.nodes()[colorToId(colorData)]; if (matchingCxnId === node.data.cxnId) { if (canvas.value.has(node.id)) { canvas.value.delete(node.id); } else { canvas.value.add(node.id); } } else { matchingCxnId = node.data.cxnId; canvas.value = new Set([node.id]); } canvas.dispatchEvent(new Event("input")); return false; } }) .call(zoom); invalidation.then(() => simulation.on("tick.combinableNodes", null)); simulation.on("tick.combinableNodes", draw); draw(); return canvas; }3b:Tc8e,boxPlot = { const height = 230; const margin = { top: 20, right: 20, bottom: 50, left: 40 }; const data = nodes .valueSeq() .filter(d => d.appliedCxnId) .map(d => ({ name: d.appliedCxnId, y: d.applicationDurationTime })) .groupBy(d => d.name) .entrySeq() .toJS(); const x = d3 .scaleBand() .domain(data.map(([name]) => name)) .range([margin.left, width - margin.right]) .paddingInner(0.3) .paddingOuter(0.1) .align(0.5); const bins = data.map(([name, bin], i) => { bin.sort((a, b) => a.y - b.y); const values = bin.map(d => d.y); const min = values[0]; const max = values[values.length - 1]; const q1 = d3.quantile(values, 0.25); const q2 = d3.quantile(values, 0.50); const q3 = d3.quantile(values, 0.75); const iqr = q3 - q1; // interquartile range const r0 = Math.max(min, q1 - iqr * 1.5); const r1 = Math.min(max, q3 + iqr * 1.5); bin.quartiles = [q1, q2, q3]; bin.range = [r0, r1]; bin.outliers = bin.filter(v => v.y < r0 || v.y > r1); // TODO bin.name = data[i][0]; return bin; }); const y = d3 .scaleLinear() .domain([d3.min(bins, d => d.range[0]), d3.max(bins, d => d.range[1])]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat(name => name.length > 16 ? name.substr(0, 16 - 1) + '…' : name ) .tickSizeOuter(0) ) .selectAll(".tick text") .each(function(_, i) { d3.select(this).attr("transform", `translate(0, ${12 * (i % 3)})`); }); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5)) .call(g => g.select(".domain").remove()); const svg = d3.select(DOM.svg(width, height)); const g = svg .append("g") .selectAll("g") .data(bins) .join("g"); //Whiskers g.append("path") .attr("stroke", d => hashPastel.hex(d.name)) .attr( "d", d => ` M${x(d.name) + x.bandwidth() / 2},${y(d.range[1])} V${y(d.range[0])} ` ); //Boxes g.append("path") .attr("fill", d => hashPastel.hex(d.name)) .attr( "d", d => ` M${x(d.name) + 1},${y(d.quartiles[2])} H${x(d.name) + x.bandwidth()} V${y(d.quartiles[0])} H${x(d.name) + 1} Z ` ); //Median? g.append("path") .attr("stroke", "black") .attr("stroke-width", 2) .attr( "d", d => ` M${x(d.name) + 1},${y(d.quartiles[1])} H${x(d.name) + x.bandwidth()} ` ); //Outliers g.append("g") .attr("fill", d => hashPastel.hex(d.name)) .attr("fill-opacity", 0.2) .attr("stroke", "none") .attr("transform", d => `translate(${x(d.name) + x.bandwidth() / 2},0)`) .selectAll("circle") .data(d => d.outliers) .join("circle") .attr("r", 2) .attr("cx", () => (Math.random() - 0.5) * 4) .attr("cy", d => y(d.y)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }3c:[] 2f:{"id":"4d8b11e0d6740550","slug":"scg-inspectors","title":"SCG Inspectors 🦭","thumbnail":"cc49689b686a361b8b6015b1d73ca504ee70415f07c53e242a4172bb613f4d21","access_level":"public","create_time":"$D2021-06-04T06:56:30.850Z","update_time":"$D2021-08-18T10:07:30.343Z","view_time":null,"first_public_time":"$D2021-08-18T10:28:55.186Z","fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"881937d4acbb2f00","login":"port","name":"port.studio","avatar_url":"https://avatars-next.observableusercontent.com/b014222f47dd07bcc0889cdfc7f1bb7ec557d2da16995108aa1f233a3939cf97","tier":"starter_2024"},"version":18942,"publish_version":18942,"role":null,"authored":false,"authors":[{"type":"individual","id":"c753ee09a9516395","login":"vanjasophie","name":"Vanja Sophie","avatar_url":"https://avatars-next.observableusercontent.com/47c4077e4db81e31888e5ef68c2fe233b2682430475aa04ed3cea968d499a34a","tier":null}],"members":[{"type":"team","id":"881937d4acbb2f00","login":"port","name":"port.studio","avatar_url":"https://avatars-next.observableusercontent.com/b014222f47dd07bcc0889cdfc7f1bb7ec557d2da16995108aa1f233a3939cf97","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7aa2b2f3f4c45532","login":"somethingelseentirely","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5c84375e303cfe995944d31a295628df714f891ba8ae3db413da319a8f74e8f1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"SCG Inspectors 🦭","cells":[{"id":2641,"value":"md`# SCG Inspectors 🦭`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18609,"value":"md`## Sentence Field`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18690,"value":"wordNS = tribles.namespace(wordNamespace)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18626,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18904,"value":"sentenceBox = new tribles.Box(new tribles.KB(new tribles.MemTribleDB(), new tribles.MemBlobDB()))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18607,"value":"viewof sentence = sentenceField(sentenceBox)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18635,"value":"sentence","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18737,"value":"md`## Parse Process Inspector`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18775,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17702,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16374,"value":"md`### Applied constructions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16375,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11543,"value":"md`### Partial distribution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10035,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18755,"value":"md`## Grammar Inspector`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16352,"value":"md`### Precomp distributions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16366,"value":"md`#### Contribution as matching part`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16355,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16369,"value":"md`#### Contribution as merging part`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16361,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16978,"value":"md`### Precomp graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16982,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11536,"value":"md`### Exploration tree`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17489,"value":"tripleIndexToReadableTriples = (ns, triples, short = false) =>\n [...triples]\n .map((t) => t.toJS())\n .map((t) => [\n short ? t.e.name : t.e.name + \", ID: \" + t.e.id,\n im.Map(ns).findKey((vs) => vs[\"id\"] === t.a),\n typeof t.v === \"string\"\n ? t.v\n : short\n ? t.v.name\n : t.v.name + \", ID: \" + t.v.id\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17596,"value":"triplesToReadableTriples = (ns, triples, short = false) =>\n triples\n .map(t => t.toJS())\n .map(t => [\n t.e,\n im.Map(ns.attributes).findKey(vs => vs[\"id\"] === t.a),\n typeof t.v === 'string'\n ? t.v\n : short\n ? t.v.name\n : t.v.name + \", ID: \" + t.v.id\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17632,"value":"simHeight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10056,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18062,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16777,"value":"function idToColor(id) {\n var ret = [];\n if(id < 16777215){ \n ret.push(id & 0xff); // R \n ret.push((id & 0xff00) >> 8); // G \n ret.push((id & 0xff0000) >> 16); // B\n }\nvar col = \"rgb(\" + ret.join(',') + \")\";\nreturn col;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16848,"value":"function colorToId([r,g,b,a]) {\n return r | (g << 8) | (b << 16);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11553,"value":"md`### Transient Structure Frame Graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5063,"value":"viewof viewed_categories = select({\n description: \"Select the categories of entities you want to view.\",\n options: [\"Syntax\", \"Semantics\", \"Words\"],\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17206,"value":"md`#### Applied Constructions (including potential duplicates)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12684,"value":"{\n let appliedCxns = [];\n\n function extractAppliedCxn(partialId, cxns) {\n cxns.push(searchSpace.partials.get(partialId).cxnId);\n for (const parent of searchSpace.partials.get(partialId).parents) {\n extractAppliedCxn(parent, cxns);\n }\n }\n\n extractAppliedCxn(selectedNode.data.id, appliedCxns);\n\n return appliedCxns.slice(1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11567,"value":"md`#### Cxn ${selectedNode.data.cxnId} / ${\n searchSpace.extractTS(selectedNode.data.id).size\n} triples / ${Math.round(selectedNode.applicationDurationTime)} ms @ ${new Date(\n selectedNode.data.timestamp\n).toLocaleTimeString(\"en-US\", { hour12: false })}\n\n${html`

\n\n \n \n \n \n \n \n ${[\n ...(selectedNode.data.binding.mapping.entrySeq().map(\n // .cxnApplication?\n ([a, b]) => html`\n \n \n `\n ) || [])\n ]} \n \n

Binding
${a}	${b}

`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11546,"value":"md`### Cxn-Application performance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10417,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11611,"value":"frameViewTriples = filter_categories(\n searchSpace.extractTS(selectedNode.data.id),\n viewed_categories\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12426,"value":"depthRainbow = depth => d3.scaleSequential(d3.interpolateRainbow).domain(depth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18937,"value":"hashPastel.hex(\"attention\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11332,"value":"hashPastel = new ColorHash({ lightness: 0.7 }) //Computes edge label derived pastel colors for the edges.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4820,"value":"filterByAttr = (attr, filterfn, facts) => {\n const allIDs = new im.Set(facts.map(f => f.e));\n\n const filteredIDs = new im.Set(\n facts.filter(f => f.a === attr && filterfn(f.v)).map(f => f.e)\n );\n const removedIDs = allIDs.subtract(filteredIDs);\n return facts.filter(f => filteredIDs.has(f.e) && !removedIDs.has(f.v));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5188,"value":"filter_categories = (facts, categories) => {\n if (categories.length === 0) return facts;\n const cats = {\n Semantics: [\"cg/semantic\"],\n Words: [\"cg/word\"],\n Syntax: [\"cg/syntax\"]\n };\n let types = [];\n for (let c of categories) {\n types = [...types, ...(cats[c] || [])];\n }\n const typeset = im.Set(types);\n const triples = filterByAttr(\"scg/tag\", t => typeset.has(t), facts);\n return triples.filter(\n trpl => trpl.a !== \"scg/tag\" && trpl.a !== \"scg/schema\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11513,"value":"vlen = ([x, y]) => {\n return Math.sqrt(x * x + y * y);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11515,"value":"vnorm = ([x, y]) => {\n let s = Math.sqrt(x * x + y * y);\n return [x / s, y / s];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11517,"value":"vsmul = (s, [x, y]) => {\n return [s * x, s * y];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11519,"value":"vadd = ([x1, y1], [x2, y2]) => {\n return [x1 + x2, y1 + y2];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11511,"value":"vsub = ([x1, y1], [x2, y2]) => {\n return [x1 - x2, y1 - y2];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11522,"value":"vang = ([x, y]) => {\n return Math.atan2(y, x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4323,"value":"isReadablename = (n) => im.Set([\":isa\", \"rdf:type\", \"name\"]).has(n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5544,"value":"md`# Import 📦`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18688,"value":"import { wordNamespace, isVariable } from \"@port/streaming-construction-grammar\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1588,"value":"ColorHash = require('color-hash@1.0.3/dist/color-hash.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"bboxCollide = require('d3-bboxCollide')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import {\n mutableForm,\n checkbox,\n radio,\n input,\n button,\n slider,\n select,\n} from \"@mootari/mutable-forms\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2302,"value":"im = require('immutable@4.0.0-rc.12')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13460,"value":"tribles = require(\"tribles@0.8.2/dist/tribles.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 30:"$2f:body"