31:[] 2f:{"title":"Datapackage 📦 Tables 🗗 Diagram","cells":[{"id":0,"value":"# Datapackage 📦 Tables 🗗 Diagram\n\nThis notebook creates [Data Package 📦](https://observablehq.com/@randomfractals/data-package) [Graphviz](https://graphviz.org/) and [Mermaid ER](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram) diagrams of [Tabular Data Resources](https://specs.frictionlessdata.io/tabular-data-resource/).","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"## Data Package 📦","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"dataPackageUrl = 'https://gitlab.com/wgms/glathida/-/raw/main/datapackage.yml'","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"dataPackage = loadDataPackage(dataPackageUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"async function loadDataPackage(dataPackageUrl) {\n if (dataPackageUrl.endsWith('.yml')) {\n // load datapackage.yml config\n return await DataPackage.Package.load(await yaml.load(await fetchYamlConfig(dataPackageUrl)))\n }\n return await DataPackage.Package.load(dataPackageUrl);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"## Datapackage 📦 Resource Tables 🗗 Diagram\n\n### ${dataPackage.descriptor.title}\n\n${dataPackage.descriptor.description ? dataPackage.descriptor.description : ''}\n\n**Note:** click on the `diagram` cell vertical **...** menu below to download it in SVG or PNG format.","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"packageDiagram = diagram(dataPackage)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"async function diagram(dataPackage) {\n const tables = dataPackage.resources.filter(resource => resource.tabular);\n const tableNodes = tables.map((table) =>\n `\"${table.name}\" [shape=none, label=<\n \n \n \n ${table.schema.fields.map((field) => `\n \n \n \n `).join('')}}\n

\n ${table.name}\n
${field.name}	${field.type}

\n >]`).join('\\n');\n\n const tableRefs = tableReferences(dataPackage);\n const tableConnections = tableRefs.map(reference =>\n `${reference.fromTable}:${reference.fromField} -> ${reference.toTable}:${reference.toField}`\n ).join('\\n');\n \n return dot`digraph \"${dataPackage.descriptor.title}\" {\n node [fontsize=12]\n rankdir = LR;\n ${tableNodes}\n ${tableConnections}\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"function tableReferences(dataPackage) {\n let tableReferences = [];\n dataPackage.resources.filter(resource => resource.schema?.foreignKeys?.length > 0)\n .forEach(resource => {\n resource.schema.foreignKeys.forEach(foreignKey => {\n tableReferences.push({\n fromTable: resource.name,\n fromField: foreignKey?.fields[0],\n toTable: foreignKey?.reference?.resource,\n toField: foreignKey?.reference?.fields[0]\n });\n })\n });\n return tableReferences;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"## Datapackage Mermaid ER Diagram\n\n[Mermaid ER Diagram](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram):","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"packageERDiagram = erDiagram(dataPackage)","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"html`\n${DOM.download(await rasterize(packageERDiagram), `${dataPackage.descriptor.name}-diagram.png`, \"Save as PNG\")}\n${DOM.download(await serialize(packageERDiagram), `${dataPackage.descriptor.name}-diagram.svg`, \"Save as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"async function erDiagram(dataPackage) {\n const tables = dataPackage.resources.filter(resource => resource.tabular);\n const tableNodes = tables.map((table) =>\n `${table.name} {\n ${table.schema.fields.map((field) => `${field.name} ${field.type}`).join('\\n')}\n }`).join('\\n');\n \n const tableRefs = tableReferences(dataPackage);\n const tableConnections = tableRefs.map(reference =>\n `${reference.toTable} ||--|| ${reference.fromTable} : ${reference.fromField}`\n ).join('\\n');\n \n return mermaid`erDiagram\n ${tableNodes}\n ${tableConnections}\n `; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"## Resources","pinned":false,"hidden":false,"mode":"md"},{"id":396,"value":"resourceNames = dataPackage.resourceNames","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"viewof resourceName = Inputs.select(dataPackage.resourceNames.filter(resourceName => resourceName !== 'validation_report'), {\n label: html`Resource`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"resourceTable = Inputs.table([resource.descriptor], {\n format: {\n datahub: d => d.type\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"resource = dataPackage.getResource(resourceName);","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"resourcePath = md`Resource data path: **${resource.descriptor.path}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"resource.schema","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"Inputs.table(resourceFields)","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"resourceFields = resource.descriptor.schema.fields","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"resources = dataPackage.resources","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"primaryKeys = resources.filter(resource => resource.schema?.primaryKey?.length > 0)\n .map(resource => ({\n resource: resource.name,\n primaryKey: resource.schema.primaryKey[0]\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"foreignKeys = resources.filter(resource => resource.schema?.foreignKeys?.length > 0)\n .map(resource => ({\n resource: resource.name,\n foreignKeys: resource.schema.foreignKeys\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"tableRefs = tableReferences(dataPackage)","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"import {dot} from '@gordonsmith/graphviz'","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"import {rasterize, serialize} from '@mbostock/saving-svg'","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"import {displayDot} from '@oscar6echo/zoom-and-pan-graphviz-dot'","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"import {fetchYamlConfig} from '@randomfractals/datapackage-yaml'","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"yaml = require('js-yaml@4.1.0/dist/js-yaml.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"DataPackage = require('https://unpkg.com/datapackage@1.1.10/dist/datapackage.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}