wip: instances select editor

Author: tpluscode

demos/storybook/package.json

@@ -11,6 +11,7 @@
     "@coreui/react": "^5.4.1",
     "@coreui/coreui": "^5.2.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@hydrofoil/shaperone-core": "^0.12.1",
     "@hydrofoil/shaperone-wc": "^0.8.0",
     "@hydrofoil/shaperone-wc-material": "^0.6.1",
     "@hydrofoil/shaperone-wc-shoelace": "^0.4.1",
@@ -34,11 +35,13 @@
     "react-syntax-highlighter": "^15.6.1",
     "remark-gfm": "^4.0.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
+    "sparql-http-client": "^3.0.1",
     "storybook": "^8.4.5",
     "string-to-stream": "^3.0.1",
     "ts-deepmerge": "^7"
   },
   "devDependencies": {
-    "@types/react-syntax-highlighter": "^15.5.13"
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/sparql-http-client": "^3"
   }
 }

demos/storybook/shapes/editors/dash/InstancesSelect/no-labels.data.ttl

@@ -0,0 +1,6 @@
+PREFIX ex: <http://example.org/>
+prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+prefix wd: <http://www.wikidata.org/entity/>
+
+ex:instance <http://schema.org/alumniOf> wd:Q184478 .
+

demos/storybook/shapes/editors/dash/InstancesSelect/no-labels.ttl

@@ -0,0 +1,22 @@
+PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+PREFIX wd: <http://www.wikidata.org/entity/>
+PREFIX schema: <http://schema.org/>
+PREFIX sh: <http://www.w3.org/ns/shacl#>
+
+<> a sh:NodeShape ;
+  sh:property
+    [
+      sh:path schema:alumniOf ;
+      sh:class wd:Q3918 ;
+      sh:name "Alma mater" ;
+      sh:minCount 1 ;
+      sh:maxCount 1 ;
+    ] ;
+.
+
+wd:Q184478 a wd:Q3918 .
+wd:Q1860208 a wd:Q3918 .
+wd:Q49108 a wd:Q3918 .
+wd:Q34433 a wd:Q3918 .
+wd:Q35794 a wd:Q3918 .
+wd:Q13371 a wd:Q3918 .

demos/storybook/stories/DASH/EnumSelectEditor.stories.ts

@@ -1,7 +1,9 @@
 import type { StoryObj as Story } from '@storybook/web-components'
-import { defaultMeta } from '../../common.js'
-import { render } from '../../render.js'
+import { createStory, defaultMeta } from '../../common.js'
 import instances from '../../../shapes/editors/dash/InstancesSelect/wikidata.ttl?raw'
+import instancesNoLabels from '../../../shapes/editors/dash/InstancesSelect/no-labels.ttl?raw'
+import noLabelsData from '../../../shapes/editors/dash/InstancesSelect/no-labels.data.ttl?raw'
+import { configure as configureFetch } from './InstancesSelectEditor/fetch.js'
 
 const meta = {
   ...defaultMeta,
@@ -12,13 +14,27 @@ export default meta
 /**
  * Just as with enum select, `rdfs:label` is used for option text
  */
-export const Wikidata: Story = {
+export const Wikidata: Story = createStory({
   name: 'Resources by sh:class',
-  args: {
-    shapes: instances,
-    customPrefixes: {
-      wd: 'http://www.wikidata.org/entity/',
-    },
+  shapes: instances,
+  prefixes: ['rdfs'],
+  customPrefixes: {
+    wd: 'http://www.wikidata.org/entity/',
   },
-  render,
-}
+})()
+
+/**
+ * If the Shapes Graph does not contain `rdfs:label` for the options, the editor can request
+ * that the instance data can be fetched from the server and added to the Shapes Graph.
+ */
+export const WikidataNoLabels: Story = createStory({
+  name: 'Resources without labels',
+  shapes: instancesNoLabels,
+  data: noLabelsData,
+  focusNode: 'http://example.org/instance',
+  prefixes: ['rdfs', 'schema'],
+  customPrefixes: {
+    wd: 'http://www.wikidata.org/entity/',
+    ex: 'http://example.org/',
+  },
+})(configureFetch)

demos/storybook/stories/Editors/DASH/InstancesSelectEditor.stories.ts

@@ -0,0 +1,35 @@
+import type { InstanceConfigCallback } from '@hydrofoil/shaperone-wc/configure.js'
+import $rdf from '@hydrofoil/shaperone-core/env.js'
+import SparqlClient from 'sparql-http-client/ParsingClient.js'
+
+const wikidata = new SparqlClient({
+  endpointUrl: 'https://query.wikidata.org/sparql',
+})
+
+const labelQuery = `
+prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+
+construct {
+  ?id rdfs:label ?l
+} where {
+  ?id rdfs:label ?l
+}`
+
+export const configure: InstanceConfigCallback = ({ shapes }) => {
+  const env = $rdf()
+
+  shapes.setFetchStrategy((resources, shapesGraph) => {
+    const toFetch = resources
+      // skip resources for which we already have data
+      .filter(resource => !shapesGraph.node(resource).out(env.ns.rdfs.label).terms.length)
+
+    if (toFetch.length === 0) {
+      return null
+    }
+
+    return wikidata.query.construct(`${labelQuery}
+        VALUES ?id {
+          ${toFetch.map(resource => `<${resource.value}>`).join(' ')}
+        }`)
+  })
+}

demos/storybook/stories/Editors/DASH/InstancesSelectEditor/fetch.ts

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj as Story } from '@storybook/web-components'
-import type { ConfigCallback } from '@hydrofoil/shaperone-wc'
 import { merge } from 'ts-deepmerge'
+import type { InstanceConfigCallback } from '@hydrofoil/shaperone-wc/configure.js'
 import { render } from './render.js'
 import groups from '../shapes/groups.ttl?raw'
 import textEditors from '../shapes/text-editors.ttl?raw'
 
 interface StoryFactory {
-  (configure: ConfigCallback, overrides?: Partial<Omit<Story, 'render' | 'loaders'>>): Story
+  (configure?: InstanceConfigCallback, overrides?: Partial<Omit<Story, 'render' | 'loaders'>>): Story
 }
 
 export const defaultMeta: Meta = {
@@ -50,9 +50,10 @@ interface CreateStory {
   data?: string
   focusNode?: string
   prefixes?: string[]
+  customPrefixes?: Record<string, string>
 }
 
-export function createStory({ name, prefixes, ...args }: CreateStory) {
+export function createStory({ name, prefixes, customPrefixes, ...args }: CreateStory) {
   const defaults = {
     name,
     args,
@@ -62,6 +63,10 @@ export function createStory({ name, prefixes, ...args }: CreateStory) {
     defaults.args.prefixes = prefixes.join(',')
   }
 
+  if (customPrefixes) {
+    defaults.args.customPrefixes = customPrefixes
+  }
+
   return createStoryObj(defaults)
 }