Add more tests for the instrument highlights

Also refactor the existing tests, add a test which clicks the note icon
first, and refactor some of the existing highlight helpers

client/cypress/e2e/frontend/modules/highlights.cy.ts

@@ -45,27 +45,45 @@ const contentListContents = [
 ];
 
 const contentBlockId = window.btoa('ContentBlockNode:1');
-let lastHighlight;
+const instrumentId = window.btoa('InstrumentNode:2');
-const operations = {
+const instrumentSlug = 'my-instrument';
-  ...defaultModuleQueriesandMutations,
+
-  ModuleDetailsQuery: {
+const getAddHighlight = (pageType: string = 'ContentBlockNode') => {
-    module: getModule(defaultContents),
+  let page: { id: string; __typename: string; slug?: string };
-  },
+  if (pageType === 'InstrumentNode') {
-  AddHighlight: ({ input: { highlight } }) => {
+    page = {
+      id: instrumentId,
+      slug: instrumentSlug,
+      __typename: 'InstrumentNode',
+    };
+  } else {
+    page = {
+      id: contentBlockId,
+      __typename: 'ContentBlockNode',
+    };
+  }
+  console.log(page);
+  return ({ input: { highlight } }) => {
     lastHighlight = {
       ...highlight,
       id: 'new-highlight-id',
-      page: {
+      page,
-        id: contentBlockId,
-        __typename: 'ContentBlockNode',
-      },
     };
     return {
       addHighlight: {
         highlight: lastHighlight,
       },
     };
+  };
+};
+
+let lastHighlight;
+const operations = {
+  ...defaultModuleQueriesandMutations,
+  ModuleDetailsQuery: {
+    module: getModule(defaultContents),
   },
+  AddHighlight: getAddHighlight(),
   UpdateHighlight: ({ input: { note, color } }) => {
     lastHighlight = {
       ...lastHighlight,
@@ -118,6 +136,67 @@ const markText = () => {
   });
 };
 
+const createHighlight = (text) => {
+  // delete doesn't make sense before the highlight exists
+  cy.getByDataCy('highlight-delete').should('not.exist');
+  // mark the text with yellow and check the text
+  cy.getByDataCy('highlight-alpha').click();
+  cy.wait('@AddHighlight');
+  cy.getByDataCy('highlight-mark').should('contain', text);
+
+  // we only want to have one of each element and not accidentally create multiple
+  cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
+  cy.getByDataCy('highlight-mark').should('have.length', 1);
+};
+
+const updateHighlight = (text) => {
+  cy.getByDataCy('highlight-beta').click();
+  cy.wait('@UpdateHighlight');
+  cy.getByDataCy('highlight-mark').should('contain', text);
+  cy.getByDataCy('highlight-mark').should('have.class', 'highlight--beta');
+  //
+  // we only want to have one of each element and not accidentally create multiple
+  cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
+  cy.getByDataCy('highlight-mark').should('have.length', 1);
+};
+
+const openSidebar = () => {
+  // display the sidebar and popover and check them
+  cy.getByDataCy('highlight-note').click();
+  cy.getByDataCy('highlight-popover').should('be.visible');
+  cy.getByDataCy('highlight-sidebar').should('be.visible');
+  cy.getByDataCy('highlight-in-sidebar').should('contain', 'es ist ein');
+
+  cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
+  cy.getByDataCy('highlight-mark').should('have.length', 1);
+};
+
+const deleteHighlight = () => {
+  // delete the highlight
+  cy.getByDataCy('highlight-mark').click();
+  cy.getByDataCy('highlight-delete').click();
+  cy.getByDataCy('confirm-dialog').should('be.visible');
+  cy.getByDataCy('modal-save-button').click();
+  cy.wait('@DeleteHighlight');
+
+  cy.getByDataCy('highlight-popover').should('not.exist');
+  cy.getByDataCy('highlight-sidebar').should('not.exist');
+  cy.getByDataCy('highlight-mark').should('not.exist');
+};
+
+const addNote = () => {
+  const textPart = 'Some noteworthy stuff with a link to ';
+  const urlPart = 'https://hep.ch';
+  const note = `${textPart}${urlPart}`;
+  cy.getByDataCy('highlight-note-input').should('have.value', '').type(note);
+  cy.getByDataCy('highlight-note-save').click();
+  cy.wait('@UpdateHighlight');
+
+  cy.getByDataCy('highlight-note-save').should('not.exist');
+  cy.getByDataCy('highlight-note-text').should('contain.text', textPart);
+  cy.get(`[href="${urlPart}"]`).should('exist');
+};
+
 describe('Highlights', () => {
   beforeEach(() => {
     cy.setup();
@@ -131,36 +210,11 @@ describe('Highlights', () => {
 
     markText();
 
-    // delete doesn't make sense before the highlight exists
+    const highlightedText = 'es ist ein';
-    cy.getByDataCy('highlight-delete').should('not.exist');
+    createHighlight(highlightedText);
+    updateHighlight(highlightedText);
 
-    // mark the text with yellow and check the text
+    openSidebar();
-    cy.getByDataCy('highlight-alpha').click();
-    cy.wait('@AddHighlight');
-    cy.getByDataCy('highlight-mark').should('contain', 'es ist ein');
-
-    // we only want to have one of each element and not accidentally create multiple
-    cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
-    cy.getByDataCy('highlight-mark').should('have.length', 1);
-
-    // mark the text with yellow and check the text
-    cy.getByDataCy('highlight-beta').click();
-    cy.wait('@UpdateHighlight');
-    cy.getByDataCy('highlight-mark').should('contain', 'es ist ein');
-    cy.getByDataCy('highlight-mark').should('have.class', 'highlight--beta');
-    //
-    // we only want to have one of each element and not accidentally create multiple
-    cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
-    cy.getByDataCy('highlight-mark').should('have.length', 1);
-
-    // display the sidebar and popover and check them
-    cy.getByDataCy('highlight-note').click();
-    cy.getByDataCy('highlight-popover').should('be.visible');
-    cy.getByDataCy('highlight-sidebar').should('be.visible');
-    cy.getByDataCy('highlight-in-sidebar').should('contain', 'es ist ein');
-
-    cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
-    cy.getByDataCy('highlight-mark').should('have.length', 1);
 
     // click outside the created components to make them disappear
     cy.getByDataCy('module-title').click();
@@ -178,14 +232,7 @@ describe('Highlights', () => {
     // todo: write a note
     // todo: click the note icon without first setting a color
 
-    // delete the highlight
+    deleteHighlight();
-    cy.getByDataCy('highlight-delete').click();
-    cy.getByDataCy('confirm-dialog').should('be.visible');
-    cy.getByDataCy('modal-save-button').click();
-
-    cy.getByDataCy('highlight-popover').should('not.exist');
-    cy.getByDataCy('highlight-sidebar').should('not.exist');
-    cy.getByDataCy('highlight-mark').should('not.exist');
   });
 
   it('visits a module with a ContentListItem and highlights some text', () => {
@@ -218,29 +265,42 @@ describe('Highlights', () => {
     markText();
     cy.getByDataCy('highlight-note').click();
     cy.wait('@AddHighlight');
-    const textPart = 'Some noteworthy stuff with a link to ';
-    const urlPart = 'https://hep.ch';
-    const note = `${textPart}${urlPart}`;
-    cy.getByDataCy('highlight-note-input').should('have.value', '').type(note);
-    cy.getByDataCy('highlight-note-save').click();
-    cy.wait('@UpdateHighlight');
 
-    cy.getByDataCy('highlight-note-save').should('not.exist');
+    addNote();
-    cy.getByDataCy('highlight-note-text').should('contain.text', textPart);
-    cy.get(`[href="${urlPart}"]`).should('exist');
   });
 
-  it('visits an instrument and highlights some text', () => {
+  it('visits a module and highlights some text, clicks on the Note icon, then changes the color', () => {
+    cy.mockGraphqlOps({
+      operations,
+    });
+    cy.visit('/module/my-module');
+
+    markText();
+
+    // delete doesn't make sense before the highlight exists
+    cy.getByDataCy('highlight-delete').should('not.exist');
+    openSidebar();
+    cy.wait('@AddHighlight');
+    const highlightedText = 'es ist ein';
+    updateHighlight(highlightedText);
+    cy.getByDataCy('highlight-mark').should('have.length', 1);
+  });
+
+  it.only('visits an instrument and highlights some text', () => {
     cy.mockGraphqlOps({
       operations: {
         ...operations,
+        AddHighlight: getAddHighlight('InstrumentNode'),
         InstrumentQuery: {
           instrument: {
             title: 'My Instrument',
+            id: instrumentId,
+            slug: instrumentSlug,
             highlights: [],
             contents: [
               {
                 type: 'text_block',
+                id: 'some-other-content-component-id',
                 value: {
                   text: '<p>Hello my beautiful World!</p>',
                 },
@@ -250,12 +310,13 @@ describe('Highlights', () => {
         },
       },
     });
-    cy.visit('/instrument/my-instrument');
+    cy.visit(`/instrument/${instrumentSlug}`);
     cy.wait('@InstrumentQuery');
     markText();
-    // mark the text with yellow and check the text
+    const highlightedText = 'llo my bea';
-    cy.getByDataCy('highlight-alpha').click();
+    createHighlight(highlightedText);
-    cy.wait('@AddHighlight');
+    updateHighlight(highlightedText);
-    cy.getByDataCy('highlight-mark').should('contain', 'es ist ein');
+    addNote();
+    deleteHighlight();
   });
 });

client/cypress/support/commands.ts

@@ -45,11 +45,6 @@ const mockGraphql = (options?: any) => {
       DeleteSnapshotResult: typenameResolver,
       UpdateSnapshotResult: typenameResolver,
       RedeemCouponResult: typenameResolver,
-      HighlightNode: {
-        page: {
-          resolveType: defaultResolveType,
-        },
-      },
       HighlightableNode: {
         __resolveType: defaultResolveType,
       },

client/src/__generated__/gql.ts

@@ -13,11 +13,12 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n  fragment HighlightParts on HighlightNode {\n    id\n    contentIndex\n    paragraphIndex\n    selectionLength\n    contentUuid\n    startPosition\n    color\n    note {\n      text\n    }\n    text\n    page {\n      # only one of them should be necessary, but the client somehow doesn't like just the Node inline fragment\n      ... on Node {\n        id\n      }\n      ... on ContentBlockNode {\n        id\n      }\n      ... on InstrumentNode {\n        id\n      }\n    }\n  }\n": types.HighlightPartsFragmentDoc,
+    "\n  fragment HighlightParts on HighlightNode {\n    id\n    contentIndex\n    paragraphIndex\n    selectionLength\n    contentUuid\n    startPosition\n    color\n    note {\n      text\n    }\n    text\n    page {\n      # only one of them should be necessary, but the client somehow doesn't like just the Node inline fragment\n      __typename\n      ... on ContentBlockNode {\n        id\n      }\n      ... on InstrumentNode {\n        id\n        slug\n      }\n    }\n  }\n": types.HighlightPartsFragmentDoc,
     "\n  fragment ContentBlockHighlightsFragment on ContentBlockNode {\n    id\n    __typename\n    highlights {\n      ...HighlightParts\n    }\n  }\n": types.ContentBlockHighlightsFragmentFragmentDoc,
     "\n    query LanguageQuery {\n      me {\n        language @client\n      }\n    }\n  ": types.LanguageQueryDocument,
     "\n    mutation SetLanguage($language: String!) {\n      setLanguage(language: $language) @client {\n        language\n      }\n    }\n  ": types.SetLanguageDocument,
     "\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      ": types.ReadOnlyQueryDocument,
+    "\n                            fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n                              highlights {\n                                id\n                              }\n                            }\n                          ": types.InstrumentHighlightsWithIdOnlyFragmentFragmentDoc,
     "\n                            fragment ContentBlockHighlightsWithIdOnlyFragment on ContentBlockNode {\n                              highlights {\n                                id\n                              }\n                            }\n                          ": types.ContentBlockHighlightsWithIdOnlyFragmentFragmentDoc,
     "\n  fragment ModuleLevelFragment on ModuleLevelNode {\n    name\n    id\n    filterAttributeType\n  }\n": types.ModuleLevelFragmentFragmentDoc,
     "\n    query ModuleFilterQuery {\n      moduleLevels {\n        ...ModuleLevelFragment\n      }\n      moduleCategories {\n        name\n        id\n        filterAttributeType\n      }\n      me {\n        language @client\n      }\n    }\n  ": types.ModuleFilterQueryDocument,
@@ -36,6 +37,7 @@ const documents = {
     "\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  ": types.ContentBlockQueryDocument,
     "\n  fragment InstrumentParts on InstrumentNode {\n    id\n    title\n    intro\n    slug\n    language\n    bookmarks {\n      uuid\n      note {\n        id\n        text\n      }\n    }\n    type {\n      id\n      name\n      category {\n        id\n        name\n        foreground\n        background\n      }\n      type\n    }\n    contents\n    highlights {\n      ...HighlightParts\n    }\n  }\n": types.InstrumentPartsFragmentDoc,
     "\n    query InstrumentQuery($slug: String!) {\n      instrument(slug: $slug) {\n        ...InstrumentParts\n      }\n    }\n  ": types.InstrumentQueryDocument,
+    "\n  fragment instrumentHighlightsFragment on InstrumentNode {\n    id\n    slug\n    __typename\n    highlights {\n      ...HighlightParts\n    }\n  }\n": types.InstrumentHighlightsFragmentFragmentDoc,
     "\n        query MeLanguage {\n          me {\n            language @client\n          }\n        }\n      ": types.MeLanguageDocument,
     "\n    query ModuleSnapshotsQuery($slug: String!) {\n      module(slug: $slug) {\n        id\n        title\n        metaTitle\n        slug\n        topic {\n          title\n        }\n        snapshots {\n          ...SnapshotDetailsFragment\n        }\n      }\n    }\n  ": types.ModuleSnapshotsQueryDocument,
     "\n  query ModuleSolutions($slug: String) {\n    module(slug: $slug) {\n      solutionsEnabled\n      slug\n    }\n  }\n": types.ModuleSolutionsDocument,
@@ -58,7 +60,7 @@ export function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment HighlightParts on HighlightNode {\n    id\n    contentIndex\n    paragraphIndex\n    selectionLength\n    contentUuid\n    startPosition\n    color\n    note {\n      text\n    }\n    text\n    page {\n      # only one of them should be necessary, but the client somehow doesn't like just the Node inline fragment\n      ... on Node {\n        id\n      }\n      ... on ContentBlockNode {\n        id\n      }\n      ... on InstrumentNode {\n        id\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment HighlightParts on HighlightNode {\n    id\n    contentIndex\n    paragraphIndex\n    selectionLength\n    contentUuid\n    startPosition\n    color\n    note {\n      text\n    }\n    text\n    page {\n      # only one of them should be necessary, but the client somehow doesn't like just the Node inline fragment\n      ... on Node {\n        id\n      }\n      ... on ContentBlockNode {\n        id\n      }\n      ... on InstrumentNode {\n        id\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment HighlightParts on HighlightNode {\n    id\n    contentIndex\n    paragraphIndex\n    selectionLength\n    contentUuid\n    startPosition\n    color\n    note {\n      text\n    }\n    text\n    page {\n      # only one of them should be necessary, but the client somehow doesn't like just the Node inline fragment\n      __typename\n      ... on ContentBlockNode {\n        id\n      }\n      ... on InstrumentNode {\n        id\n        slug\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment HighlightParts on HighlightNode {\n    id\n    contentIndex\n    paragraphIndex\n    selectionLength\n    contentUuid\n    startPosition\n    color\n    note {\n      text\n    }\n    text\n    page {\n      # only one of them should be necessary, but the client somehow doesn't like just the Node inline fragment\n      __typename\n      ... on ContentBlockNode {\n        id\n      }\n      ... on InstrumentNode {\n        id\n        slug\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -75,6 +77,10 @@ export function graphql(source: "\n    mutation SetLanguage($language: String!)
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      "): (typeof documents)["\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      "];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n                            fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n                              highlights {\n                                id\n                              }\n                            }\n                          "): (typeof documents)["\n                            fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {\n                              highlights {\n                                id\n                              }\n                            }\n                          "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -147,6 +153,10 @@ export function graphql(source: "\n  fragment InstrumentParts on InstrumentNode
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n    query InstrumentQuery($slug: String!) {\n      instrument(slug: $slug) {\n        ...InstrumentParts\n      }\n    }\n  "): (typeof documents)["\n    query InstrumentQuery($slug: String!) {\n      instrument(slug: $slug) {\n        ...InstrumentParts\n      }\n    }\n  "];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment instrumentHighlightsFragment on InstrumentNode {\n    id\n    slug\n    __typename\n    highlights {\n      ...HighlightParts\n    }\n  }\n"): (typeof documents)["\n  fragment instrumentHighlightsFragment on InstrumentNode {\n    id\n    slug\n    __typename\n    highlights {\n      ...HighlightParts\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

client/src/__generated__/graphql.ts

@@ -2664,7 +2664,7 @@ export type UserGroupBlockVisibility = {
   schoolClassId: Scalars['ID']['input'];
 };
 
-export type HighlightPartsFragment = { __typename?: 'HighlightNode', id: string, contentIndex: number, paragraphIndex: number, selectionLength: number, contentUuid: any, startPosition: number, color: string, text: string, note?: { __typename?: 'NoteNode', text: string } | null, page?: { __typename?: 'ContentBlockNode', id: string } | { __typename?: 'InstrumentNode', id: string } | null } & { ' $fragmentName'?: 'HighlightPartsFragment' };
+export type HighlightPartsFragment = { __typename?: 'HighlightNode', id: string, contentIndex: number, paragraphIndex: number, selectionLength: number, contentUuid: any, startPosition: number, color: string, text: string, note?: { __typename?: 'NoteNode', text: string } | null, page?: { __typename: 'ContentBlockNode', id: string } | { __typename: 'InstrumentNode', id: string, slug: string } | null } & { ' $fragmentName'?: 'HighlightPartsFragment' };
 
 export type ContentBlockHighlightsFragmentFragment = { __typename: 'ContentBlockNode', id: string, highlights?: Array<(
     { __typename?: 'HighlightNode' }
@@ -2688,6 +2688,8 @@ export type ReadOnlyQueryQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type ReadOnlyQueryQuery = { __typename?: 'Query', me?: { __typename?: 'PrivateUserNode', readOnly?: boolean | null, selectedClass?: { __typename?: 'SchoolClassNode', readOnly?: boolean | null } | null } | null };
 
+export type InstrumentHighlightsWithIdOnlyFragmentFragment = { __typename?: 'InstrumentNode', highlights?: Array<{ __typename?: 'HighlightNode', id: string } | null> | null } & { ' $fragmentName'?: 'InstrumentHighlightsWithIdOnlyFragmentFragment' };
+
 export type ContentBlockHighlightsWithIdOnlyFragmentFragment = { __typename?: 'ContentBlockNode', highlights?: Array<{ __typename?: 'HighlightNode', id: string } | null> | null } & { ' $fragmentName'?: 'ContentBlockHighlightsWithIdOnlyFragmentFragment' };
 
 export type ModuleLevelFragmentFragment = { __typename?: 'ModuleLevelNode', name: string, id: string, filterAttributeType: BooksModuleLevelFilterAttributeTypeChoices } & { ' $fragmentName'?: 'ModuleLevelFragmentFragment' };
@@ -2800,6 +2802,11 @@ export type InstrumentQueryQuery = { __typename?: 'Query', instrument?: (
     & { ' $fragmentRefs'?: { 'InstrumentPartsFragment': InstrumentPartsFragment } }
   ) | null };
 
+export type InstrumentHighlightsFragmentFragment = { __typename: 'InstrumentNode', id: string, slug: string, highlights?: Array<(
+    { __typename?: 'HighlightNode' }
+    & { ' $fragmentRefs'?: { 'HighlightPartsFragment': HighlightPartsFragment } }
+  ) | null> | null } & { ' $fragmentName'?: 'InstrumentHighlightsFragmentFragment' };
+
 export type MeLanguageQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -2822,14 +2829,16 @@ export type ModuleSolutionsQueryVariables = Exact<{
 
 export type ModuleSolutionsQuery = { __typename?: 'Query', module?: { __typename?: 'ModuleNode', solutionsEnabled?: boolean | null, slug: string } | null };
 
-export const HighlightPartsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Node"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<HighlightPartsFragment, unknown>;
+export const HighlightPartsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<HighlightPartsFragment, unknown>;
-export const ContentBlockHighlightsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ContentBlockHighlightsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Node"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<ContentBlockHighlightsFragmentFragment, unknown>;
+export const ContentBlockHighlightsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ContentBlockHighlightsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<ContentBlockHighlightsFragmentFragment, unknown>;
+export const InstrumentHighlightsWithIdOnlyFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InstrumentHighlightsWithIdOnlyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<InstrumentHighlightsWithIdOnlyFragmentFragment, unknown>;
 export const ContentBlockHighlightsWithIdOnlyFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ContentBlockHighlightsWithIdOnlyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ContentBlockHighlightsWithIdOnlyFragmentFragment, unknown>;
 export const ModuleLevelFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModuleLevelFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ModuleLevelNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"filterAttributeType"}}]}}]} as unknown as DocumentNode<ModuleLevelFragmentFragment, unknown>;
 export const SnapshotListItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"shared"}}]}}]} as unknown as DocumentNode<SnapshotListItemFragment, unknown>;
 export const SnapshotTitleFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotTitleFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]} as unknown as DocumentNode<SnapshotTitleFragmentFragment, unknown>;
 export const SnapshotDetailsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotDetailsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"shared"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}},{"kind":"Field","name":{"kind":"Name","value":"mine"}}]}}]} as unknown as DocumentNode<SnapshotDetailsFragmentFragment, unknown>;
-export const InstrumentPartsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InstrumentParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"intro"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"bookmarks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uuid"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"category"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"foreground"}},{"kind":"Field","name":{"kind":"Name","value":"background"}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"contents"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Node"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<InstrumentPartsFragment, unknown>;
+export const InstrumentPartsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InstrumentParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"intro"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"bookmarks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uuid"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"category"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"foreground"}},{"kind":"Field","name":{"kind":"Name","value":"background"}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"contents"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<InstrumentPartsFragment, unknown>;
+export const InstrumentHighlightsFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"instrumentHighlightsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<InstrumentHighlightsFragmentFragment, unknown>;
 export const LanguageQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"LanguageQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]}]}}]}}]} as unknown as DocumentNode<LanguageQueryQuery, LanguageQueryQueryVariables>;
 export const SetLanguageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SetLanguage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"language"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"setLanguage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"language"},"value":{"kind":"Variable","name":{"kind":"Name","value":"language"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"}}]}}]}}]} as unknown as DocumentNode<SetLanguageMutation, SetLanguageMutationVariables>;
 export const ReadOnlyQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ReadOnlyQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readOnly"}},{"kind":"Field","name":{"kind":"Name","value":"selectedClass"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readOnly"}}]}}]}}]}}]} as unknown as DocumentNode<ReadOnlyQueryQuery, ReadOnlyQueryQueryVariables>;
