trompamusic/trompa-multimodal-component

Query scores+associated audios by composition for choir use case

Closed this issue · 1 comments

For the choir use case, the most common case will be to retrieve the score and synthetic audios for a piece.

The query below returns this* for example data that has been uploaded to https://api-test.trompamusic.eu/

query{
  MusicComposition (name: "El Rossinyol")  {
    identifier
    name
    workExample {
      ... on DigitalDocument {
        identifier
        name
        relation
        workExample {
          ... on AudioObject {
            identifier
            name
            url
          }
        }
      }
    }
  }
}

Also, would it be possible to filter AudioObjects to only those with contributor: "https://www.voiceful.io"? (let me know if this needs a separate ticket)

* Note that the specific relevant fields (relation, url) are to be defined in upcoming immediate discussions.

Hi @asarasua,

Our plan is to be able to do the following customisations using props;

const QUERY = gql`
    query ($phrase: String!) {
        MusicComposition (filter: { name_contains: $phrase })  {
            __typename
            identifier
            name
            workExample {
                ... on DigitalDocument {
                    identifier
                    name
                    relation
                    workExample {
                        ... on AudioObject {
                            identifier
                            name
                            url
                        }
                    }
                }
            }
        }
    }
`;

function MyComponent () {
  function renderResult (result, onClick) {
    const digitalDocuments = result?.workExample || []

    return (
      <div>
        {digitalDocuments.map(({ identifier, name, workExample }) => {
          return (
            <div key={identifier}>
              <h2>{name}</h2>
              {workExample.map(audio => (
                <a href="#" onClick={() => onClick(audio)} key={audio.identifier}>{audio.name}</a>
              ))}
            </div>
          )
        })}
      </div>
    )
  }

  return (
    <MultiModalComponent
      customSearch={(client, { phrase, filters, types, orderBy }) => {
        return client.query({ query: QUERY, variables: { phrase } })
      }}
      customResult={renderResult}
      onResultClick={(result) => console.log('User has clicked on AudioObject:', result)}
    />
  )
}

The example from above should render all workExamples for each DigitalDocument of a MusicComposition.

Unfortunately, it is (currently) not possible to filter relation types when they are interfaced. E.g. workExample can be any CreativeWorkInterface type.

However, the audio property is of type [AudioObject] which makes filtering possible like so:

query {
  DigitalDocument {
    identifier
    name
    audio(filter: { contributor: "https://www.voiceful.io" }) {
      identifier
      name
    }
  }
}