{"version":3,"sources":["https://lively-kernel.org/lively4/swd21-pipes-and-filters/src/components/demo/graphdensity-viz.js"],"names":["Morph","Panning","GraphdensityViz","initialize","createUI","query","lively","ctx","dotSource","edges","size","nodesSize","count","edge","Math","round","random","push","join","element","pane","querySelector","value","update","innerHTML","source","graphviz","updateViz","style","document","createElement","textContent","display","get","appendChild","evt"],"mappings":"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","file":"graphdensity-viz.js","sourcesContent":["import Morph from 'src/components/widgets/lively-morph.js';\nimport {Panning} from \"src/client/html.js\"\n\nexport default class GraphdensityViz extends Morph {\n  \n  initialize() {\n    this.createUI()\n  }\n  \n  query(query) {\n    return lively.query(this.ctx, query)\n  }\n\n  async dotSource() {\n    var edges = []\n\n    var size = this.size()\n    var nodesSize = this.nodesSize()\n    for(let count=1; count < size; count++) {\n      var edge = \"\" + ((count % nodesSize) + 1) + \" -> \" + Math.round(Math.random(nodesSize) * nodesSize)\n      edges.push(edge)\n    }\n\n    return `digraph {\n      rankdir=LR;\n      graph [  \n        splines=\"false\"  \n        overlap=\"true\"  ];\n      node [ style=\"solid\"  shape=\"plain\"  fontname=\"Arial\"  fontsize=\"14\"  fontcolor=\"black\" ];\n      edge [  fontname=\"Arial\"  fontsize=\"8\" ];\n\n\n      ${edges.join(\";\\n\")}\n    }`\n  }\n\n  size() {\n    var element = this.pane.querySelector(\"input#size\")\n    return element ? element.value : 50;\n  }\n\n  nodesSize() {\n    var element =  this.pane.querySelector(\"input#nodes\")\n    return element ? element.value : 50;\n  }\n\n  async update() {\n    this.pane.querySelector(\"#nodeslabel\").innerHTML = this.nodesSize()\n    this.pane.querySelector(\"#sizelabel\").innerHTML = this.size()\n    var source = await this.dotSource()\n    this.graphviz.innerHTML = `<` +`script type=\"graphviz\">${source}<` + `/script>}`\n    await this.graphviz.updateViz()\n  }\n\n\n  async createUI() {  \n    \n\n     this.graphviz = await (<graphviz-dot></graphviz-dot>)\n\n\n    var style = document.createElement(\"style\")\n    style.textContent = `\n    td.comment {\n      max-width: 300px\n    }\n    div#root {\n      position: relative; \n      top: 20px; left: 0px; \n      overflow-x: auto; \n      overflow-y: scroll; \n      width: calc(100% - 0px); \n      height: calc(100% - 20px);\n    }\n    `\n    this.graphviz.style.display = \"inline-block\" // so it takes the width of children and not parent\n    this.pane = this.get(\"#pane\")\n    \n    this.pane.appendChild(<div id=\"root\">\n      {style}\n       <h2>Random Graph</h2>\n       <div>Nodes: \n        <span id=\"nodeslabel\"></span>  <br /> \n        <input input={evt => this.update() } type=\"range\" min=\"1\" max=\"300\" value={ 50} class=\"slider\" id=\"nodes\"></input>\n       </div>\n       <div>Egdes: <span id=\"sizelabel\"></span>  <br />\n        <input input={evt => this.update() } type=\"range\" min=\"1\" max=\"300\" value={ 50} class=\"slider\" id=\"size\"></input>\n      </div>\n       <div style=\"height: 20px\"></div>\n      {this.graphviz}\n    </div>)\n    this.update()\n\n    new Panning(this.pane)\n    \n    \n    \n    \n  }\n\n\n  \n}"]}