31:T59f,/** Initialize Flo.w * * apiKey: string - a valid Flo.w API key (uuid) * version: string (optional) - Flo.w RDF version number (e.g. '0.4.10'). If omitted, the latest version * is used. * host: string (optional) - Flo.w host URL (defaults to https://flow.emu-analytics.net) * * Returns the Flo.w context */ initializeFlow = async function ( apiKey, version, host = "https://flow.emu-analytics.net", state = {} ) { version = version ? "@" + version : ""; // Add Flo.w RDF script tag to register custom web components const script = document.createElement("script"); script.type = "module"; script.src = `https://cdn.jsdelivr.net/npm/flow-rdf${version}/dist/flow-rdf/flow-rdf.esm.js`; document.getElementsByTagName("head")[0].appendChild(script); // Inject Flow core CSS const coreStyles = document.createElement("link"); coreStyles.rel = "stylesheet"; coreStyles.href = `https://cdn.jsdelivr.net/npm/flow-rdf${version}/dist/flow-rdf/css/core.css`; document.getElementsByTagName("head")[0].appendChild(coreStyles); const flowLib = await import( `https://cdn.jsdelivr.net/npm/flow-rdf${version}/dist/flow-rdf/index.esm.js` ); // Initialize the context const ctx = flowLib.flow.initializeContext({ host, apiKey, enableDebug: true, initialState: state }); // Wait for custom elements to be registered await customElements.whenDefined("flow-context"); return ctx; }32:T601,/** * Display full summary of supplied dataset */ datasetSummary = async function (datasetIdOrObj, context, options) { options = { headingLevel: 2, ...options }; const paramRegex = /{{([a-zA-Z_\-\d]+)}}/gm; const dataset = await getDataset(datasetIdOrObj, context); if (dataset) { const heading = md`${"#".repeat(options.headingLevel)} Dataset \`${ dataset.id }\``; const description = md`${dataset.description || "No description"}`; const propertyTable = table( [ { property: "Name", value: dataset.name }, { property: "Type", value: dataset.type }, { property: "Created", value: humanDate.prettyPrint(dataset.createdAt) }, { property: "Updated", value: humanDate.relativeTime(dataset.updatedAt) } ], { header: false } ); const params = Array.from( new Set( dataset.type === "sql" ? (dataset.source || "") .match(paramRegex) .map((p) => p.replace(/[{}]/g, "")) : [] ) ); const parameterTable = params.length ? table(params.map((p) => ({ Parameters: p }))) : ""; const source = await datasetSource(dataset); const attributeTable = await datasetAttributes(dataset); return htl.html` ${heading} ${description} ${propertyTable} ${parameterTable}

SOURCE

${source} ${attributeTable} `; } else { return md`Dataset not found`; } }33:[{"id":"c2c38632421dee5e8ba15b32f07261bef061b60234ace306822a3f8c0dee6886a200b3dc71b2b0527650837dff4185c910b16aef15d4822b1e6d84454b5510c8","href":"https://static.observableusercontent.com/files/c2c38632421dee5e8ba15b32f07261bef061b60234ace306822a3f8c0dee6886a200b3dc71b2b0527650837dff4185c910b16aef15d4822b1e6d84454b5510c8","name":"Screenshot 2021-10-30 at 10.05.39.png","type":"image/png","lastModified":1635584764260.856,"size":110398}] 2f:{"title":"Flow Helper Library","cells":[{"id":0,"value":"md`# Flow Helper Library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`\nTo use Flo.w Reactive Data Framework (RDF) in an Observable notebook import the \\`initializeFlow\\` function defined below as follows:\n\n~~~js\nimport { initializeFlow, datasetTable, tileSourceTable, datasetSource, datasetAttributes } from '@emuanalytics/flow-helper-library';\n~~~\n\nCall the function with a Flo.w API key to return an initialized Flo.w context:\n\n~~~js\ncontext = initializeFlow(, [], []);\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`You can now use Flo.w RDF web components (such as \\`\\`) or access Flo.w context methods e.g.:\n\n~~~js\n// Set a state property\ncontext.state.set('stateproperty', 123);\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`The **datasetTable()** function creates a table of datasources defined in supplied context:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"/**\n * Display a table of datasets defined in supplied context\n */\ndatasetTable = async function (context, options) {\n const datasets = await context.flowClient.datasets.list({ sort: \"id\" });\n\n if (datasets.length) {\n const idFilter = options?.ignoreUnderscore\n ? (ds) => !ds.id.startsWith(\"_\")\n : (ds) => true;\n\n const dsInfo = datasets.filter(idFilter).map((ds) => ({\n \"Dataset ID\": ds.id,\n Name: ds.name,\n Description: ds.description,\n Type: ds.type\n }));\n\n return Inputs.table(dsInfo, { layout: \"auto\" });\n } else {\n return md`No datasets`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`The **tileSourceTable()** function creates a table of tile sources defined in the supplied context:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"/**\n * Display a table of tile sources defined in the current context\n */\ntileSourceTable = async function(context) {\n const tileSources = await context.flowClient.tileSources.list();\n\n if (tileSources.length) {\n const tsInfo = tileSources.map(ts => ({\n 'TileSource ID': ts.id,\n Type: ts.type,\n Source: ts.source\n }));\n\n return Inputs.table(tsInfo, {layout: 'auto'});\n } else {\n return md`No tile sources`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`The **datasetSource()** function returns the formatted SQL source of the specified dataset in the supplied context:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"/**\n * Display dataset source with SQL syntax highlighting\n */\ndatasetSource = async function (datasetIdOrObj, context) {\n const dataset = await getDataset(datasetIdOrObj, context);\n\n if (dataset) {\n return md`\n~~~SQL\n${dataset.source}\n~~~\n`;\n } else {\n return md`Dataset not found`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`The **datasetAttributes()** function returns a table of attributes for the specified dataset in the supplied context:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"/**\n * Display table of dataset attributes\n */\ndatasetAttributes = async function (datasetIdOrObj, context) {\n const dataset = await getDataset(datasetIdOrObj, context);\n\n if (dataset) {\n const attrs = dataset.attributes;\n\n return Inputs.table(\n attrs.map((a) => ({\n attribute: a.attribute,\n type: a.type,\n \"DB Type\": a.dbType,\n description: a.description || \"-\"\n })),\n { layout: \"auto\" }\n );\n } else {\n return md`Dataset not found`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"getDataset = async function (datasetIdOrObject, context) {\n return typeof datasetIdOrObject === \"string\"\n ? context.flowClient.datasets.get(datasetIdOrObject)\n : datasetIdOrObject;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"## Flo.w RDF Debugger\n\nThe Flo.w RDF debugger is enabled by default. Because code in an Observable notebook runs in an IFRAME you must configure your browser dev tools to use the correct context for running code that you enter in the console. From the console context dropdown, select the entry corresponding to `emuananalytics.static.observableusercontent.com` as shown below:\n\n

\n","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`## Example Usage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"context = initializeFlow(\"b6b77cc4-904a-46d1-aa0f-3bf3848ce4c7\", \"2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"datasetTable(context)","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"tileSourceTable(context)","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"datasetSource('landfill', context)","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"datasetAttributes('landfill', context)","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"datasetSummary(\"airquality_with_params\", context)","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"import { table } from '@tmcw/tables'","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"humanDate = require(\"human-date\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}