@@ -2838,13 +2847,13 @@ export const UpdateLastModuleLevelMutationDocument = {"kind":"Document","definit
 export const ModuleTitleQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleTitleQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]} as unknown as DocumentNode<ModuleTitleQueryQuery, ModuleTitleQueryQueryVariables>;
 export const ModuleEditModeQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleEditModeQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"inEditMode"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]} as unknown as DocumentNode<ModuleEditModeQueryQuery, ModuleEditModeQueryQueryVariables>;
 export const DeleteHighlightDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteHighlight"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"DeleteHighlightInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteHighlight"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"success"}}]}}]}}]} as unknown as DocumentNode<DeleteHighlightMutation, DeleteHighlightMutationVariables>;
-export const UpdateHighlightDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateHighlight"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateHighlightInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateHighlight"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"highlight"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Node"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<UpdateHighlightMutation, UpdateHighlightMutationVariables>;
+export const UpdateHighlightDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateHighlight"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateHighlightInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateHighlight"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"highlight"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<UpdateHighlightMutation, UpdateHighlightMutationVariables>;
-export const AddHighlightDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"AddHighlight"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AddHighlightInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addHighlight"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"highlight"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Node"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<AddHighlightMutation, AddHighlightMutationVariables>;
+export const AddHighlightDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"AddHighlight"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AddHighlightInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addHighlight"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"highlight"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]} as unknown as DocumentNode<AddHighlightMutation, AddHighlightMutationVariables>;
 export const UpdateInstrumentBookmarkDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateInstrumentBookmark"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateInstrumentBookmarkInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateInstrumentBookmark"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"success"}}]}}]}}]} as unknown as DocumentNode<UpdateInstrumentBookmarkMutation, UpdateInstrumentBookmarkMutationVariables>;
 export const UpdateContentBookmarkDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateContentBookmark"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateContentBookmarkInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateContentBookmark"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"success"}}]}}]}}]} as unknown as DocumentNode<UpdateContentBookmarkMutation, UpdateContentBookmarkMutationVariables>;
 export const ChapterQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ChapterQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"chapter"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]} as unknown as DocumentNode<ChapterQueryQuery, ChapterQueryQueryVariables>;
 export const ContentBlockQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ContentBlockQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contentBlock"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]} as unknown as DocumentNode<ContentBlockQueryQuery, ContentBlockQueryQueryVariables>;
