25:["$","title",null,{"children":"Hierarchy Slicer | giammaria | Observable"}] 49:T51d,mutable searchedNodes = { if(!allNodes) return allNodes .forEach(n=>{ n.data.label = n.data.label.replace("*", "").trim() }) if(search && search.length === allNodesCount) return null let searchNodeMatches = [] let searchIds = search.map(s=>s.id) let test = [] allNodes .forEach(n=>{ // n.data.label = n.data.label.replace(" *", "") const data = n.data search.forEach(s=>{ let searchNodeMatchesIds = searchNodeMatches.map(snm=>snm.id) if(n.id === s.id && searchNodeMatchesIds.indexOf(n.id)<0){ n.children = n._children function iterateChildren(nodes){ nodes.forEach(n=>{ if(searchNodeMatchesIds.indexOf(n.id)<0){ searchNodeMatches.push(n) searchNodeMatchesIds.push(n.id) if(n.children) iterateChildren(n.children) } }) } iterateChildren([n]) n.ancestors().forEach(a=>{ if(a.id === s.id){ test.push(s) a.data.label = a.data.label + " *" } if(searchNodeMatchesIds.indexOf(a.id)<0){ searchNodeMatches.push(a) } }) } }) }) return searchNodeMatches }4a:T13c3,indicators = { // Indicator properties /* * name: string * type: number * class: indicator_type[type] * isDataDriven: boolean * isToggle: boolean * backgroundDimensions: {width: number, height: number} * backgroundFill: string * backgroundStroke: string * foregroundFill: string * foregroundStroke: string * foregroundPathProps: {x: number, y: number, width: number, height: number, path: string} */ const indicator_type = ["expand/collapse", "select/intermediate/deselect", "node-icon"]; const expandForegroundSVGString = ''; const collapseForegroundSVGString = ''; const selectedForegroundSVGString = '' const deselectedForegroundSVGString = '' const intermediateForegroundSVGString = '' const indicators = [ {name: "expand", type: 0, class: indicator_type[0], isDataDriven: false, isToggle: true, backgroundDimensions: {width: 16, height: 16}, backgroundFill: "rgba(0,0,0,0)", backgroundStroke: "rgba(0,0,0,0)", foregroundFill: "#777", foregroundStroke: "#777", foregroundPathProps: getSVGProperties(expandForegroundSVGString)}, {name: "collapse", type: 0, class: indicator_type[0], isDataDriven: false, isToggle: true, backgroundDimensions: {width: 16, height: 16}, backgroundFill: "rgba(0,0,0,0)", backgroundStroke: "rgba(0,0,0,0)", foregroundFill: "#777", foregroundStroke: "#777", foregroundPathProps: getSVGProperties(collapseForegroundSVGString)}, {name: "selected", type: 1, class: indicator_type[1], isDataDriven: false, isToggle: true, backgroundDimensions: {width: 16, height: 16}, backgroundFill: "#fff", backgroundStroke: "rgba(0,0,0,0)", foregroundFill: "#000", foregroundStroke: "rgba(0,0,0,0)", foregroundPathProps: getSVGProperties(selectedForegroundSVGString)}, {name: "deselected", type: 1, class: indicator_type[1], isDataDriven: false, isToggle: true, backgroundDimensions: {width: 16, height: 16}, backgroundFill: "#fff", backgroundStroke: "rgba(0,0,0,0)", foregroundFill: "#AAA", foregroundStroke: "rgba(0,0,0,0)", foregroundPathProps: getSVGProperties(deselectedForegroundSVGString)}, {name: "intermediate", type: 1, class: indicator_type[1], isDataDriven: false, isToggle: true, backgroundDimensions: {width: 16, height: 16}, backgroundFill: "#fff", backgroundStroke: "rgba(0,0,0,0)", foregroundFill: "#444", foregroundStroke: "rgba(0,0,0,0)", foregroundPathProps: getSVGProperties(intermediateForegroundSVGString)}, {name: "icon", type: 2, class: indicator_type[2], isDataDriven: true, isToggle: false, backgroundDimensions: {width: 48, height: 24}, backgroundFill: "rgba(0,0,0,0)", backgroundStroke: "rgba(0,0,0,0)", foregroundFill: "#444", foregroundStroke: "rgba(0,0,0,0)", foregroundPathProps: null} ] return indicators; }4b:Tcdb,function collapsibleIndent(params) { /* kicks everything off visual-wise * @param data - the dataset passed to the visual * @param options - the array of visual options * @param isSearched - indicates whether a search is currently being performed */ let data = params.data , options = params.options , isSearched = params.isSearched; // all margins besides the left margin are set in the options. For the left margin, base it off of the indicatorSize // indicator size is the max indicator width options.marginLeft = Math.round(options.indicatorSize/4)+1; //d3.stratify transforms a tree from link representation to hierarchy. let root = d3.stratify() .id(d => d['id']) .parentId(d => d['parent_id'])(data); let index = -1; root.eachBefore(function(n) {++index}); // counts original number of nodes -1 // calculate the height based on the number of nodes const height = Math.max(options.minHeight, (index) * options.lineSpacing + options.marginTop + options.marginBottom) // create the svg canvas where the visual elements will live const canvas = d3.create("svg") .classed('svg-canvas', true) .attr('width', width) .attr("viewBox", [options.marginLeft, -options.marginTop, width, height]) .style("font", "10px sans-serif") .style("user-select", "none"); // create a group for all visual elements const g = canvas.append("g") .classed('g-canvas', true) .attr('transform', `translate(${options.indicatorSize},0)`) // create a group for all link visual elements const gLink = g.append("g") .classed('g-link', true) .attr("fill", "none") .attr("stroke", options.linkColor) .attr("stroke-width", .75); // create a group for all node visual elements const gNodes = g.append("g") .classed('g-nodes', true) .attr("pointer-events", "all"); //tree layout function let tree = d3.tree() .nodeSize([options.lineSpacing, options.indentSpacing]) // for transition purposes, x0 and y0 will act as the previous x and y coordinates // since the visual is just now being initialized, set the root's previous coordinates to 0,0 root.x0 = 0; root.y0 = 0; //for all nodes root.descendants().forEach((d, i) => { // for performance purposes, replace the existing id with the node's integer index d.id = i; // mark each node as deselected. selectionIndicatorTypes: // 0: deselected // 1: selected // 2: intermediate d._selectionIndicatorType = 0; // when a node is collapsed, children are set to null for visual purposes. _children will preserve the node's children // _children will act as the node's permanent children // children will act as the node's temporary children d._children = d.children; // make the label searchable d._label = d.data.label; // if a search is not being performed and the current node is not the root node set the temporary children to null // When a search is being performed, we want all nodes to be expanded up to the match if(!isSearched && d.depth){ d.children = null; } }); // call updateRoot() updateRoot({root: root, options: options, source: root, canvas: canvas, indexLast: index}); return canvas.node(); }4c:T613,function updateRoot(params) { /* determine and transition root to the updated coordinates * @param root - root node * @param options - the array of visual options * @param source - the node where the update was triggered * @param canvas - svg container where the visual elements live * @param indexLast - prior index */ let root = params.root , options = params.options , source = params.source , canvas = params.canvas , indexLast = params.indexLast ? params.indexLast : -1 // determine the current position for each node let index = -1; root.eachBefore(function(n) { // WARNING: x and y are switched because the d3.tree is vertical rather than the default horizontal index=index+1 n.x = (index+.5) * options.lineSpacing; n.y = n.depth * options.indentSpacing; }); // update the canvas's viewBox height const height = Math.max(options.minHeight, (index+1) * options.lineSpacing + options.marginTop + options.marginBottom ); canvas.transition().delay(indexLast { d.x0 = d.x; d.y0 = d.y; }); }4d:T13b3,updateVisualNodes = function(params){ //{root: root, source: source, canvas: canvas, index: index, updateRoot: updateRoot} /* update node elements * @param root - root node * @param source - the node where the update was triggered * @param canvas - svg container where the visual elements live * @index - counts original number of nodes -1 */ let root = params.root , source = params.source , canvas = params.canvas , index = params.index , updateRoot = params.updateRoot //root, source, canvas, index, updateRoot async function asyncInit(){ const gLink = canvas.select('.g-link'); const gNodes = canvas.select('.g-nodes'); const nodeData = root.descendants().reverse(); const linkData = root.links(); // Update the nodes… const gNode = gNodes.selectAll(".g-node") .data(nodeData, d => d.id); // Enter any new nodes at the parent's previous position. let nodeEnter = gNode .enter() .append("g") .classed('g-node', true) .attr('node-id', (d)=>d.id) .attr("transform", d => `translate(${d.y},${source.x0})`) // WARNING: x and y are switched because the d3.tree is vertical rather than the default horizontal .attr("fill-opacity", 0) .attr("stroke-opacity", 0) nodeEnter .append('g') .classed('g-indicators', true) // Transition nodes to their new position. const nodeUpdate = gNode.merge(nodeEnter).transition().duration(options.duration).ease(options.ease) .attr("transform", d => `translate(${d.y},${d.x})`)// WARNING: x and y are switched because the d3.tree is vertical rather than the default horizontal .attr("fill-opacity", 1) .attr("stroke-opacity", 1) // label text let label = nodeEnter .append('g') .classed('g-text-label', true) .append("text") .classed('text-label', true) .attr('pointer-events', 'none') .attr('fill', options.labelColor) .attr('font-size', options.labelFontSize) .attr("text-anchor", "start") .style("font-weight", 400) .attr("dy", "0.32em") .attr('opacity', 0.75) .text(d => d.data.label); nodeUpdate.selectAll('.text-label') //.transition().duration(options.duration) .attr('opacity', (d)=>d._selectionIndicatorType === 1 ? 1 : 0.75) .style("font-weight", (d)=>d._selectionIndicatorType === 1 ? 600 : 400) nodeUpdate.each(function(d){ const gIndicators = d3.select(this).select('.g-indicators'); updateVisualExpandCollapseIndicators(gIndicators); updateVisualSelectIndicators(gIndicators); updateVisualNodeIconIndicators(gIndicators); }); // Transition exiting nodes to the parent's new position. const nodeExit = gNode.exit().transition().duration(options.duration).ease(options.ease).remove() .attr("transform", d => `translate(${d.y},${source.x})`)// WARNING: x and y are switched because the d3.tree is vertical rather than the default horizontal .attr("fill-opacity", 0) .attr("stroke-opacity", 0); //click events gNodes .selectAll('.g-indicators') .selectAll('.expand-collapse-indicator') .selectAll('.clickable-rect') .attr("cursor", (d)=>d._children ? "pointer" : "default") .on("click", function(event, d){ const currentChildren = d.children ? null : d._children d.descendants().forEach(c=>{c.children = currentChildren}) d.children = currentChildren updateRoot({root: root, options: options, source: d, canvas: canvas, indexLast: index}); }); //click events gNodes .selectAll('.g-indicators') .selectAll('.select-indicator') .selectAll('.clickable-rect') .attr("cursor", "pointer") .on("click", function(event, d){ const gNode = getAncestorSelectionByClass(d3.select(this), 'g-node') const selectionTypeValue = gNode.data()[0]._selectionIndicatorType === 0 ? 1 : 0 controllerUpdateDataSelectionType(gNode.data()[0], selectionTypeValue) updateRoot({root: root, options: options, source: d, canvas: canvas, indexLast: index}); }) //await delay(1); gNodes.selectAll('.g-indicators').each(function(d){ let indicatorXs = [0] let indicatorWidths = [0] d3.select(this).selectAll('.indicator-foreground-svg').each(function(ifs){ indicatorXs.push(+d3.select(this).attr('x')) indicatorWidths.push(+d3.select(this).attr('width')) }) let maxIdicatorX = d3.max(indicatorXs) let maxWidth = d3.max(indicatorWidths) const textLabel = d3.select(d3.select(this).node().parentNode).select('.text-label') textLabel .attr('x', maxIdicatorX+maxWidth+5) }); } asyncInit(); }4e:Td3a,updateVisualExpandCollapseIndicators = function(selectedNode){ let d =selectedNode.data()[0]; if(d.depth === 0) return; if(!d._children) return; let props = d.children ? getIndicatorProps("collapse", options) : getIndicatorProps("expand", options); let foregroundPathProps = props.foregroundPathProps; let gExpandCollapse = selectedNode.select('.expand-collapse-indicator'); let x = getIndicatorX(d, options.indicators, props) props.backgroundDimensions.width = d3.max([options.lineSpacing*.5, 15]) props.backgroundDimensions.height = d3.max([options.lineSpacing*.5, 15]) if(!gExpandCollapse.node()){ gExpandCollapse = selectedNode .append('g') .classed('expand-collapse-indicator', true); } let clickableRect = gExpandCollapse.select('.clickable-rect') if(!clickableRect.node()){ clickableRect = gExpandCollapse .append("rect") .classed("clickable-rect", true) .attr("width", props.backgroundDimensions.width*2) .attr("height", options.lineSpacing) .attr("x", x-props.backgroundDimensions.width/2) .attr("y", -options.lineSpacing/2) .attr("fill", "#eee") .attr('opacity', 0) } let backgroundRect = gExpandCollapse.select('.background-rect') if(!backgroundRect.node()){ backgroundRect = gExpandCollapse .append("rect") .classed("background-rect", true) .style('pointer-events', 'none') .attr("width", props.backgroundDimensions.width) .attr("height", props.backgroundDimensions.height) .attr("x", d.children ? -props.backgroundDimensions.width/2 : 0) .attr("y", -props.backgroundDimensions.height/2) .attr("fill", props.backgroundFill) .attr("stroke", props.backgroundStroke) .attr("stroke-width", .5); } backgroundRect .transition().duration(options.duration).ease(options.ease) .attr("fill", props.backgroundFill) .attr("stroke", props.backgroundStroke) .attr("stroke-width", .5); let expandCollapseSVG = gExpandCollapse.select('.indicator-foreground-svg') if(!expandCollapseSVG.node()){ expandCollapseSVG = gExpandCollapse .append('svg') .classed('indicator-foreground-svg', true) .style('pointer-events', 'none') .attr("x", x) .attr("y", -props.backgroundDimensions.height/2) .attr("width", props.backgroundDimensions.width) .attr("height", props.backgroundDimensions.height) .attr("viewBox", foregroundPathProps.viewBox) } expandCollapseSVG .transition().duration(options.duration).ease(options.ease) .attr("x", x) .attr("y", -props.backgroundDimensions.height/2) .attr("width", props.backgroundDimensions.width) .attr("height", props.backgroundDimensions.height) .attr("viewBox", foregroundPathProps.viewBox) let expandCollapsePath = expandCollapseSVG.select('.expand-collapse-foreground-path'); if(!expandCollapsePath.node()){ expandCollapsePath = expandCollapseSVG .append('path') .classed('expand-collapse-foreground-path', true) .attr('d', foregroundPathProps.path) .attr('stroke', props.foregroundStroke) .attr('fill', props.foregroundFill); } expandCollapsePath .transition().duration(options.duration).ease(options.ease) .attr('d', foregroundPathProps.path) .attr('stroke', props.foregroundStroke) .attr('fill', props.foregroundFill); }4f:Tdee,updateVisualSelectIndicators = function(gNode){ let gSelect = gNode.select('.select-indicator'); if(!gSelect.node()){ gSelect = gNode .append('g') .classed('select-indicator', true) } let d =gNode.data()[0]; let selectionIndicatorType = d._selectionIndicatorType let props; switch (true){ case (selectionIndicatorType === 1): props = getIndicatorProps("selected", options) break; case (selectionIndicatorType === 2): props = getIndicatorProps("intermediate", options) break; default: props = getIndicatorProps("deselected", options) break; } props.backgroundDimensions.width = d3.max([options.lineSpacing*.5, 15]) props.backgroundDimensions.height = d3.max([options.lineSpacing*.5, 15]) let foregroundPathProps = props.foregroundPathProps; let x = getIndicatorX(d, options.indicators, props) let clickableRect = gSelect.select('.clickable-rect') if(!clickableRect.node()){ clickableRect = gSelect .append("rect") .classed("clickable-rect", true) .attr("width", width) .attr("height", options.lineSpacing) .attr("x", x-props.backgroundDimensions.width/2) .attr("y", -options.lineSpacing/2) .attr("fill", options.nodeMouseoverColor) .attr('opacity', 0) } clickableRect .on("mouseover", function(d){d3.select(this).transition().duration(0).ease(options.ease).attr('opacity', 1)}) .on("mouseout", function(d){d3.select(this).transition().duration(0).ease(options.ease).attr('opacity', 0)}) let backgroundRect = gSelect.select('.background_rect') if(!backgroundRect.node()){ backgroundRect = gSelect .append("rect") .classed("background_rect", true) .style('pointer-events', 'none') .attr("width", props.backgroundDimensions.width) .attr("height", props.backgroundDimensions.height) .attr("x", x) .attr("y", -props.backgroundDimensions.height/2) .attr("fill", props.backgroundFill) .attr("stroke", props.backgroundStroke) .attr("stroke-width", .5); } backgroundRect //.transition().duration(options.duration).ease(options.ease) .attr("fill", props.backgroundFill) .attr("stroke", props.backgroundStroke) .attr("stroke-width", .5); let selectSVG = gSelect.select('.indicator-foreground-svg') if(!selectSVG.node()){ selectSVG = gSelect .append('svg') .classed('indicator-foreground-svg', true) .style('pointer-events', 'none') .attr("x", x) .attr("y", -props.backgroundDimensions.height/2) .attr("width", props.backgroundDimensions.width) .attr("height", props.backgroundDimensions.height) .attr("viewBox", foregroundPathProps.viewBox) } selectSVG .transition().duration(options.duration).ease(options.ease) .attr("x", x) .attr("y", -props.backgroundDimensions.height/2) .attr("width", props.backgroundDimensions.width) .attr("height", props.backgroundDimensions.height) .attr("viewBox", foregroundPathProps.viewBox) let selectPath = selectSVG.select('.select-foreground-path'); if(!selectPath.node()){ selectPath = selectSVG .append('path') .classed('select-foreground-path', true) .attr('d', foregroundPathProps.path) .attr('stroke', props.foregroundStroke) .attr('fill', props.foregroundFill); } selectPath .attr('d', foregroundPathProps.path) .transition().duration(options.duration).ease(options.ease) .attr('stroke', props.foregroundStroke) .attr('fill', props.foregroundFill); }50:Tac0,updateVisualNodeIconIndicators = function(selectedNode){ let d =selectedNode.data()[0]; if(!d.data['svg-element']) return let props = getIndicatorProps("icon", options); let foregroundPathProps = getSVGProperties(d.data['svg-element']) let gNodeIcon = selectedNode.select('.node-icon-indicator'); let x = getIndicatorX(d, options.indicators, props) props.backgroundDimensions.width = d3.max([options.lineSpacing*1.5, 45]) props.backgroundDimensions.height = d3.max([options.lineSpacing*.5, 15]) if(!gNodeIcon.node()){ gNodeIcon = selectedNode .append('g') .classed('node-icon-indicator', true); } let nodeIconBox = gNodeIcon.select('.background-rect') if(!nodeIconBox.node()){ nodeIconBox = gNodeIcon .append("rect") .classed("background-rect", true) .style('pointer-events', 'none') .attr("width", props.backgroundDimensions.width) .attr("height", props.backgroundDimensions.height) .attr("x", x) .attr("y", -props.backgroundDimensions.height/2) .attr("fill", props.backgroundFill) .attr("stroke", props.backgroundStroke) .attr("stroke-width", .5); } nodeIconBox .transition().duration(options.duration).ease(options.ease) .attr("fill", props.backgroundFill) .attr("stroke", props.backgroundStroke) .attr("stroke-width", .5); let nodeIconSVG = gNodeIcon.select('.indicator-foreground-svg') if(!nodeIconSVG.node()){ nodeIconSVG = gNodeIcon .append('svg') .classed('indicator-foreground-svg', true) .style('pointer-events', 'none') .attr("x", x) .attr("y", -props.backgroundDimensions.height/2) .attr("width", props.backgroundDimensions.width) .attr("height", props.backgroundDimensions.height) .attr("viewBox", foregroundPathProps.viewBox) } nodeIconSVG .transition().duration(options.duration).ease(options.ease) .attr("x", x) .attr("y", -props.backgroundDimensions.height/2) .attr("width", props.backgroundDimensions.width) .attr("height", props.backgroundDimensions.height) .attr("viewBox", foregroundPathProps.viewBox) let nodeIconPath = nodeIconSVG.select('.node-icon-foreground-path'); if(!nodeIconPath.node()){ nodeIconPath = nodeIconSVG .append('path') .classed('node-icon-foreground-path', true) .attr('d', foregroundPathProps.path) .attr('stroke', props.foregroundStroke) .attr('fill', props.foregroundFill); } nodeIconPath //.transition().duration(options.duration).ease(options.ease) .attr('d', foregroundPathProps.path) .transition().duration(options.duration).ease(options.ease) .attr('stroke', props.foregroundStroke) .attr('fill', props.foregroundFill); }51:T4a3,updateLinks = function(linkData, source, gLink){ // Update the links… const link = gLink.selectAll("path") .data(linkData, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("stroke-opacity", 0) .attr("d", d => makeLink([d.source.y,source.x] , [d.target.y + (d.target._children ? 0 : options.indicatorSize/2 ), source.x] , options.radius) ); // Transition links to their new position. link.merge(linkEnter).transition().duration(options.duration).ease(options.ease) .attr("stroke-opacity", (d)=>([1,2].indexOf(d.target._selectionIndicatorType)>=0) ? 1 : 0) .attr("d", d => makeLink([d.source.y, d.source.x] , [d.target.y + (d.target._children ? 0 : options.indicatorSize/2 ), d.target.x] , options.radius)); // Transition exiting nodes to the parent's new position. link.exit().transition().duration(options.duration).ease(options.ease).remove() .attr("stroke-opacity", 0) .attr("d", d => makeLink([d.source.y, source.x] , [d.target.y + (d.target._children ? 0 : options.indicatorSize/2 ), source.x] , options.radius) ); }52:T475,getIndicatorX = function(d, indicatorOptions, props){ let indicatorPadding = 2.5; let type0 = indicatorOptions .filter((io)=> io.type === 0) //.filter((io)=> d._children) .filter((io)=> io.name === (io.children ? 'collapse' : 'expand'))[0]; let type0Width = type0.backgroundDimensions.width//type0 && d.depth > 0 ? type0.backgroundDimensions.width : 0 let indicator0X = d.depth > 0 ? -type0Width/2 : -type0.backgroundDimensions.width if(props.type === 0){ return indicator0X } let type1 = indicatorOptions .filter(io=>io.type===1) .filter(io => io.name === (d._selectionIndicatorType === 0 ? 'deselected' : d._selectionIndicatorType === 1 ? 'selected' : 'intermediate'))[0] let indicator1X = type0Width+(d._children ? indicatorPadding : 0) //(d._children ? type0Width+indicatorPadding : 0 ) indicator1X = (d.depth > 0 ? indicator1X : -type1.backgroundDimensions.width/2) if(props.type === 1){ return indicator1X } let type1Width = type1.backgroundDimensions.width let indicator2X = indicator1X + type1Width + 2*indicatorPadding if(props.type === 2){ return indicator2X } }53:T564,initialDataset = FileAttachment("group_dataset_2.json").json().then(d=> d.map(d=>{ d['id'] = d['id'] === "NULL" ? null : d['id']; d['parent_id'] = d['parent_id'] === "NULL" ? null : d['parent_id']; d['label'] = d['label'] === "NULL" ? 'NRRE Groups' : d['label']; d['svg-element'] = d['svg-element'] === "NULL" ? null : d['svg-element']; d['svg-element'] = d['svg-element'] === "" ? null : d['svg-element'] return d; }) .filter(d=>{if(d.label.indexOf('ARG - ')>=0||d.label.indexOf('CSG - ')>=0){return d.label.length > 9}else{return true}}) //.filter((d,i)=>['00000000-0000-0000-0000-000000000000','09058D48-B605-499A-B960-49AE12E3B784','C6F49832-5FAA-48A2-AB46-02F9D3CD543E'].indexOf(d.id)>=0||['C6F49832-5FAA-48A2-AB46-02F9D3CD543E'].indexOf(d.parent_id)>=0) )54:[{"id":"06039d87e2d8d4ee26709f1c6e6370e888a274bb8b3c3d57b97a47fdca6e146979c3f78a466ff414754b14d2f410d2464303e8acd1d6af140d23d946bd738483","href":"https://static.observableusercontent.com/files/06039d87e2d8d4ee26709f1c6e6370e888a274bb8b3c3d57b97a47fdca6e146979c3f78a466ff414754b14d2f410d2464303e8acd1d6af140d23d946bd738483","name":"group_dataset@1.json","type":"application/json","lastModified":1683285508277.914,"size":890948},{"id":"271f96a5111f9d229774a19cb77decf6221c03fedfd286b2b9436d8fb8ed2758d4fc53e0e040360482bf626bb3ccbe810a152f6ef80ee58a86074f1e612e59e0","href":"https://static.observableusercontent.com/files/271f96a5111f9d229774a19cb77decf6221c03fedfd286b2b9436d8fb8ed2758d4fc53e0e040360482bf626bb3ccbe810a152f6ef80ee58a86074f1e612e59e0","name":"group_dataset_2.json","type":"application/json","lastModified":1683660331421.83,"size":2482668}] 29:{"id":"ee953e544f7fa50c","slug":null,"title":"Hierarchy Slicer","thumbnail":"abfd49a531609e50eec53cfe78c51bc14a7702a130ae595647fc3c78498cf3ba","access_level":"public","create_time":"$D2023-05-05T11:18:28.277Z","update_time":"$D2023-05-23T11:18:11.657Z","view_time":null,"first_public_time":"$D2023-05-05T11:18:28.277Z","has_unpublished_edits":null,"fork":{"id":"eea67ef9e2dffe49","slug":null,"title":"Collapsible Indented Tree","owner":{"id":"4ffb92ef16fee1b6","login":"giammaria","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"4ffb92ef16fee1b6","login":"giammaria","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7f4540d75ba2b09b87989db030724d8dc3e666c8c12105b170c0ac73de1b1f01","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3919,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"acb1462e3965fd7b","login":"giammaria","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7f4540d75ba2b09b87989db030724d8dc3e666c8c12105b170c0ac73de1b1f01","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"acb1462e3965fd7b","login":"giammaria","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7f4540d75ba2b09b87989db030724d8dc3e666c8c12105b170c0ac73de1b1f01","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hierarchy Slicer","cells":[{"id":0,"value":"# Hierarchy Slicer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3679,"value":"#### Report Author Configurations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3914,"value":"viewof width = Inputs.range([150,3000], {value: 500, step: 1, label: \"Canvas Width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3683,"value":"viewof duration = Inputs.range([0,1000], {value: 300, step: 1, label: \"Transition Duration\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3699,"value":"viewof linkRadius = Inputs.range([0,100], {value: 6, step: .1, label: \"Node Link Radius\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3707,"value":"viewof linkStroke = Inputs.color({label: \"Node Link Color\", value: \"#aaaaaa\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3721,"value":"viewof labelColor = Inputs.color({label: \"Label Color\", value: \"#444444\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3738,"value":"viewof labelFontSize = Inputs.range([8,75],{value: 18, value: 16, step: 1, label: \"Label Font Size\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3731,"value":"viewof nodeMouseoverColor = Inputs.color({label: \"Node Mouseover Color\", value: \"#eeeeee\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3674,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2730,"value":"_{^{\n**\\*** Search Criteria Match\n}}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2473,"value":"viewof search = allNodes ? Inputs.search(allNodes, {\"filter\": (d)=>{\n if(!d\n || d.length < 3\n ) return (d)=>true\n\n let regexString = d.replace(/\\*/g, '(.+?)')\n console.log(regexString)\n regexString = regexString.replace(/\\?/g,'(.?)')\n regexString = `(${regexString})`\n\n const re = new RegExp(regexString, 'mi');\n\n console.log(re)\n return (d)=>{\n return re.test(d._label)\n }\n}}) : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"main = {\n console.clear();\n // has a search been performed?\n let isSearched = allNodes ? (searchedNodes && searchedNodes.length > 0 && searchedNodes.length < initialDataset.length) : false\n // if a search has been performed, pass those results to the visual, otherwise pass the initial dataset\n let data = isSearched ? searchedNodes.map(d=>d.data) : initialDataset\n // if a search has been performed and the search returned 0 results, output a message indicating this instead of rendering the visual\n if(isSearched && searchedNodes.length < 1){\n return md`Search yielded 0 matches`\n }\n // render the visual\n return collapsibleIndent({data: data, options: options, isSearched: isSearched})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2445,"value":"___\n### Selections:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2254,"value":"**${!searchMatchedNodes ? allNodesCount : selectedNodesCount}** out of **${allNodesCount}** nodes selected\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2247,"value":"output = {\n let type = searchMatchedNodes && searchMatchedNodes.length > 0 ? 1 : 0\n let nodes = type ? searchMatchedNodes : initialDataset\n let selectedLabels = nodes.map(d=>({\"Nodes\": type ? d.data.label : d.label}))\n selectedLabels.forEach(n=>{n.Nodes})\n return Inputs.table(selectedLabels)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3322,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2510,"value":"allNodes = {\n let rootNode = d3.select('.svg-canvas').select('.g-node[node-id=\"0\"]')\n let root = rootNode.node() && rootNode.data() && rootNode.data()[0] ? rootNode.data()[0] : null\n \n if(!root) return []\n \n let allNodes = [root]\n root._children.forEach(c=>{\n allNodes.push(c)\n function addChild(node){\n if(node._children && node._children.length > 0){\n allNodes = allNodes.concat(node._children)\n node._children.forEach(c=>addChild(c))\n }\n }\n if(c._children && c._children.length > 0) addChild(c)\n }\n )\n return allNodes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2564,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2282,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":664,"value":"## Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":657,"value":"options = ({\n indentSpacing: 8,\n lineSpacing: Math.max(labelFontSize,30),\n duration: duration,\n radius: linkRadius, // radius of curve for links\n maxHeight: 800,\n minHeight: 20,\n indicatorSize: indicators.filter(d=>d.type===1).reduce((d,m)=>Math.max(d,m.backgroundDimensions.width),0),\n ease: d3.easeQuadInOut, // https://observablehq.com/@d3/easing-animations\n marginLeft: null,\n marginRight: 120,\n marginTop: 0,\n marginBottom: 0,\n linkColor: linkStroke,\n labelFontSize: labelFontSize,\n labelColor: labelColor,\n nodeMouseoverColor: nodeMouseoverColor,\n indicators: indicators\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1824,"value":"function controllerUpdateDataSelectionType(nodeData, selectionTypeValue){\n if(!nodeData) return\n \n updateDescendantDataSelectionType(nodeData, selectionTypeValue)\n updateAncestorDataSelectionType(nodeData)\n\n const rootSelection = d3.select('.svg-canvas').select('.g-node[node-id=\"0\"]')\n const rootData = rootSelection.data()[0]\n rootData._selectedNodes = collectSelectedNodes(rootData)\n rootSelection.data(rootData)\n \n mutable searchMatchedNodes = rootSelection\n .data()[0]._selectedNodes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1841,"value":"function updateDescendantDataSelectionType(nodeData, selectionTypeValue){\n\n function iterateChildren(data, isCurrent){\n data.forEach(d=>{\n let children = isCurrent ? d.children : d._children\n d._selectionIndicatorType = selectionTypeValue\n\n if(children && children.length > 0){\n iterateChildren(children, isCurrent)\n }\n })\n }\n\n iterateChildren([nodeData], true)\n iterateChildren([nodeData], false)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2015,"value":"function updateAncestorDataSelectionType(nodeData){\n function iterateParent(data, isCurrent){\n if(data.children){\n let childrenSelections = []\n data.children.forEach(c=>{\n childrenSelections.push(c._selectionIndicatorType)\n })\n \n switch(true){\n case (childrenSelections.indexOf(2) >= 0):\n data._selectionIndicatorType = 2\n break;\n case (childrenSelections.indexOf(1) < 0):\n data._selectionIndicatorType = 0\n break;\n case (childrenSelections.indexOf(0) < 0):\n data._selectionIndicatorType = 1\n break;\n case (childrenSelections.length > 0 && childrenSelections.indexOf(1) >= 0):\n data._selectionIndicatorType = 2\n break;\n }\n }\n if(data.parent) iterateParent(data.parent, true)\n }\n\n iterateParent(nodeData, true)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2071,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"#### Utility Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3278,"value":"function getRootNodeSelectionData(){\n const rootNodeSelection = d3.select('.svg-canvas').select('.g-node[node-id=\"0\"]')\n if(\n ! rootNodeSelection.node()\n || !rootNodeSelection.data()\n || !rootNodeSelection.data()[0]\n ) return null\n\n return rootNodeSelection.data()[0]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3122,"value":"function getSelectedNodes(){\n const rootSelection = d3.select('.svg-canvas').select('.g-node[node-id=\"0\"]')\n \n if(!rootSelection.node() \n || !rootSelection.data()\n || !rootSelection.data()[0]\n || !rootSelection.data()[0]._selectedNodes) return []\n \n return rootSelection.data()[0]._selectedNodes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2942,"value":"function getPermanantDescendants(node){\n if(!node\n || !node._children) return []\n \n let descendants = [node]\n node._children.forEach(c=>{\n function iterateChildren(children){\n children.forEach(child=>{\n descendants.push(child)\n if(child._children && child._children.length > 0){\n iterateChildren(child._children)\n }\n })\n }\n iterateChildren([c])\n })\n return descendants\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2853,"value":"function collectSelectedNodes(root){\n\n let descendants = getPermanantDescendants(root) \n let selectedNodes = []\n descendants\n .forEach(d=>{\n if(d._selectionIndicatorType===1){\n function iterateChildren(data){\n data.forEach(d=>{\n let children = d._children\n d._selectionIndicatorType = 1\n if(selectedNodes.map(sn=>sn.id).indexOf(d.id)<0){\n selectedNodes.push(d)\n if(children && children.length > 0){\n iterateChildren(children)\n }\n }\n })\n }\n iterateChildren([d])\n }\n })\n return selectedNodes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"function getAncestorSelectionByClass(selectedNode, ancestorClassName){\n if(!selectedNode.node().parentNode) return\n\n let ancestor = d3.select(selectedNode.node().parentNode)\n while (ancestor.node()) {\n if(ancestor.attr('class') === ancestorClassName){\n return ancestor\n break;\n }\n ancestor = d3.select(ancestor.node().parentNode);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"makeLink = (start, end, radius) => {\n const path = d3.path();\n const dh = 4/3*Math.tan(Math.PI/8) // tangent handle offset\n\n //flip curve\n let fx, fy\n if(end[0] - start[0] == 0){ fx = 0}\n else if(end[0] - start[0] > 0) {fx = 1} \n else {fx = -1}\n if(end[1] - start[1] == 0){ fy = 0}\n else if(end[1] - start[1] > 0) {fy = 1} \n else {fy = -1}\n\n //scale curve when dx or dy is less than the radius\n if( radius == 0 ){ fx=0; fy=0}\n else{\n fx *= Math.min( Math.abs(start[0]-end[0]), radius) / radius\n fy *= Math.min( Math.abs(start[1]-end[1]), radius) / radius\n }\n\n path.moveTo(...start);\n path.lineTo(...[start[0], end[1]-fy*radius]);\n path.bezierCurveTo(\n ...[start[0], end[1]+fy*radius*(dh-1)] , \n ...[start[0]+fx*radius*(1-dh), end[1]], \n ...[start[0]+fx*radius, end[1]]);\n path.lineTo(...end);\n return path\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"function getIndicatorProps(name, options){\n let props = options.indicators.filter(d=>d.name===name);\n return props && props.length === 1 ? props[0] : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"getSVGProperties = function(svgString){\n //extract the viewBox values\n const viewBoxRegex = /viewBox=(?:'|\")([^(?:'|\")]*)(?:'|\")/;\n let viewBoxMatches = viewBoxRegex.exec(svgString);\n let viewBox = viewBoxMatches ? viewBoxMatches[1] : null;\n let viewBoxElements = viewBox ? viewBox.split(' '): null;\n\n //extract the path value\n //const dAttributeRegex = /]*d=\"([^\"]*)\"/;\n const dAttributeRegex = /]*d=(?:'|\")([^(?:'|\")]*)(?:'|\")/;\n //(?:'|\")\n let dAttributeMatches = dAttributeRegex.exec(svgString);\n let dAttribute = dAttributeMatches ? dAttributeMatches[1] : null;\n\n // return the SVG properties\n return {\n x: viewBoxElements && viewBoxElements[0] ? viewBoxElements[0] : null,\n y: viewBoxElements && viewBoxElements[1] ? viewBoxElements[1] : null,\n width: viewBoxElements && viewBoxElements[2] ? viewBoxElements[2] : null,\n height: viewBoxElements && viewBoxElements[3] ? viewBoxElements[3] : null,\n viewBox: viewBoxElements ? viewBox : null,\n path: dAttribute\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"function delay(milliseconds){\n return new Promise(resolve => {\n setTimeout(resolve, milliseconds);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":461,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2491,"value":"selectedNode = d3.select('.svg-canvas')\n .select('.g-node[node-id=\"0\"]')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2296,"value":"mutable searchMatchedNodes = search && search.length > 0 && selectedNode.data()[0] ? selectedNode.data()[0]._selectedNodes : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2504,"value":"allNodesCount = initialDataset.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2495,"value":"selectedNodesCount = searchMatchedNodes && searchMatchedNodes.length > 0 ? searchMatchedNodes.length : allNodesCount","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":384,"value":"## Resources:\n\n - [D3 Hierarchy Collection](https://observablehq.com/collection/@d3/d3-hierarchy)\n - [Easing animations](https://observablehq.com/@d3/easing-animations)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W54","stdlib":"1"}} 24:null