TargetNode.stories.ts

import type { Meta, StoryObj } from '@storybook/web-components-vite'
import { expect, waitFor } from 'storybook/test'
import type TargetNode from '../src/components/target-node.js'
import * as Examples from './TargetNodeExamples.js'
import type { SortingLiteralsProps, SortingTargetNodesProps, SortOrderProps } from './TargetNodeExamples.js'

/**
 * In the examples below, `<target-node>` is used to display a list of nodes from the RDFS vocabulary.
 * Check the `<vocabulary-table>` component for more information on how the focus nodes are consumed.
 */
const meta = {
  title: 'target-node',
  tags: ['autodocs'],
} satisfies Meta

export default meta

const rdfsOntology = 'https://raw.githubusercontent.com/zazuko/rdf-vocabularies/refs/heads/master/ontologies/rdfs/rdfs.nq'

/**
 * Sorting a list of RDFS resources rendered by `<target-node>`.
 *
 * What this story shows
 * - Displays focus nodes for a selected `targetClass`.
 * - Allows changing the sort key via `orderBy`.
 */
export const SortingTargetNodes: StoryObj<SortingTargetNodesProps> = {
  args: {
    targetClass: 'rdf:Property',
    orderBy: 'rdfs:label',
    graph: rdfsOntology,
  },
  argTypes: {
    targetClass: {
      options: ['rdf:Property', 'rdfs:Class'],
      control: 'radio',
    },
    orderBy: {
      options: ['rdfs:label', 'rdfs:comment'],
      control: 'radio',
    },
  },
  render: Examples.SortingTargetNodes,
  async play({ canvasElement, step }) {
    const targetNode = canvasElement.querySelector<TargetNode>('target-node')!

    await step('Initial value', async () => {
      const thirdRowFirstCell = await waitFor(() => getInspectedCell(targetNode, { row: 3 }))

      await waitFor(() => {
        expect(thirdRowFirstCell).toHaveTextContent('rdfs:isDefinedBy')
      })
    })

    await step('Sort by comment', async () => {
      targetNode.setAttribute('order-by', 'rdfs:comment')

      const thirdRowFirstCell = await waitFor(() => getInspectedCell(targetNode, { row: 3 }))

      await waitFor(() => {
        expect(thirdRowFirstCell).toHaveTextContent('rdfs:label')
      })
    })
  },
}

/**
 * Custom sorting of target nodes rendered by `<target-node>`.
 *
 * To set a custom comparator, set the `orderBy` property of `<target-node>`.
 * Its signature must be `(node: GraphPointer) => string`.
 */
export const CustomSortingTargetNodes: StoryObj<SortingTargetNodesProps> = {
  args: {
    targetClass: 'rdf:Property',
    graph: rdfsOntology,
  },
  argTypes: {
    targetClass: {
      options: ['rdf:Property', 'rdfs:Class'],
      control: 'radio',
    },
  },
  render: Examples.CustomSortingTargetNodes,
  async play({ canvasElement, step }) {
    const targetNode = canvasElement.querySelector<TargetNode>('target-node')!

    await step('Initial value', async () => {
      const thirdRowFirstCell = await waitFor(() => getInspectedCell(targetNode, { row: 3 }))

      await waitFor(() => {
        expect(thirdRowFirstCell).toHaveTextContent('rdfs:isDefinedBy')
      })
    })

    await step('Switch to classes', async () => {
      targetNode.setAttribute('target-class', 'rdfs:Class')

      const thirdRowFirstCell = await waitFor(() => getInspectedCell(targetNode, { row: 2 }))

      await waitFor(() => {
        expect(thirdRowFirstCell).toHaveTextContent('rdfs:Container')
      })
    })
  },
}

/**
 * Changing sort direction of target nodes rendered by `<target-node>`.
 *
 * Set the `order-dir` attribute or `orderDir` property to change the sort direction.
 */
