2a:null 2b:["$","title",null,{"children":"Popoto.js | Frederic Ciminera | Observable"}] 30:T48c,baseConfig = { popoto.provider.node.Provider = {}; Object.keys(DATABASE_META_SCHEMA).forEach( (p) => { popoto.provider.node.Provider[p] = { returnAttributes: Object.keys(DATABASE_META_SCHEMA[p]), constraintAttribute: Object.keys(DATABASE_INDEX_SCHEMA[p])[0] } } ); let source = DATABASE_META_GRAPH.relationships.reduce((acc, rel) => { if(!acc.hasOwnProperty(rel.source)){ acc[rel.source] = 1; } else { acc[rel.source]++; } return acc; }, {}); let root = DATABASE_META_GRAPH.nodes.filter(n => n.id === Object.keys(source).sort((a,b)=>{source[a]-source[b]})[0]); if(popoto.graph.mainLabel === undefined){ popoto.start(root[0].label); // Code to update the result count on result change: popoto.result.onTotalResultCount(function (count) { document.getElementById("result-total-count").innerHTML = "(" + count + ")"; }) } else { popoto.graph.mainLabel = root[0].label; d3.select("#popoto-taxonomy").selectAll("*").remove() popoto.taxonomy.createTaxonomyPanel(); popoto.tools.reset(); } return popoto.provider.node.Provider }31:[] 2e:{"id":"c203fe35569aeb64","slug":"popoto-js","title":"Popoto.js","thumbnail":"981bca790de478dcc66f2e5c1c3a80d81d587760a981e03ed64a39af20bb7c97","access_level":"public","create_time":"$D2018-05-10T16:32:13.184Z","update_time":"$D2022-06-04T11:14:48.362Z","view_time":null,"first_public_time":"$D2018-12-14T10:15:11.572Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"163c74ec1146c85b","login":"popotojs","name":"Frederic Ciminera","avatar_url":"https://avatars-next.observableusercontent.com/f35a0c3fe1bbf6c7109d71d66829b7483733fd335c24d62b116d4bc79ba18048","tier":"starter_2024"},"version":716,"publish_version":716,"role":null,"authored":false,"authors":[{"type":"individual","id":"c76836bd57aa9076","login":"popotojs","name":"Frederic Ciminera","avatar_url":"https://avatars-next.observableusercontent.com/f35a0c3fe1bbf6c7109d71d66829b7483733fd335c24d62b116d4bc79ba18048","tier":null}],"members":[{"type":"individual","id":"c76836bd57aa9076","login":"popotojs","name":"Frederic Ciminera","avatar_url":"https://avatars-next.observableusercontent.com/f35a0c3fe1bbf6c7109d71d66829b7483733fd335c24d62b116d4bc79ba18048","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"a42fab47559de25e","slug":"popoto","title":"Popoto.js","owner":{"id":"163c74ec1146c85b","login":"popotojs","name":"Frederic Ciminera"}},"type":"notebook","body":{"title":"Popoto.js","cells":[{"id":72,"value":"md`# Popoto.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"md `Example use of Popoto.js (${popoto.version}) in Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"md`# 1 - Neo4j database connection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"md `The first step is to configure the Neo4j database connection, this example uses two databases hosted on GrapheneDB but you can try on your own. [APOC](https://neo4j.com/developer/neo4j-apoc/) is required in this example to retrieve metadata.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":425,"value":"md `Popoto.js uses REST API to access the database so you need to provide the following configuration:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"viewof protocol = select({\n title: \"PROTOCOL\",\n description: \"Select the protocol to use to access the database. (BOLT is not supported yet).\",\n options: [\"HTTP\", \"HTTPS\"],\n value: configs[config].protocol\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"viewof host = text({\n title: \"HOST\",\n placeholder: \"Database host\",\n value: configs[config].host,\n description: \"Set the database host.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"viewof port = number({\n placeholder: \"database port number\",\n description: \"Set the database port number.\",\n title: \"PORT:\",\n value: configs[config].port,\n min:\"0\",\n max:\"65535\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"viewof user = text({\n title: \"USER:\",\n placeholder: \"Database user\",\n value: configs[config].user,\n description: \"User name with right access on database.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"viewof pass = password({\n title: \"PASSWORD:\", \n description: \"User password.\",\n value: configs[config].password\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":281,"value":"md `From these parameters the two connection properties required by Popoto can be built like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"CYPHER_URL = protocol + \"://\" + host + \":\" + port + \"/db/data/transaction/commit\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"AUTHORIZATION = \"Basic \" + btoa(user + \":\" + pass)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"viewof config = select({\n title: \"Pre-configured demo databases. Warning selection here will overwrite your configuration above\",\n description: \"Select a demo database in the list or connect to your own with the setting above.\",\n options: Object.keys(configs),\n value: Object.keys(configs)[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"md`# 2 - Database structure`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"md `### - Database meta graph:\n\nThe database meta graph is extracted using [APOC](https://neo4j.com/developer/neo4j-apoc/) procedure \"\\`call apoc.meta.graph\\`\" and is stored in the variable \"DATABASE_META_GRAPH\".\nThe following graph is rendered with Dagre.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"DATABASE_META_GRAPH = {\n let graph;\n\n await popoto.rest\n .post({\n statements: [\n {\n statement: \"call apoc.meta.graph\",\n parameters: {},\n resultDataContents: [\"graph\"]\n }\n ]\n })\n .done(function(response) {\n var data = response.results[0].data[0].graph;\n\n var nodes = data.nodes.map(function(node) {\n return { id: node.id, label: node.properties.name, count:node.properties.count};\n });\n\n var relationships = data.relationships.map(function(rel) {\n return {\n id: rel.id,\n source: rel.startNode,\n label: rel.type,\n count: rel.properties.count,\n target: rel.endNode\n };\n });\n\n graph = { nodes, relationships };\n });\n \n return graph;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"{\n const graph = new graphlib.Graph({multigraph: true})\n .setGraph({ranker: 'longest-path'});\n\n DATABASE_META_GRAPH.nodes.forEach(\n n => \n graph.setNode(\n n.id,\n {\n label:n.label + \"\\n(\"+n.count+\")\",\n shape: \"circle\",\n style: \"fill: #afa\"}\n )\n )\n\n DATABASE_META_GRAPH.relationships.forEach(\n r => \n graph.setEdge(\n r.source,\n r.target,\n {\n label:r.label + \"\\n(\" + r.count + \")\",\n curve: d3.curveBasis,\n style:\"fill:none; stroke: gray; stroke-width: 1.5px;\",\n labelpos:'c' \n },\n r.id)\n );\n\n const svg = d3.select(html`DATABASE_META_SCHEMA\".\n\nThis will helps us to get the list of attributes per label.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"DATABASE_META_SCHEMA = {\n let schema = {};\n\n await popoto.rest\n .post({\n statements: [\n {\n statement: \"call apoc.meta.schema\",\n parameters: {},\n resultDataContents: [\"row\"]\n }\n ]\n })\n .done(function(response) {\n let data = response.results[0].data[0].row[0];\n Object.keys(data).filter(k => data[k].type ===\"node\")\n .forEach(l => schema[l] = Object.keys(data[l].properties)\n .reduce((acc,p) =>{acc[p]=data[l].properties[p].type; return acc}, {}));\n });\n\n return schema;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"md `\n\\`\\`\\`js\n${JSON.stringify(DATABASE_META_SCHEMA, null, 4)}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":545,"value":"md `### - Database indexes:\n\nPopoto needs a unique property to generate the constraints to guess which one can be used we'll look at indexes and more specifically to \"node_unique_property\" indexes types which are our best candidates.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"DATABASE_INDEX_SCHEMA = {\n let index = {};\n\n await popoto.rest\n .post({\n statements: [\n {\n statement: \"call db.indexes\",\n parameters: {},\n resultDataContents: [\"row\"]\n }\n ]\n })\n .done(function(response) {\n index = response.results[0].data.map(d => {return {labels:d.row[2],properties:d.row[3],type:d.row[5]}}).reduce((acc, i) =>{acc[i.labels[0]]={}; acc[i.labels[0]][i.properties[0]]=i.type ; return acc},{});\n });\n\n return index;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":561,"value":"md `\n\\`\\`\\`js\n${JSON.stringify(DATABASE_INDEX_SCHEMA, null, 4)}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":567,"value":"md`# 3 - Popoto base configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":591,"value":"md `\n\\`\\`\\`js\n${JSON.stringify(baseConfig, null, 4)}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"md`# 4 - Popoto components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":645,"value":"md `The graph query builder is generated in the container having the \"\\`popoto-graph\\`\" id and the taxonomies in a container with \"\\`popoto-taxonomy\\`\" id. By creating the components below it renders automatically here:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":610,"value":"html `

\n \n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":674,"value":"md `The cypher query display is generated in the component with id \\`popoto-cypher\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":654,"value":"md `The results are generated in the component with id \\`popoto-results\\`. The number of results displayed can be customized with the property \\`popoto.result.RESULTS_PAGE_SIZE\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":690,"value":"{\n popoto.result.RESULTS_PAGE_SIZE = PAGE_SIZE;\n \n // update result on value change\n popoto.result.hasChanged = true;\n popoto.update();\n \n return PAGE_SIZE\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":682,"value":"viewof PAGE_SIZE = number({\n description: \"Set the number of results to display.\",\n title: \"Number of displayed results:\",\n value: 2,\n min:\"0\",\n max:\"1000\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":656,"value":"html `

\n RESULTS \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":664,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":604,"value":"md`## - Imports and dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"popoto = {\n let popoto = await require('popoto');\n popoto.rest.CYPHER_URL = CYPHER_URL;\n popoto.rest.AUTHORIZATION = AUTHORIZATION;\n \n return popoto\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"import {select, text, number, password} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"dagred3 = lodash, graphlib, d3, dagre, await require(\"dagre-d3@0.6/dist/dagre-d3.core.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"dagre = graphlib, lodash, window.dagre = await require(\"dagre@0.8/dist/dagre.core.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"graphlib = lodash, window.graphlib = await require(\"graphlib@2/dist/graphlib.core.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"d3 = window.d3 = await require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"lodash = window.lodash = await require(\"lodash@4/lodash.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"configs = (\n {\n Northwind:{\n protocol:\"HTTPS\",\n host:\"hobby-bebjnhfokccegbkeejnaihcl.dbs.graphenedb.com\",\n port:\"24780\",\n user:\"public\",\n password:\"b.8Rsk60tW3tJQ.dUubjD7wx2sNdquN\",\n },\n Movies:{\n protocol:\"HTTPS\",\n host:\"hobby-lpipmanpehiegbkeeacnihcl.dbs.graphenedb.com\",\n port:\"24780\",\n user:\"public\",\n password:\"b.aoKKtiokL8Xf.bappz8lif0sn0Xec\",\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"