adding support for complex choices

packages/canvas-panel/src/components/AtlasCanvas/AtlasCanvas.tsx

@@ -1,6 +1,8 @@
 import React, { FC, useEffect, useLayoutEffect, useMemo } from 'preact/compat';
 import {
   useCanvas,
+  useResources,
+  parseSpecificResource,
   useResourceEvents,
   useRenderingStrategy,
   useThumbnail,
@@ -9,7 +11,7 @@ import {
   useAnnotationPageManager,
   useManifest,
 } from 'react-iiif-vault';
-import { createStylesHelper } from '@iiif/vault-helpers';
+import { createStylesHelper, SingleChoice, createPaintingAnnotationsHelper } from '@iiif/vault-helpers';
 import { Fragment, h } from 'preact';
 import { WorldObject, SingleImage } from '../../atlas-components';
 import { RenderAnnotationPage } from '../RenderAnnotationPage/RenderAnnotationPage';
@@ -24,6 +26,7 @@ import { RenderVideo } from '../RenderVideo/RenderVideo';
 import { RenderTextLines } from '../RenderTextLines/RenderTextLines';
 import { sortAnnotationPages } from '../../helpers/sort-annotation-pages';
 import { choiceEventChannel } from '../../helpers/eventbus';
+import { AnnotationPageNormalized, ContentResource } from '@iiif/presentation-3';
 
 interface AtlasCanvasProps {
   x?: number;
@@ -70,14 +73,67 @@ export function AtlasCanvas({
     strategies: ['images', 'media'],
     defaultChoices: defaultChoices?.map(({ id }) => id),
   });
-  const choice = strategy.type === 'images' ? strategy.choice : undefined;
+
   const manager = useAnnotationPageManager(manifest?.id || canvas?.id);
   const fullPages = useVaultSelector(
     (state, vault) => {
       return manager.availablePageIds.map((i) => vault.get(i));
     },
     [...manager.availablePageIds]
   );
+
+  useEffect(() => {
+    // this is all hoisted from https://github.com/IIIF-Commons/iiif-helpers/blob/0f582fbcf4a8899258b7a71d2216ffeb56275de4/src/painting-annotations/helper.ts#L38
+    // BUT... it doesn't work there because it assumes there's a single choice per page
+    const vaulthelper = createPaintingAnnotationsHelper(vault);
+    // get all painting annotations for a canvas
+    if (canvas?.id) {
+      const enabledChoices = defaultChoices?.map(({ id }) => id) || [];
+      const vaultAnnotations = vaulthelper.getAllPaintingAnnotations(canvas.id);
+      // Extract choices (if any) from a canvas
+
+      for (const annotation of vaultAnnotations) {
+        if (annotation.type !== 'Annotation') {
+          throw new Error(`getPaintables() accept either a canvas or list of annotations`);
+        }
+
+        const references = Array.from(Array.isArray(annotation.body) ? annotation.body : [annotation.body]);
+        for (const reference of references) {
+          const [ref, { selector }] = parseSpecificResource(reference as any);
+          const body = vault.get(ref) as any;
+          const type = (body.type || 'unknown').toLowerCase();
+          // Choice
+          if (type !== 'choice') {
+            continue;
+          }
+          const nestedBodies = vault.get(body.items) as ContentResource[];
+
+          // if the enabledChoices has the id, then turn it on, otherwise choose the 1st item
+          const selected = enabledChoices.length
+            ? enabledChoices.map((cid) => nestedBodies.find((b) => b.id === cid)).filter(Boolean)
+            : [nestedBodies[0]];
+
+          if (selected.length === 0) {
+            selected.push(nestedBodies[0]);
+          }
+          const choice: SingleChoice = {
+            type: 'single-choice',
+            items: nestedBodies.map((b) => ({
+              id: b.id,
+              label: (b as any).label as any,
+              selected: selected.indexOf(b) !== -1,
+            })) as any[],
+            label: (ref as any).label,
+          };
+          choiceEventChannel.emit('onChoiceChange', { choice });
+
+        }
+      }
+      // this returns 1 choice
+      const choices = vaulthelper.extractChoices(canvas.id);
+    }
+  }, [canvas?.id, actions, defaultChoices]);
+
   const pageTypes = useMemo(() => sortAnnotationPages(manager.availablePageIds, vault as any), fullPages);
   const hasTextLines = !!pageTypes.pageMapping.supplementing?.length;
   const firstTextLines = hasTextLines ? pageTypes.pageMapping.supplementing[0] : null;
@@ -114,10 +170,6 @@ export function AtlasCanvas({
     }
   }, [defaultChoices]);
 
-  useLayoutEffect(() => {
-    choiceEventChannel.emit('onChoiceChange', { choice });
-  }, [choice]);
-
   const thumbnail = useThumbnail({ maxWidth: 256, maxHeight: 256 });
 
   if (!canvas) {

packages/storybook/src/stories/sequence-panel.stories.tsx

@@ -62,7 +62,7 @@ export const SequencePanel = () => {
 
 
 
-const bayard="https://gist.githubusercontent.com/danieltbrennan/183d6cbb0948948413394cf116e5844a/raw/11fdda729f0c2960ee1d971902cdf0badd7f31df/bayard_w_choices.json"
+const bayard="https://data.getty.edu/media/manifest/bayard-custom"
 
 export const MakingChoice = () => {
   const viewer = useRef()
@@ -135,6 +135,7 @@ export const MakingChoice = () => {
     <div>
     <button onClick={() => viewer.current.sequence.setCurrentCanvasIndex(3)}>Go to: Canvas Index 3</button>
     <button onClick={() => viewer.current.sequence.setCurrentCanvasIndex(11)}>Go to: Canvas Index 11</button>
+    <button onClick={() => viewer.current.sequence.setCurrentCanvasIndex(28)}>Go to: Canvas Index 28</button>
     <button onClick={() => viewer.current.sequence.previousCanvas()}>Prev</button>
     <button onClick={() => viewer.current.sequence.nextCanvas()}>Next</button>