export const SortOrder: StoryObj<SortOrderProps> = {
  args: {
    direction: 'asc',
    graph: rdfsOntology,
  },
  argTypes: {
    direction: {
      options: ['asc', 'desc'],
      control: 'radio',
    },
  },
  render: Examples.SortOrderOfTargetNodes,
  async play({ canvasElement, step }) {
    const targetNode = canvasElement.querySelector<TargetNode>('target-node')!

    await step('Initial value', async () => {
      const thirdRowFirstCell = await waitFor(() => getInspectedCell(targetNode))

      await waitFor(() => {
        expect(thirdRowFirstCell).toHaveTextContent('rdfs:comment')
      })
    })

    await step('Order descending', async () => {
      targetNode.setAttribute('order-dir', 'desc')

      const thirdRowFirstCell = await waitFor(() => getInspectedCell(targetNode))

      await waitFor(() => {
        expect(thirdRowFirstCell).toHaveTextContent('rdfs:subPropertyOf')
      })
    })
  },
}

export const SortingLiterals: StoryObj<SortingLiteralsProps> = {
  args: {
    direction: 'desc',
    orderBy: 'schema:age',
    graph: `
@prefix ex: <http://example.org/> .
@prefix schema: <http://schema.org/> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .

ex:alice a schema:Person ;
  rdfs:label "Alice" ;
  schema:age 28 ;
  schema:baseSalary 55000.50 .

ex:bob a schema:Person ;
  rdfs:label "Bob" ;
  schema:baseSalary 72000.00 ;
  schema:birthDate "1985-03-15T10:30:00Z"^^xsd:dateTime .

ex:charlie a schema:Person ;
  rdfs:label "Charlie" ;
  schema:age 42 ;
  schema:birthDate "1981-08-22T14:00:00Z"^^xsd:dateTime .

ex:diana a schema:Person ;
  rdfs:label "Diana" ;
  schema:age 35 ;
  schema:baseSalary 63000.75 .

ex:edward a schema:Person ;
  rdfs:label "Edward" ;
  schema:baseSalary 48000.25 ;
  schema:birthDate "1998-12-05T08:15:00Z"^^xsd:dateTime .

ex:fiona a schema:Person ;
  rdfs:label "Fiona" ;
  schema:age 23 ;
  schema:birthDate "2000-07-19T18:45:00Z"^^xsd:dateTime .`,
  },
  argTypes: {
    orderBy: {
      options: ['schema:age', 'schema:baseSalary', 'schema:birthDate'],
      control: 'radio',
    },
    direction: {
      options: ['asc', 'desc'],
      control: 'radio',
    },
  },
  render: Examples.SortingLiterals,
  async play({ canvasElement, step }) {
    const targetNode = canvasElement.querySelector<TargetNode>('target-node')!

    await step('Sorted descending by age', async () => {
      const firstRowFirstCell = await waitFor(() => getInspectedCell(targetNode, { row: 1 }))

      await waitFor(() => {
        expect(firstRowFirstCell).toHaveTextContent('http://example.org/charlie')
      })
    })

    await step('Sorted ascending by age', async () => {
      targetNode.setAttribute('order-dir', 'asc')

      const firstRowFirstCell = await waitFor(() => getInspectedCell(targetNode, { row: 1 }))

      await waitFor(() => {
        expect(firstRowFirstCell).toHaveTextContent('http://example.org/fiona')
      })
    })

    await step('Sorted ascending by salary', async () => {
      targetNode.setAttribute('order-by', 'schema:baseSalary')

      const firstRowFirstCell = await waitFor(() => getInspectedCell(targetNode, { row: 1 }))

      await waitFor(() => {
        expect(firstRowFirstCell).toHaveTextContent('http://example.org/edward')
      })
    })

    await step('Sorted descending by salary', async () => {
      targetNode.setAttribute('order-dir', 'desc')

      const firstRowFirstCell = await waitFor(() => getInspectedCell(targetNode, { row: 1 }))

      await waitFor(() => {
        expect(firstRowFirstCell).toHaveTextContent('http://example.org/bob')
      })
    })
  },
}

function getInspectedCell(targetNode: Element, { row = 1, column = 1 }: { row?: number, column?: number } = {}) {
  return new Promise<Element>((resolve) => {
    const interval = setInterval(() => {
      const el = targetNode
        ?.querySelector('vocabulary-table')
        ?.shadowRoot
        ?.querySelector(`table tbody tr:nth-child(${row}) td:nth-child(${column})`)

      if (el) {
        resolve(el)
        clearInterval(interval)
      }
    }, 50)
  })
}