30:T6cf,# @hpcc-js/graph _Quick example of the GraphHTML Widget from @hpcc-js/graph package._ To get started install the graph library: ```bash npm i --save @hpcc-js/graph ``` Then add a placeholder into your web page: ```html

Note: The host must specify a width and a height for the Graph Widget to render into. The Graph Widget will automatically resize to that space.

Next import the `GraphHtml` widget and create a new instance, targeting the `placeholder` and setting some default options and event handlers: ```js import {GraphHtml} from "@hpcc-js/graph"; const graph = new GraphHtml() .target("placeholder") .dragSingleNeighbors(true) .edgeColor("#287EC4") .edgeStrokeWidth(1.66) .edgeArcDepth(2.5) .forceDirectedAlphaDecay(0.01) .layout("ForceDirectedHybrid") .applyScaleOnLayout(true) .on("vertex_click", (row, col, sel) => console.log("click", row, col, sel)) .on("vertex_dblclick", (row, col, sel) => console.log("dblclick", row, col, sel)) .on("vertex_mousein", (row, col, sel) => console.log("mousein", row, col, sel)) .on("vertex_mouseover", (row, col, sel) => console.log("mouseover", row, col, sel)) .on("vertex_mouseout", (row, col, sel) => console.log("mouseout", row, col, sel)) ; ``` Finally set some data and render it: ```js graph .data(graphData) .lazyRender() ; ``` Make some changes and re-render: ```js graph .data(newData) .layout("DOT") .lazyRender() ; ``` After the hosting div changes width or height: ```js graph .resize() .lazyRender() ; ``` ---31:T4f8,graphData = { const idxMap = {}; const vertices = miserables.nodes.map((row, idx)=>{ const vertex = { categoryID: row.group, id: idx, text:row.id, icon: row.group == 0 ? { imageChar: "fa-home", height: 48, fill: colors[row.group], }: row.group == 1 ? { imageChar: "fa-car", height: 32, fill: colors[row.group], }: row.group == 2 ? { imageChar: "fa-user", height: 32, fill: colors[row.group], } : { shape:"square", imageChar: "fa-question", height: 24, fill: colors[row.group % colors.length], } } if (row.group === 0) { vertex.textBoxAnnotationsS= [{ text: "fa-star", fill: "red", stroke: "darkred" }, { text: "fa-user", fill: "blue", stroke: "darkblue" }, { text: "fa-car", fill: "green", stroke: "darkgreen" }]; } idxMap[row.id] = vertex; return vertex; }); const edges = miserables.links.map((row, idx)=>{ const edge = { id: idx, source: idxMap[row.source], target: idxMap[row.target] }; return edge; }); return { vertices, edges }; };32:T585,function gatherDataTree(widget) { if (!widget) return null; const ignoreList = ["fields", "classed", "wasmFolder"]; const retVal = { label: widget.id() + " (" + widget.classID() + ")", children: [] }; const arr2 = hpccOther.Persist.discover(widget); arr2.forEach(function (prop) { const node = { property: prop.id, type: prop.type === "set" ? prop.set : prop.type, value: graph[prop.id](), description: prop.description, options: prop.set ?? [], children: [], prop }; switch (prop.type) { case "widget": node.children.push(gatherDataTree(widget[prop.id]())); break; case "widgetArray": case "propertyArray": const arr = widget[prop.id](); if (arr) { arr.forEach(function (item) { node.children.push(gatherDataTree(item)); }, this); } break; default: } if (ignoreList.indexOf(prop.id) < 0) { retVal.children.push(node); } }, this); return retVal; }33:[] 2e:{"title":"@hpcc-js/graph","cells":[{"id":480,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":1071,"value":"## Live Demo","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"placeholder = html`

`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"## Initialize Graph","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"graph = new hpccGraph.GraphHtml()\n .target(placeholder)\n .on(\"vertex_click\", (row, col, sel) => console.log(\"click\", row, col, sel))\n .on(\"vertex_dblclick\", (row, col, sel) => console.log(\"dblclick\", row, col, sel))\n .on(\"vertex_mousein\", (row, col, sel) => console.log(\"mousein\", row, col, sel))\n .on(\"vertex_mouseover\", (row, col, sel) => console.log(\"mouseover\", row, col, sel))\n .on(\"vertex_mouseout\", (row, col, sel) => console.log(\"mouseout\", row, col, sel))\n ;","pinned":true,"hidden":false,"mode":"ojs"},{"id":1006,"value":"## Set look and field options","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"graph\n .dragSingleNeighbors(true)\n .edgeColor(\"#287EC4\")\n .edgeStrokeWidth(1.66)\n .edgeArcDepth(2.5)\n .forceDirectedAlphaDecay(0.01)\n .layout(\"ForceDirectedHybrid\")\n .applyScaleOnLayout(true)\n .lazyRender()\n;","pinned":true,"hidden":false,"mode":"ojs"},{"id":1102,"value":"### Available Settings\n\n_This is the aggregated list of \"Published Properties\"_","pinned":false,"hidden":false,"mode":"md"},{"id":1111,"value":"viewof table = Inputs.table(graphProps.children, { columns:[\"property\", \"type\", \"value\", \"description\"], width: { property: 240, type: 240, value: 120 } })","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"## Data prep and update ","pinned":false,"hidden":false,"mode":"md"},{"id":831,"value":"import {miserables} from \"@d3/force-directed-graph\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"colors = d3.schemeObservable10","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"graph\n .data(graphData)\n .lazyRender()\n;","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"{\n yield html`css loading`;\n const css = html``;\n document.head.appendChild(css);\n yield html`css loaded`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"hpccGraph = import(\"@hpcc-js/graph\"); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1078,"value":"hpccOther = require(\"@hpcc-js/other@2\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"graphProps = gatherDataTree(graph);","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}