-export const InstrumentQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"InstrumentQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"instrument"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"InstrumentParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Node"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InstrumentParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"intro"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"bookmarks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uuid"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"category"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"foreground"}},{"kind":"Field","name":{"kind":"Name","value":"background"}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"contents"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}}]} as unknown as DocumentNode<InstrumentQueryQuery, InstrumentQueryQueryVariables>;
+export const InstrumentQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"InstrumentQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"instrument"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"InstrumentParts"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"HighlightParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"HighlightNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"contentIndex"}},{"kind":"Field","name":{"kind":"Name","value":"paragraphIndex"}},{"kind":"Field","name":{"kind":"Name","value":"selectionLength"}},{"kind":"Field","name":{"kind":"Name","value":"contentUuid"}},{"kind":"Field","name":{"kind":"Name","value":"startPosition"}},{"kind":"Field","name":{"kind":"Name","value":"color"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"text"}}]}},{"kind":"Field","name":{"kind":"Name","value":"text"}},{"kind":"Field","name":{"kind":"Name","value":"page"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ContentBlockNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"InstrumentParts"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"InstrumentNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"intro"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"bookmarks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uuid"}},{"kind":"Field","name":{"kind":"Name","value":"note"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"category"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"foreground"}},{"kind":"Field","name":{"kind":"Name","value":"background"}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"contents"}},{"kind":"Field","name":{"kind":"Name","value":"highlights"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"HighlightParts"}}]}}]}}]} as unknown as DocumentNode<InstrumentQueryQuery, InstrumentQueryQueryVariables>;
 export const MeLanguageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MeLanguage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]}]}}]}}]} as unknown as DocumentNode<MeLanguageQuery, MeLanguageQueryVariables>;
 export const ModuleSnapshotsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSnapshotsQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"metaTitle"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"topic"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"snapshots"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SnapshotDetailsFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotDetailsFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"shared"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}},{"kind":"Field","name":{"kind":"Name","value":"mine"}}]}}]} as unknown as DocumentNode<ModuleSnapshotsQueryQuery, ModuleSnapshotsQueryQueryVariables>;
 export const ModuleSolutionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSolutions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"solutionsEnabled"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]} as unknown as DocumentNode<ModuleSolutionsQuery, ModuleSolutionsQueryVariables>;

