2f:T4ee,supino = [ [ //{name: 'Genitori', label: true}, {name: 'Davide', familyName: 'Supino'}, {name: 'Enrichetta', familyName: 'Gentiluomo', tomb: 584, birth: 1792, death: 1857}, ],[ //{name: '', label: true}, {name: 'Moisè', familyName: 'Supino', parents: ['Davide','Enrichetta'], selected: true, tomb: 465, birth: 1813, death: 1878}, //{name: 'Partner', label: true}, //{name: ' ', label: true}, {name: 'Rachele', familyName: 'Rignano'}, {name: 'Ottavia', familyName: 'Levi', tomb: 464, birth: 1835, death: 1925}, ],[ //{name: 'Figli', label: true}, {name: 'David', familyName: 'Supino', parents: ['Moisè','Rachele']}, {name: 'Vito', familyName: 'Supino', parents: ['Moisè','Rachele']}, {name: 'Vittorio', familyName: 'Supino', parents: ['Moisè','Rachele']}, {name: 'Ester', familyName: 'Supino', parents: ['Moisè','Rachele']}, {name: 'Isacco Igino Benvenuto', familyName: 'Supino', parents: ['Moisè','Ottavia'], tomb: 148, birth: 1858, death: 1940}, {name: 'Camillo', familyName: 'Supino', parents: ['Moisè','Ottavia']}, {name: 'Raffaello', familyName: 'Supino', parents: ['Moisè','Ottavia']}, {name: 'Felice Buonanno', familyName: 'Supino', parents: ['Moisè','Ottavia']}, ] ]30:Tc95,class Tree { #graph #links input options generations properties constructor(input, { sortByGenerations = true, id = (d => d.id), // id accessor function parents = (d => d.parents), // parents array accessor function index = 'index', globalIndex = 'globalIndex', depth = 'depth' } = {}) { const computeGenerations = Array.isArray(input) && input.length > 0 && !(Array.isArray(input[0])) // save copies of input and options for Tree.from() to read this.input = computeGenerations ? input.map(n => ({...n})) : input.map(g => g.map(n => ({...n}))) this.options = {...Array.from(arguments)[1]} const node_list = computeGenerations ? this.input : this.input.flat() // store a private Graphology graph inside the Tree this.#graph = new Graph({type: 'directed'}) // populate the Graphology graph, storing the copies of given data as node attributes node_list.forEach((n, i) => { const nid = id(n) if(nid !== undefined) { // remember the original index from the given input if(!sortByGenerations) { n[globalIndex] = i } // create the node this.#graph.addNode(nid, n) // create edges const parent_ids = parents(n) if(parent_ids !== undefined) { parent_ids.forEach(pid => { try { this.#graph.addEdge(pid, nid) } catch(err) { console.warn(err) } }) } } }) // create a double array with topological generations (or copy the given one) let global_i = 0 const gens = computeGenerations ? GraphologyDag.topologicalGenerations(this.#graph) : this.input this.generations = gens.map((generation, d) => generation.map((nOrNid, i) => { let n = computeGenerations ? this.#graph.getNodeAttributes(nOrNid) : nOrNid n[depth] = d n[index] = i // index inside the generation // global index is assigned in order to maintain the generations grouped if(sortByGenerations) { n[globalIndex] = global_i++ } return n })) // store the generation's depth inside each generation this.generations.forEach((g, i) => g[depth] = i) // store the global properties of the Tree this.properties = { count: this.getOrder(), depth: this.generations.length } // simple links (to be improved, we need families) this.#links = [] this.#graph.forEachEdge((e, a, source, target) => this.#links.push({ source: this.#graph.getNodeAttributes(source), target: this.#graph.getNodeAttributes(target) })) } getNodes() { return this.#graph.nodes().map(nid => this.#graph.getNodeAttributes(nid)) } getLinks() { return this.#links } getOrder = () => this.#graph.order visit(f) { this.getNodes().forEach(n => f(n)) return this } visitLinks(f) { this.#links.forEach(l => f(l)) return this } pipe = (f, ...args) => f(this, ...args) static from(other) { let tree = new Tree(other.input, other.options) tree.properties = {...other.properties} // copy properties return tree } }31:Tab7,render = (tree, {min_width = 200, margin = 20, node_text_dx = 6, node_text_dy = -6, link_curve_radius = 10}={}) => { return svg`` }32:[] 2d:{"title":"Untitled","cells":[{"id":0,"value":"# Untitled","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"nodes = [\n {name: 'Jacqueline', familyName: 'Bouvier'},\n {name: 'Clancy', familyName: 'Bouvier'},\n {name: 'Mona', familyName: 'Simpson'},\n {name: 'Abraham', familyName: 'Simpson'},\n {name: 'Patty', familyName: 'Bouvier', parents: ['Jacqueline','Clancy']},\n {name: 'Selma', familyName: 'Bouvier', parents: ['Jacqueline','Clancy']},\n {name: 'Marge', familyName: 'Simpson', parents: ['Jacqueline','Clancy']},\n {name: 'Homer', familyName: 'Simpson', parents: ['Mona','Abraham']},\n {name: 'Lisa', familyName: 'Simpson', parents: ['Marge','Homer']},\n {name: 'Bart', familyName: 'Simpson', parents: ['Marge','Homer']},\n {name: 'Maggie', familyName: 'Simpson', parents: ['Marge','Homer']},\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"generations = [\n [\n {name: 'Parents', label: true},\n {name: 'Jacqueline', familyName: 'Bouvier'},\n {name: 'Clancy', familyName: 'Bouvier'},\n ],[\n {name: 'Siblings', label: true},\n {name: 'Selma', familyName: 'Bouvier', parents: ['Jacqueline','Clancy']},\n {name: 'Patty', familyName: 'Bouvier', parents: ['Jacqueline','Clancy']},\n {name: '', label: true},\n {name: 'Marge', familyName: 'Simpson', parents: ['Jacqueline','Clancy'], selected: true},\n {name: ' ', label: true},\n {name: 'Partners', label: true},\n {name: 'Homer', familyName: 'Simpson', parents: ['Mona','Abraham']},\n ],[\n {name: 'Children', label: true},\n {name: 'Lisa', familyName: 'Simpson', parents: ['Marge','Homer']},\n {name: 'Bart', familyName: 'Simpson', parents: ['Marge','Homer']},\n {name: 'Maggie', familyName: 'Simpson', parents: ['Marge','Homer']},\n ]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"new Tree(supino, {id: (d) => d.name})\n .pipe(layout.x.naive, {distance: 75})\n .pipe(layout.y.naive, {distance: 75})\n .pipe(layout.links.naive)\n .pipe(render, {min_width: 300, margin: 70, link_curve_radius: 16, node_text_dx: 0, node_text_dy: -16})","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"## API","pinned":false,"hidden":false,"mode":"md"},{"id":274,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"layout = ({\n x: {\n naive: (inputTree, {distance=100}={}) => {\n let tree = Tree.from(inputTree)\n tree.visit(d => d.x = d.depth * distance)\n tree.properties.width = distance * tree.properties.depth\n return tree\n },\n },\n y: {\n naive: (inputTree, {distance=30}={}) => {\n let tree = Tree.from(inputTree)\n tree.visit(d => d.y = d.globalIndex * distance)\n tree.properties.height = Math.max(0, distance * (tree.properties.count - 1))\n return tree\n },\n },\n links: {\n naive: (inputTree, {}={}) => {\n let tree = Tree.from(inputTree)\n tree.visitLinks(d => {\n d.x1 = d.source.x\n d.y1 = d.source.y\n d.x2 = d.target.x\n d.y2 = d.target.y\n d.xc = (d.x1 + d.x2) / 2\n d.yc = (d.y1 + d.y2) / 2\n })\n return tree\n },\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"Graph = require('graphology')","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"GraphologyDag = import('https://cdn.skypack.dev/graphology-dag@0.3.0?min')","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"import {connectors} from \"@nitaku/corner-connectors\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}