3f:null 40:["$","title",null,{"children":"Create a Goals Chandelier | Ross Mills | Observable"}] 46:T753,controls = { const container = document.createElement('div'); container.style.display = 'flex'; container.style['align-items'] = 'center'; if (selectedNode) { const label = html`Selected: `; container.append(label); const input = html`` input.value = selectedNode.description; const btn = html``; btn.addEventListener('click', () => { const idx = nodes.indexOf(selectedNode); selectedNode.description = input.value; mutable nodes = nodes.slice(); }); container.append(input); container.append(btn); const linkBtn = html``; linkBtn.addEventListener('click', () => mutable connectionMode = true); container.append(linkBtn); if (connectionMode) { container.append(html`

Click node to link to

`); } const unlinkBtn = html``; unlinkBtn.addEventListener('click', () => mutable edges = edges.filter(e => e.to != selectedNode.id && e.from != selectedNode.id)); container.append(unlinkBtn); const deleteBtn = html``; deleteBtn.addEventListener('click', () => { remapIds( nodes.filter(n => n.id != selectedNode.id), edges.filter(e => e.to != selectedNode.id && e.from != selectedNode.id) ); mutable selectedNode = null; }); container.append(deleteBtn); const colorLabel = "Color: "; const colorInput = html``; colorInput.addEventListener('change', (event) => { mutable selectedNode = Object.assign(selectedNode, { color: event.target.value }); }); container.append(colorLabel); container.append(colorInput); } return container; }47:[] 44:{"id":"b00c5fec3ef5a532","slug":"create-a-goals-chandelier","title":"Create a Goals Chandelier","thumbnail":"0eaf4efae7f6c82421c5f3cfbd605ddd5628f324f883112c50b84c0047363f5d","access_level":"public","create_time":"$D2020-05-27T16:21:14.985Z","update_time":"$D2022-11-17T11:50:29.916Z","view_time":null,"first_public_time":"$D2022-12-15T13:48:59.766Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"55e9268ccca383a5","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":"starter_2024","bio":"Software engineer and hands-on tech leader. Creating and collaborating on interesting software projects gets me out of bed in the morning.","following":false},"version":662,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"bio":"Software engineer and hands-on tech leader.\n","following":false}],"members":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Create a Goals Chandelier","cells":[{"id":0,"value":"md`# Create a Goals Chandelier`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"goalsChandelierView = {\n const graphDef = { nodes: nodes, edges: edges };\n const g = graphToDot(graphDef);\n \n for (let node of graphDef.nodes) {\n let nodeElement = g.querySelector('#node' + node.id);\n if (nodeElement) {\n nodeElement.addEventListener('click', (evt) => {\n if (connectionMode) {\n if (selectedNode.id == node.id) {\n mutable connectionMode = false;\n mutable selectedNode = null;\n return;\n }\n edges.push({ from: selectedNode.id, to: node.id });\n mutable connectionMode = false;\n mutable selectedNode = null;\n }\n else {\n nodeClicked(node);\n }\n });\n }\n }\n \n return contain(g);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"saveBtn = {\n const btn = html``;\n btn.addEventListener('click', save);\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"newGoal = {\n const container = html`

`;\n const btn = html``;\n const input = html``;\n btn.addEventListener('click', () => {\n console.log(input.value);\n if (input.value) {\n const nodesCopy = nodes.slice();\n nodesCopy.push({ id: nodes.length + 1, color: goalColor, description: input.value }); \n mutable nodes = nodesCopy;\n } \n });\n \n container.appendChild(input);\n container.appendChild(btn);\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"usage = md`\nUsage:\n\n- Create a goal or sub-goal by entering the goal text then clicking 'Create'\n- Click a goal to select it\n- With a goal selected, click \"add link\" then click any other goal to connect them.\n- With a goal selected, edit the goal text and click \"Update\" to update the description.\n- To cancel selection, click the selected node a second time\n- To save changes, click \"Save\"\n- To clear the whole chandelier, click \"Clear\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"clearBtn = {\n const btn = html``;\n btn.addEventListener('click', () => {\n mutable nodes = [];\n mutable edges = [];\n mutable selectedNode = null;\n });\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"md`\n--- \n## Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"function save() {\n localStorage.setItem('graphDef', JSON.stringify(graph));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"restore = {\n const graphDef = localStorage.getItem('graphDef');\n if (graphDef) {\n const g = JSON.parse(graphDef);\n g.nodes.map(n => Object.assign(n, { color: goalColor }));\n mutable nodes = g.nodes;\n mutable edges = g.edges;\n }\n return graphDef;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"graph = ({ nodes, edges })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"/** GraphViz assigns node IDs in sequence starting at one. \nIf we change the set of nodes, e.g. by deleting a node, we must update the ids stored in our data models.\nCall this function to map new IDs to the nodes and edges and set the mutable nodes and mutable edges to the new values. */\nfunction remapIds(newNodes, newEdges) {\n const idMap = {};\n let i = 1;\n for (let n of newNodes) {\n idMap[n.id] = i;\n n.id = i;\n i += 1;\n }\n mutable nodes = newNodes;\n \n for (let e of newEdges) {\n e.from = idMap[e.from];\n e.to = idMap[e.to];\n }\n mutable edges = newEdges;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"mutable edges = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"mutable nodes = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`\n---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"function nodeClicked(node) {\n mutable selectedNode = node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"mutable connectionMode = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"mutable selectedNode = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"goalColor = 'steelblue';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"function graphToDot(graph, rankdir) {\n const nodesById = indexBy(graph.nodes, n => n.id);\n return dot`digraph { \n rankdir = ${rankdir || 'BT'};\n edge[arrowhead = \"none\", color = \"steelblue\"];\n ${graph.nodes.map(n => `\"${n.id}\" [label = \"${n.description}\", shape = rect, style = \"rounded,filled\", color = ${ n.color ? '\"' + n.color + '\"' : goalColor}, fontcolor = \"white\", fontname = Helvetica]`).join(';\\n')}\n ${graph.edges.map((e, i) => `\"${e.from ? e.from : 'NOT FOUND' + i}\" -> \"${e.to ? e.to : 'NOT FOUND'}\"`).join(';')} }`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"function contain(contents) {\n const container = document.createElement('div');\n container.style.display = 'inline-block';\n container.style.padding = '24px';\n container.style.border = '1px solid grey';\n container.appendChild(contents);\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"function indexBy(list, cb) {\n const result = {};\n for (let item of list) {\n let idx = cb(item);\n result[idx] = item;\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"dot = require(\"@observablehq/graphviz@0.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"d3 = require('d3@5');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"