client/src/components/ContentBlock.vue

@@ -127,7 +127,7 @@ import type { Modal } from '@/plugins/modal.types';
 
 import { PAGE_LOAD_TIMEOUT } from '@/consts/navigation.consts';
 
-import { getSelectionHandler, SelectionHandlerOptions } from '@/helpers/highlight';
+import { getSelectionHandler, replacePopover, SelectionHandlerOptions } from '@/helpers/highlight';
 import { graphql } from '@/__generated__';
 import log from 'loglevel';
 import highlightSidebar from '@/helpers/highlight-sidebar';
@@ -266,14 +266,13 @@ graphql(`
     text
     page {
       # only one of them should be necessary, but the client somehow doesn't like just the Node inline fragment
-      ... on Node {
+      __typename
-        id
-      }
       ... on ContentBlockNode {
         id
       }
       ... on InstrumentNode {
         id
+        slug
       }
     }
   }
@@ -307,8 +306,6 @@ const createHighlight = (highlight: AddHighlightArgument) => {
           fragmentName: 'ContentBlockHighlightsFragment',
         });
         const highlight = data?.addHighlight?.highlight;
-        console.log(highlight);
-        console.log(contentBlockWithHighlights);
 
         if (highlight) {
           cache.writeFragment({
@@ -326,6 +323,15 @@ const createHighlight = (highlight: AddHighlightArgument) => {
         }
       },
     }
+  ).then(
+    ({
+      data: {
+        addHighlight: { highlight },
+      },
+    }) => {
+      replacePopover(highlight);
+      return highlight;
+    }
   );
 };
 
@@ -349,31 +355,13 @@ onMounted(() => {
 
     const options: SelectionHandlerOptions = {
       el: element,
-      contentBlock: props.contentBlock,
+      page: props.contentBlock,
       onChangeColor: (newHighlight: AddHighlightArgument) => {
-        createHighlight(newHighlight).then(
+        createHighlight(newHighlight);
-          ({
-            data: {
-              addHighlight: { highlight },
-            },
-          }) => {
-            // we need to replace the Popover after the Highlight is created
-            // todo: is there a cleaner way than to look for the element and click it?
-            const mark = document.querySelector(`mark[data-id="${highlight.id}"]`);
-            if (mark) {
-              mark.click();
-            }
-          }
-        );
       },
       onCreateNote: (newHighlight: AddHighlightArgument) => {
         // we also open the sidebar when clicking on the note icon
-        createHighlight(newHighlight).then(
+        createHighlight(newHighlight).then((highlight) => {
-          ({
-            data: {
-              addHighlight: { highlight },
-            },
-          }) => {
           highlightSidebar.open({
             highlight,
             onUpdateText: (text: string) => {
@@ -385,8 +373,7 @@ onMounted(() => {
               });
             },
           });
-          }
+        });
-        );
       },
     };
     selectionHandler = getSelectionHandler(options);

client/src/components/content-blocks/ContentComponent.vue

@@ -15,6 +15,7 @@
       @edit-note="editNote"
       @bookmark="bookmarkContent(!bookmarked)"
     />
+    <pre>{{ highlights }}</pre>
     <component
       v-bind="component"
       :parent="parent"
@@ -295,24 +296,40 @@ const markHighlights = () => {
                       }
                     ) => {
                       if (success) {
-                        const fragment = graphql(`
+                        const page = highlight.page;
+                        let fragment, id;
+                        if (page?.__typename === 'InstrumentNode') {
+                          fragment = graphql(`
+                            fragment InstrumentHighlightsWithIdOnlyFragment on InstrumentNode {
+                              highlights {
+                                id
+                              }
+                            }
+                          `);
+                          id = cache.identify({
+                            __typename: 'InstrumentNode',
+                            slug: highlight.page.slug,
+                          });
+                        } else {
+                          fragment = graphql(`
                             fragment ContentBlockHighlightsWithIdOnlyFragment on ContentBlockNode {
                               highlights {
                                 id
                               }
                             }
                           `);
-                        const id = cache.identify({
+                          id = cache.identify({
                             __typename: 'ContentBlockNode',
                             id: highlight.page.id,
                           });
-                        const contentBlock = cache.readFragment({
+                        }
+                        const foundFragment = cache.readFragment({
                           fragment,
                           id,
                         });
                         const data = {
-                          ...contentBlock,
+                          ...foundFragment,
-                          highlights: contentBlock.highlights.filter((h) => h.id !== highlight.id),
+                          highlights: foundFragment.highlights.filter((h) => h.id !== highlight.id),
                         };
                         cache.writeFragment({
                           fragment,

client/src/graphql/cache.ts

@@ -119,6 +119,7 @@ const typePolicies = {
 const possibleTypes = {
   ContentBlockInterface: ['ContentBlockNode', 'SnapshotContentBlockNode'],
   ChapterInterface: ['ChapterNode', 'SnapshotChapterNode'],
+  HighlightableNode: ['ContentBlockNode', 'InstrumentNode'],
 };
 
 const cache = new InMemoryCache({

client/src/graphql/gql/fragments/highlightParts.gql

@@ -19,6 +19,7 @@ fragment HighlightLegacyParts on HighlightNode {
       id
     }
     ... on InstrumentNode {
+      slug
       id
     }
   }

client/src/helpers/highlight.ts

@@ -1,7 +1,7 @@
 import * as rangy from 'rangy';
 import 'rangy/lib/rangy-textrange';
 import log from 'loglevel';
-import { ContentBlockNode } from '@/__generated__/graphql';
+import { HighlightableNode } from '@/__generated__/graphql';
 import popover from '@/helpers/popover';
 
 // todo: we need to get the following information for a highlight:
@@ -118,13 +118,13 @@ const getSiblings = (element: HTMLElement): Element[] => {
 
 export interface SelectionHandlerOptions {
   el: HTMLElement;
-  contentBlock: ContentBlockNode;
+  page: HighlightableNode;
   onChangeColor?: (highlight: any) => void;
   onCreateNote?: (highlight: any) => void;
 }
 
 export const getSelectionHandler =
-  ({ el, contentBlock, onChangeColor, onCreateNote }: SelectionHandlerOptions) =>
+  ({ el, page, onChangeColor, onCreateNote }: SelectionHandlerOptions) =>
   // (el: HTMLElement, contentBlock: ContentBlockNode, onUpdateHighlight: (highlight: any) => void = () => {}) =>
   (_e: Event) => {
     const rect = el.getBoundingClientRect();
@@ -160,7 +160,7 @@ export const getSelectionHandler =
 
               const { start, end } = range.toCharacterRange(startAncestor);
               const highlightedText: Highlight = {
-                page: contentBlock.id,
+                page: page.id,
                 contentIndex: position,
                 contentUuid: uuid,
                 startPosition: start,
@@ -196,3 +196,12 @@ export const getSelectionHandler =
       }
     }
   };
+
+export const replacePopover = (highlight: HighlightNode) => {
+  // we need to replace the Popover after the Highlight is created
+  // todo: is there a cleaner way than to look for the element and click it?
+  const mark = document.querySelector(`mark[data-id="${highlight.id}"]`);
+  if (mark) {
+    mark.click();
+  }
+};

client/src/pages/instrument.vue

@@ -23,7 +23,7 @@
       :parent="instrument"
       :bookmarks="instrument.bookmarks"
       :notes="instrument.notes"
-      :highlights="[]"
+      :highlights="instrument.highlights"
       :edit-mode="false"
       v-for="component in instrument.contents"
       :key="component.id"
@@ -32,13 +32,13 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue';
+import { defineAsyncComponent, onUnmounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { graphql } from '@/__generated__';
 import { useQuery } from '@vue/apollo-composable';
 import { computed } from '@vue/reactivity';
 import { AddHighlightArgument, InstrumentNode } from '@/__generated__/graphql';
-import { getSelectionHandler, SelectionHandlerOptions } from '@/helpers/highlight';
+import { getSelectionHandler, replacePopover, SelectionHandlerOptions } from '@/helpers/highlight';
 import { doCreateHighlight } from '@/graphql/mutations';
 
 const instrumentDiv = ref<HTMLElement | null>(null);
@@ -94,6 +94,64 @@ const { result, onResult } = useQuery(
 
 const instrument = computed(() => (result.value?.instrument as InstrumentNode) || {});
 
+const instrumentHighlightsFragment = graphql(`
+  fragment instrumentHighlightsFragment on InstrumentNode {
+    id
+    slug
+    __typename
+    highlights {
+      ...HighlightParts
+    }
+  }
+`);
+
+// todo: merge with other createHighlight function over in ContentBlock.vue
+const createHighlight = (highlight: AddHighlightArgument) => {
+  doCreateHighlight(
+    {
+      input: {
+        highlight,
+      },
+    },
+    {
+      update: (cache, { data }) => {
+        const fragment = instrumentHighlightsFragment;
+        const fragmentName = 'instrumentHighlightsFragment';
+        const id = cache.identify({ slug: instrument.value.slug, __typename: 'InstrumentNode' });
+        const fragmentWithHighlights = cache.readFragment({
+          id,
+          fragment,
+          fragmentName,
+        });
+        const highlight = data?.addHighlight?.highlight;
+        if (highlight) {
+          cache.writeFragment({
+            id,
+            fragment,
+            fragmentName,
+            data: {
+              ...fragmentWithHighlights,
+              highlights: [
+                ...(fragmentWithHighlights?.highlights.filter((h) => h.id !== highlight.id) || []),
+                highlight,
+              ],
+            },
+          });
+        }
+      },
+    }
+  ).then(
+    ({
+      data: {
+        addHighlight: { highlight },
+      },
+    }) => {
+      replacePopover(highlight);
+      return highlight;
+    }
+  );
+};
+
 let selectionHandler;
 onResult(() => {
   const element = instrumentDiv.value;
@@ -101,13 +159,9 @@ onResult(() => {
   if (element !== null) {
     const options: SelectionHandlerOptions = {
       el: element,
-      contentBlock: instrument.value,
+      page: instrument.value,
       onChangeColor: (newHighlight: AddHighlightArgument) => {
-        doCreateHighlight({
+        createHighlight(newHighlight);
-          input: {
-            highlight: newHighlight,
-          },
-        });
       },
     };
     selectionHandler = getSelectionHandler(options);

server/notes/schema.py

@@ -78,3 +78,7 @@ class HighlightNode(DjangoObjectType):
         fields = "__all__"
         filter_fields = []
         interfaces = (relay.Node,)
+
+    @staticmethod
+    def resolve_page(root: Highlight, *args, **kwargs):
+        return root.page.specific