feat: preferred shape selected from root pointer

Author: tpluscode

.changeset/silver-lies-turn.md

@@ -0,0 +1,6 @@
+---
+"@hydrofoil/shaperone-playground": patch
+"@hydrofoil/shaperone-core": patch
+---
+
+Select root shape from graph pointer

demos/lit-html/src/menu/shape.ts

@@ -71,6 +71,20 @@ const toolsMenu = (() => {
   }
 })()
 
+const rootShapeMenu = (state: State) => {
+  const shapeChoices = state.shapes.map(shape => ({
+    text: shape.value,
+    checked: shape.term.equals(state.pointer?.term),
+    pointer: shape,
+    type: 'root shape',
+  }))
+
+  return [
+    { text: 'Autoselect', checked: !state.pointer?.term, type: 'root shape' },
+    ...shapeChoices,
+  ]
+}
+
 export function shapeMenu(state: State) {
   return [{
     text: 'Format',
@@ -86,6 +100,9 @@ export function shapeMenu(state: State) {
   }, {
     text: 'Fetch shape',
     children: fetchShapeMenu(state),
+  }, {
+    text: 'Root shape',
+    children: rootShapeMenu(state),
   }, {
     text: 'Tools',
     children: toolsMenu(),

demos/lit-html/src/shaperone-playground-lit.ts

@@ -10,7 +10,7 @@ import { html, render } from 'lit-html'
 import '@rdfjs-elements/rdf-editor'
 import { connect } from '@captaincodeman/rdx'
 import { Quad } from 'rdf-js'
-import { store, State } from './state/store'
+import { store, State, Dispatch } from './state/store'
 import { shapeMenu } from './menu/shape'
 import { resourceMenu } from './menu/resource'
 import { formMenu } from './menu/formMenu'
@@ -167,7 +167,7 @@ export class ShaperonePlayground extends connect(store(), LitElement) {
   }
 
   __setShape(e: CustomEvent) {
-    store().dispatch.shape.setShape(e.detail.value)
+    store().dispatch.shape.setShapesGraph(e.detail.value)
     store().dispatch.shape.serialized(this.shapeEditor.codeMirror.value)
   }
 
@@ -209,15 +209,18 @@ export class ShaperonePlayground extends connect(store(), LitElement) {
     }
   }
 
-  __editorMenuSelected(dispatch: any, editor: RdfEditor) {
+  __editorMenuSelected(dispatch: Dispatch['shape'], editor: RdfEditor) {
     return (e: CustomEvent) => {
       switch (e.detail.value.type) {
         case 'format':
           dispatch.format(e.detail.value.text)
           break
+        case 'root shape':
+          dispatch.selectRootShape(e.detail.value.pointer)
+          break
         default:
           dispatch.serialized(editor.codeMirror.value)
-          dispatch.setShape(editor.quads)
+          dispatch.setShapesGraph(editor.quads)
           break
       }
     }

demos/lit-html/src/state/models/shape.ts

@@ -5,7 +5,7 @@ import { turtle } from '@tpluscode/rdf-string'
 import { Quad } from 'rdf-js'
 import * as formats from '@rdf-esm/formats-common'
 import rdfFetch from '@rdfjs/fetch-lite'
-import clownface, { AnyPointer } from 'clownface'
+import clownface, { AnyPointer, GraphPointer } from 'clownface'
 import type { Store } from '../store'
 
 const triples = turtle`@prefix ex: <http://example.com/> .
@@ -106,6 +106,7 @@ export interface State {
   serialized: string
   format: string
   pointer?: AnyPointer
+  shapes: GraphPointer[]
   quads: Quad[]
   options: {
     clearResource: boolean
@@ -118,19 +119,36 @@ export const shape = createModel({
   state: <State>{
     serialized: triples.toString(),
     format: 'text/turtle',
+    shapes: [],
+    quads: [],
     options: {
       clearResource: false,
     },
   },
   reducers: {
-    setShape(state, quads: Quad[]) {
-      const pointer = clownface({ dataset: $rdf.dataset(quads) })
+    setShapesGraph(state, quads: Quad[]) {
+      let pointer = clownface({ dataset: $rdf.dataset(quads) })
+      const shapes = pointer.has(rdf.type, [sh.Shape, sh.NodeShape])
+      if (state.pointer?.term) {
+        const previousPointer = pointer.node(state.pointer.term)
+        if (previousPointer.has(rdf.type, [sh.Shape, sh.NodeShape]).terms.length) {
+          pointer = previousPointer
+        }
+      }
+
       return {
         ...state,
         pointer,
+        shapes: shapes.toArray(),
         quads,
       }
     },
+    selectRootShape(state, pointer: GraphPointer | undefined) {
+      return {
+        ...state,
+        pointer,
+      }
+    },
     serialized(state, serialized: string): State {
       return {
         ...state,
@@ -165,7 +183,7 @@ export const shape = createModel({
 
         if (shapes.ok) {
           const dataset = await shapes.dataset()
-          dispatch.shape.setShape([...dataset])
+          dispatch.shape.setShapesGraph([...dataset])
           if (clearResource) {
             dispatch.resource.replaceGraph({
               dataset: [],
@@ -198,7 +216,7 @@ export const shape = createModel({
                 .addOut(rdf.type, clas)
                 .addOut(rdfs.label, `${clasName} ${instanceId}`)
             })
-          dispatch.shape.setShape([...dataset])
+          dispatch.shape.setShapesGraph([...dataset])
         }
       },
     }

demos/lit-html/src/state/store.ts

@@ -18,6 +18,7 @@ export const store = (() => {
           quads: [],
           dataset: undefined,
           options,
+          shapes: [],
         },
         resource: {
           format: resource.format,

packages/core/models/forms/effects/resources/setRoot.ts

@@ -8,6 +8,7 @@ export default function (store: Store) {
     const { forms, editors, shapes, resources } = store.getState()
     const formState = forms.get(form)
     const graph = resources.get(form)?.graph
+    const shapesState = shapes.get(form)
     if (!graph || !formState) {
       return
     }
@@ -23,7 +24,8 @@ export default function (store: Store) {
         focusNode: rootPointer,
         editors,
         shouldEnableEditorChoice: formState.shouldEnableEditorChoice,
-        shapes: shapes.get(form)?.shapes || [],
+        shapes: shapesState?.shapes || [],
+        shape: shapesState?.preferredRootShape,
         replaceStack: true,
       })
       return
@@ -37,7 +39,7 @@ export default function (store: Store) {
         form,
         focusNode,
         editors,
-        shapes: shapes.get(form)?.shapes || [],
+        shapes: shapesState?.shapes || [],
         shouldEnableEditorChoice: formState.shouldEnableEditorChoice,
       })
     }

packages/core/models/forms/effects/shapes/setGraph.ts

@@ -10,22 +10,23 @@ export default function setGraph(store: Store) {
   return ({ form }: SetShapesGraphParams) => {
     const { editors, forms, shapes } = store.getState()
     const formState = forms.get(form)
-    const shapesGraph = shapes.get(form)?.shapesGraph
+    const shapesState = shapes.get(form)
     const graph = store.getState().resources.get(form)?.graph
     if (!graph || !formState) {
       return
     }
 
-    if (previousShapes && previousShapes === shapesGraph) {
+    if (previousShapes && previousShapes === shapesState?.shapesGraph) {
       return
     }
 
-    previousShapes = shapesGraph
+    previousShapes = shapesState?.shapesGraph
     formState.focusStack.forEach((focusNode) => {
       dispatch.forms.createFocusNodeState({
         form,
         focusNode,
         editors,
+        shape: shapesState?.preferredRootShape,
         shapes: matchShapes(shapes.get(form)?.shapes).to(focusNode),
         shouldEnableEditorChoice: formState.shouldEnableEditorChoice,
       })

packages/core/models/shapes/index.ts

@@ -6,6 +6,7 @@ import { setGraph } from './reducers'
 export interface ShapeState {
   shapesGraph?: AnyPointer
   shapes: NodeShape[]
+  preferredRootShape?: NodeShape
 }
 
 export type State = Map<symbol, ShapeState>

packages/core/models/shapes/reducers.ts

@@ -14,17 +14,31 @@ export interface SetShapesGraphParams extends BaseParams {
 export const setGraph = formStateReducer((state: ShapeState, { shapesGraph }: SetShapesGraphParams) => produce(state, (draft) => {
   if ('dataset' in shapesGraph) {
     if (state.shapesGraph?.dataset === shapesGraph.dataset) {
-      return
+      const samePreferredRootShape = !state.preferredRootShape || (state.preferredRootShape && state.preferredRootShape.equals(shapesGraph.term as any))
+      if (samePreferredRootShape) {
+        return
+      }
     }
   } else if (state.shapesGraph?.dataset === shapesGraph) {
     return
   }
 
-  const shapesPointer = 'match' in shapesGraph ? cf({ dataset: shapesGraph }) : shapesGraph.any()
+  let preferredRootShape: Shape | undefined
+  let shapesPointer: AnyPointer
+  if ('match' in shapesGraph) {
+    shapesPointer = cf({ dataset: shapesGraph })
+  } else {
+    shapesPointer = shapesGraph.any()
+    if (shapesGraph.term) {
+      preferredRootShape = RdfResource.factory.createEntity<Shape>(shapesGraph as any, [ShapeMixin])
+    }
+  }
+
   const shapes = shapesPointer
     .has(rdf.type, [sh.Shape, sh.NodeShape])
     .map(pointer => RdfResource.factory.createEntity<Shape>(pointer, [ShapeMixin]))
 
   draft.shapesGraph = shapesPointer
   draft.shapes = shapes
+  draft.preferredRootShape = preferredRootShape
 }))

packages/core/test/models/shapes/reducers/setGraph.test.ts

@@ -4,6 +4,7 @@ import $rdf from 'rdf-ext'
 import cf from 'clownface'
 import ns from '@rdf-esm/namespace'
 import { rdf, rdfs, sh } from '@tpluscode/rdf-ns-builders'
+import { NodeShapeMixin } from '@rdfine/shacl'
 import { setGraph } from '../../../../models/shapes/reducers'
 import { testStore } from '../../forms/util'
 
@@ -64,6 +65,46 @@ describe('models/shapes/reducers/setGraph', () => {
     expect(shapes.map(s => s.label)).to.include('Shape two')
   })
 
+  it('sets new preferred shape if it was selected from same dataset', () => {
+    // given
+    const { form, store } = testStore()
+    const before = store.getState().shapes
+    const shapesGraph = cf({ dataset: $rdf.dataset(), graph: ex.Graph })
+    shapesGraph.node(ex.Shape1).addOut(rdf.type, sh.Shape).addOut(rdfs.label, 'Shape one')
+    shapesGraph.node(ex.Shape2).addOut(rdf.type, sh.NodeShape).addOut(rdfs.label, 'Shape two')
+    before.get(form)!.shapesGraph = shapesGraph
+    before.get(form)!.preferredRootShape = new NodeShapeMixin.Class(shapesGraph.node(ex.Shape1))
+
+    // when
+    const after = setGraph(before, {
+      form,
+      shapesGraph: shapesGraph.node(ex.Shape2),
+    })
+
+    // then
+    const { preferredRootShape } = after.get(form)!
+    expect(preferredRootShape?.id).to.deep.eq(ex.Shape2)
+  })
+
+  it('sets preferred root shape is parameter is graph pointer', () => {
+    // given
+    const { form, store } = testStore()
+    const before = store.getState().shapes
+    const shapesGraph = cf({ dataset: $rdf.dataset(), graph: ex.Graph })
+    shapesGraph.node(ex.Shape1).addOut(rdf.type, sh.Shape).addOut(rdfs.label, 'Shape one')
+    shapesGraph.node(ex.Shape2).addOut(rdf.type, sh.NodeShape).addOut(rdfs.label, 'Shape two')
+
+    // when
+    const after = setGraph(before, {
+      form,
+      shapesGraph: shapesGraph.node(ex.Shape2),
+    })
+
+    // then
+    const { preferredRootShape } = after.get(form)!
+    expect(preferredRootShape?.id).to.deep.eq(ex.Shape2)
+  })
+
   it('extracts shape resources from graph', () => {
     // given
     const { form, store } = testStore()