Research generic / modular front-end architecture

[Simon-Dirks]

Are there existing standards / best practices for configuring a front-end like this? How to ensure that other devs can use (parts of) the Valeros front-end side? Is that even relevant? ...

[Simon-Dirks]

Think it would make sense if the front-end components become more self-contained/standalone, thinking of earlier experiences with https://bit.dev/. Perhaps all render components simply receive the entire JSON-LD of the node and take it from there? E.g. map renderer uses only the map-related fields from the JSON-LD (if there are any).

Sample JSON-LD (HUA)

https://datasets.hetutrechtsarchief.nl/Het-Utrechts-Archief/Test-Amerongen/browser?resource=https%3A%2F%2Fhetutrechtsarchief.nl%2Fid%2FFF40EA37BDD44433E0538F04000A6B4C

{
  "@context": {
    "rdf": "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
    "rdfs": "http://www.w3.org/2000/01/rdf-schema#",
    "schema": "https://schema.org/",
    "foaf": "http://xmlns.com/foaf/0.1/",
    "rico": "https://www.ica.org/standards/RiC/ontology#",
    "wd": "http://www.wikidata.org/entity/",
    "hua": "https://hetutrechtsarchief.nl/id/",
    "cht": "https://data.cultureelerfgoed.nl/term/id/cht/",
    "nde": "https://data.netwerkdigitaalerfgoed.nl/.well-known/genid/"
  },
  "@graph": [
    {
      "@id": "rdf:type",
      "rdfs:label": "Soort"
    },
    {
      "@id": "rdfs:label",
      "rdfs:label": "Label"
    },
    {
      "@id": "wd:Q123386",
      "rdfs:label": "Belle van Zuylen"
    },
    {
      "@id": "wd:Q14512769",
      "rdfs:label": "Van Hardenbroek"
    },
    {
      "@id": "wd:Q1858404",
      "rdfs:label": "Margaretha Turnor"
    },
    {
      "@id": "wd:Q2110840",
      "rdfs:label": "Van Reede"
    },
    {
      "@id": "wd:Q2209544",
      "rdfs:label": "ridderschap"
    },
    {
      "@id": "wd:Q2461967",
      "rdfs:label": "Van Tuyll van Serooskerken"
    },
    {
      "@id": "wd:Q39297398",
      "rdfs:label": "Utrecht"
    },
    {
      "@id": "wd:Q572269",
      "rdfs:label": "Kasteel Amerongen"
    },
    {
      "@id": "wd:Q776",
      "rdfs:label": "Utrecht"
    },
    {
      "@id": "foaf:depiction",
      "rdfs:label": "Afbeelding"
    },
    {
      "@id": "cht:3d36d317-b833-435f-a20b-0d0f66835d8d",
      "rdfs:label": "adel"
    },
    {
      "@id": "hua:609C5C9A69634642E0534701000A17FD",
      "rdfs:label": "Bruin, R.E. de",
      "schema:name": "Bruin, R.E. de"
    },
    {
      "@id": "hua:677186EE4D691B6FE0534701000A974F",
      "rdfs:label": "11. 100.000 - 110.000"
    },
    {
      "@id": "hua:FF40EA37BDD44433E0538F04000A6B4C",
      "@type": ["schema:Book", "rico:Record"],
      "rdfs:label": "Adel en Ridderschap in Utrecht",
      "foaf:depiction": "https://wbooks.com/wp-content/uploads/2023/01/Adel-en-ridderschap-Utrecht.-png-2.png",
      "schema:abstract": "\"Adel en Ridderschap in Utrecht is een verhaal van opkomen, verdwijnen en zich handhaven van talrijke geslachten zoals Van Goye, Van Zuylen, Van Hardenbroek, Van Reede en Van Tuyll van Serooskerken. De Lotgevallen van de adel zijn bepaald door oorlogen, revoluties, epidemieën, economische crises, maar ook door tijden van vrede en voorspoed.\nTot ver in de twintigste eeuw nam de adel een belangrijke maatschappelijke positie in. Naast invloeden van buitenaf zijn er de individuele factoren van verstandige of onverstandige beslissingen, ziekte en sterfgevallen. Het persoonlijke krijgt ruime aandacht. Het verhaal over ridders baronnen en jonkheren impliceert een mannenwereld, maar krachtige vrouwen als Margaretha Turnor, die de herbouw van kasteel Amerongen leidde, of de kritische schrijfster Belle van Zuylen worden zeker niet vergeten.\nHet in- en exterieur van hun kastelen geven letterlijk kleur aan de lange geschiedenis van de Utrechtse adel. Het erfgoed van de adel, zowel materieel als immaterieel, wordt voor het nageslacht bewaard door stichtingen en verenigingen.\"",
      "schema:author": [
        {
          "@id": "hua:609C5C9A69634642E0534701000A17FD"
        },
        {
          "@id": "hua:lst/2-renger-de-bruin"
        }
      ],
      "schema:comment": "Met bronnen en reg.",
      "schema:contentLocation": [
        {
          "@id": "hua:twd/42761"
        },
        {
          "@id": "hua:twd/42765"
        }
      ],
      "schema:description": "106163. \nAdel en Ridderschap in Utrecht / Renger de Bruin. - Zwolle : W Books, 2023. 543 p. : ill. : 29 cm. - . - Met bronnen en reg.,  ISBN:  9789462585461<BR><B>PK</B>: F2023-33<BR><BR><BR>\"Adel en Ridderschap in Utrecht is een verhaal van opkomen, verdwijnen en zich handhaven van talrijke geslachten zoals Van Goye, Van Zuylen, Van Hardenbroek, Van Reede en Van Tuyll van Serooskerken. De Lotgevallen van de adel zijn bepaald door oorlogen, revoluties, epidemieën, economische crises, maar ook door tijden van vrede en voorspoed.\nTot ver in de twintigste eeuw nam de adel een belangrijke maatschappelijke positie in. Naast invloeden van buitenaf zijn er de individuele factoren van verstandige of onverstandige beslissingen, ziekte en sterfgevallen. Het persoonlijke krijgt ruime aandacht. Het verhaal over ridders baronnen en jonkheren impliceert een mannenwereld, maar krachtige vrouwen als Margaretha Turnor, die de herbouw van kasteel Amerongen leidde, of de kritische schrijfster Belle van Zuylen worden zeker niet vergeten.\nHet in- en exterieur van hun kastelen geven letterlijk kleur aan de lange geschiedenis van de Utrechtse adel. Het erfgoed van de adel, zowel materieel als immaterieel, wordt voor het nageslacht bewaard door stichtingen en verenigingen.\"",
      "schema:inLanguage": {
        "@id": "hua:lst/1134-nederlands"
      },
      "schema:isPartOf": {
        "@id": "hua:677186EE4D691B6FE0534701000A974F"
      },
      "schema:isbn": {
        "@id": "urn:isbn:9789462585461"
      },
      "schema:numberOfPages": "543 p.",
      "schema:publication": {
        "@id": "hua:FF40EA37BDD44433E0538F04000A6B4C/publication"
      },
      "schema:size": "29 cm",
      "rico:hasInstantiation": {
        "@id": "hua:FF434B3C90F05F40E0538F04000AAE8A"
      },
      "rico:hasOrHadIdentifier": {
        "@id": "nde:87fbf6342da4d651f42d2d1b7e307404"
      },
      "rico:isRelatedTo": [
        {
          "@id": "wd:Q123386"
        },
        {
          "@id": "wd:Q14512769"
        },
        {
          "@id": "wd:Q1858404"
        },
        {
          "@id": "wd:Q2110840"
        },
        {
          "@id": "wd:Q2209544"
        },
        {
          "@id": "wd:Q2461967"
        },
        {
          "@id": "wd:Q39297398"
        },
        {
          "@id": "wd:Q572269"
        },
        {
          "@id": "wd:Q776"
        },
        {
          "@id": "cht:3d36d317-b833-435f-a20b-0d0f66835d8d"
        },
        {
          "@id": "hua:twd/43374"
        }
      ]
    },
    {
      "@id": "hua:lst/1134-nederlands",
      "rdfs:label": "Nederlands"
    },
    {
      "@id": "hua:twd/42761",
      "rdfs:label": "Utrecht-stad"
    },
    {
      "@id": "hua:twd/43374",
      "rdfs:label": "Adel"
    },
    {
      "@id": "schema:Book",
      "rdfs:label": "Book"
    },
    {
      "@id": "schema:abstract",
      "rdfs:label": "Samenvatting"
    },
    {
      "@id": "schema:author",
      "rdfs:label": "Auteur"
    },
    {
      "@id": "schema:comment",
      "rdfs:label": "Opmerking"
    },
    {
      "@id": "schema:contentLocation",
      "rdfs:label": "Locatie"
    },
    {
      "@id": "schema:description",
      "rdfs:label": "Beschrijving"
    },
    {
      "@id": "schema:inLanguage",
      "rdfs:label": "Taal"
    },
    {
      "@id": "schema:isPartOf",
      "rdfs:label": "Onderdeel van"
    },
    {
      "@id": "schema:isbn",
      "rdfs:label": "ISBN nummer"
    },
    {
      "@id": "schema:numberOfPages",
      "rdfs:label": "Aantal pagina's"
    },
    {
      "@id": "schema:publication",
      "rdfs:label": "Publicatie"
    },
    {
      "@id": "schema:size",
      "rdfs:label": "Afmetingen"
    },
    {
      "@id": "rico:Record",
      "rdfs:label": ["Archiefstuk", "Record"]
    },
    {
      "@id": "rico:hasInstantiation",
      "rdfs:label": "Verschijningsvorm"
    },
    {
      "@id": "rico:hasOrHadIdentifier",
      "rdfs:label": "Identificatie"
    },
    {
      "@id": "rico:isRelatedTo",
      "rdfs:label": "Zie ook"
    }
  ]
}

Sample JSON-LD (HNI)

https://collectiedata.hetnieuweinstituut.nl/id/books/300168138.

{
  "@context": {
    "schema": "https://schema.org/",
    "rico": "https://www.ica.org/standards/RiC/ontology#",
    "mdto": "http://www.nationaalarchief.nl/mdto#",
    "hua": "https://hetutrechtsarchief.nl/id/",
    "hni": "https://collectiedata.hetnieuweinstituut.nl/",
    "hniid": "https://collectiedata.hetnieuweinstituut.nl/id/",
    "hnimodel": "https://collectiedata.hetnieuweinstituut.nl/model/con/",
    "dcterms": "http://purl.org/dc/terms/",
    "loc": "http://id.loc.gov/vocabulary/relators/",
    "skos": "http://www.w3.org/2004/02/skos/core/",
    "shacl": "http://www.w3.org/ns/shacl#",
    "rdf": "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
    "xsd": "http://www.w3.org/2001/XMLSchema#"
  },
  "@graph": [
    {
      "@id": "hni:.well-known/genid/1724123418775201b114710",
      "shacl:focusNode": {
        "@id": "hniid:books/300168138"
      }
    },
    {
      "@id": "hni:.well-known/genid/1724123418775201b114711",
      "shacl:focusNode": {
        "@id": "hniid:books/300168138"
      }
    },
    {
      "@id": "hni:.well-known/genid/1724123418775201b114712",
      "shacl:focusNode": {
        "@id": "hniid:books/300168138"
      }
    },
    {
      "@id": "hni:.well-known/genid/1724123418775201b114713",
      "shacl:focusNode": {
        "@id": "hniid:books/300168138"
      }
    },
    {
      "@id": "hni:.well-known/genid/1724123418775201b114714",
      "shacl:focusNode": {
        "@id": "hniid:books/300168138"
      }
    },
    {
      "@id": "hniid:books/300168138",
      "@type": ["schema:Book", "schema:CreativeWork"],
      "loc:aut": {
        "@id": "hniid:people/59713"
      },
      "dcterms:identifier": "B-2752",
      "rdf:type": "Book",
      "skos:note": "Met lit.opg.",
      "schema:additionalType": {
        "@id": "hnimodel:thesau/26530"
      },
      "schema:associatedMedia": "ill.",
      "schema:carrier": [
        {
          "@language": "nl",
          "@value": "papier"
        },
        {
          "@language": "en",
          "@value": "paper"
        }
      ],
      "schema:conditionsOfAccess": [
        {
          "@language": "nl",
          "@value": "beschikbaar"
        },
        {
          "@language": "en",
          "@value": "available"
        }
      ],
      "schema:datePublished": "1987",
      "schema:description": [
        {
          "@language": "nl",
          "@value": "Proefschrift Zürich."
        },
        {
          "@language": "en",
          "@value": "Zurich dissertation."
        }
      ],
      "schema:identifier": "300168138",
      "schema:inLanguage": {
        "@id": "hnimodel:thesau/5449"
      },
      "schema:isbn": "3-921420-31-8",
      "schema:keywords": [
        {
          "@id": "hniid:people/12249"
        },
        {
          "@id": "hnimodel:thesau/2422"
        },
        {
          "@id": "hnimodel:thesau/2442"
        },
        {
          "@id": "hnimodel:thesau/5700"
        },
        {
          "@id": "hnimodel:thesau/6247"
        },
        {
          "@id": "hnimodel:thesau/6976"
        },
        {
          "@language": "nl",
          "@value": "De Stijl"
        },
        {
          "@language": "en",
          "@value": "The Style"
        },
        {
          "@language": "nl",
          "@value": "beeldend kunstenaars"
        },
        {
          "@language": "nl",
          "@value": "beeldende kunsten"
        },
        {
          "@language": "en",
          "@value": "correspondence"
        }
      ],
      "schema:name": [
        {
          "@language": "nl",
          "@value": "Denkbilder : Materialien zur Entwicklung von Georges Vantongerloo bis 1921 : unter Berücksichtigung der Korrespondenzen mit Theo van Doesburg und Piet Mondrian"
        },
        {
          "@language": "en",
          "@value": "Denkbilder : Materialien zur Entwicklung von Georges Vantongerloo bis 1921 : unter Berücksichtigung der Korrespondenzen mit Theo van Doesburg und Piet Mondrian"
        }
      ],
      "schema:numberOfPages": "190 p.",
      "schema:publication": {
        "@id": "hni:.well-known/genid/f6039f3e7bf147139b50b9f794fd816b"
      },
      "schema:publishedBy": [
        {
          "@language": "en",
          "@value": "Marzona"
        },
        {
          "@language": "nl",
          "@value": "Marzona"
        }
      ],
      "schema:url": {
        "@type": "xsd:anyURI",
        "@value": "https://hdl.handle.net/21.12141/id/collect.3368A42A-7AEF-4E75-88DE-7D69FDC762C7"
      }
    },
    {
      "@id": "hniid:people/12249",
      "schema:name": [
        {
          "@language": "nl",
          "@value": "Vantongerloo, Georges"
        },
        {
          "@language": "en",
          "@value": "Vantongerloo, Georges"
        }
      ]
    },
    {
      "@id": "hniid:people/59713",
      "schema:name": [
        {
          "@language": "nl",
          "@value": "Thomas, Angela"
        },
        {
          "@language": "en",
          "@value": "Thomas, Angela"
        }
      ]
    },
    {
      "@id": "hnimodel:thesau/2422",
      "skos:prefLabel": [
        {
          "@language": "nl",
          "@value": "correspondentie"
        },
        {
          "@language": "en",
          "@value": "correspondence"
        }
      ]
    },
    {
      "@id": "hnimodel:thesau/2442",
      "skos:prefLabel": [
        {
          "@language": "nl",
          "@value": "beeldende kunsten"
        },
        {
          "@language": "en",
          "@value": "visual arts"
        }
      ]
    },
    {
      "@id": "hnimodel:thesau/26530",
      "skos:prefLabel": [
        {
          "@language": "nl",
          "@value": "boek"
        },
        {
          "@language": "en",
          "@value": "book"
        }
      ]
    },
    {
      "@id": "hnimodel:thesau/5449",
      "skos:prefLabel": [
        {
          "@language": "nl",
          "@value": "Duits"
        },
        {
          "@language": "en",
          "@value": "German"
        }
      ]
    },
    {
      "@id": "hnimodel:thesau/5700",
      "skos:prefLabel": [
        {
          "@language": "nl",
          "@value": "proefschriften"
        },
        {
          "@language": "en",
          "@value": "dissertations"
        }
      ]
    },
    {
      "@id": "hnimodel:thesau/6247",
      "skos:prefLabel": [
        {
          "@language": "nl",
          "@value": "beeldend kunstenaars"
        },
        {
          "@language": "en",
          "@value": "visual artists"
        }
      ]
    },
    {
      "@id": "hnimodel:thesau/6976",
      "skos:prefLabel": [
        {
          "@language": "nl",
          "@value": "De Stijl"
        },
        {
          "@language": "en",
          "@value": "The Style"
        }
      ]
    }
  ]
}

[Simon-Dirks]

Self-contained components: JSON-LD of node passed as input. Probably good if these are framework-agnostic and allow custom styling.

Gijs: Ability to pass ("any"-type) state/payloads for other devs might be important, to allow them to extend components with own state-based logic.

For the PoC, we might not need to publish the components on npm yet, but let's keep in mind that this might be desirable later on.

[Simon-Dirks]

Next up: How to generically configure what renderers are shown, in what order, where they are shown, etc. Is there a standard for something like "JSON-driven UI"? Eg https://jsonforms.io/examples/layouts or https://ui-schema.bemit.codes/examples? Perhaps something custom makes more sense here. Add a JSON schema definition to this to describe structure and validation rules.

Example to conditionally show renderers based on available predicates.

⚠️ I think we should skip this whole step by enforcing each self-contained component to always do an initial check if it should show itself. This means theoretically quite a lot of widgets need to self-evaluate if they should show or not, but if this is only a quick check in the available JSON-LD I'm not sure if that's a major concern. Otherwise, we could also create a single global config for all the widgets that should be evaluated to mitigate this. A setup like this also allows for more flexibility, eg some components might check for specific combinations of predicates which is not possible in the config below.

{
  "$schema": "https://.../schema/v1",
  "version": "1.0",
  "@context": {
    "rdf": "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
    "schema": "https://schema.org/",
    "rico": "https://www.ica.org/standards/RiC/ontology#"
  },
  "renderers": {
    "type-badge-renderer": {
      "id": "type-badge-renderer",
      "enabled": true,
      "predicatePatterns": [
        { "predicate": "rdf:type" },
        { "predicate": "schema:additionalType" },
        { "predicate": "rico:hasRecordSetType" }
      ]
    },
    "title-renderer": {
      "id": "title-renderer",
      "enabled": true,
      "predicatePatterns": [
        { "predicate": "schema:name" },
        { "predicate": "rdfs:label" },
        { "predicate": "skos:prefLabel" }
      ]
    },
    "image-renderer": {
      "id": "image-renderer",
      "enabled": true,
      "predicatePatterns": [
        { "predicate": "foaf:depiction" },
        { "predicate": "schema:image" },
        { "predicate": "schema:thumbnailUrl" }
      ]
    },
    "description-renderer": {
      "id": "description-renderer",
      "enabled": true,
      "predicatePatterns": [
        { "predicate": "schema:description" },
        { "predicate": "schema:abstract" },
        { "predicate": "dcterms:description" }
      ]
    },
    "keywords-renderer": {
      "id": "keywords-renderer",
      "enabled": true,
      "predicatePatterns": [
        { "predicate": "schema:keywords" },
        { "predicate": "schema:author" },
        { "predicate": "rico:isRelatedTo" }
      ]
    },
    "date-renderer": {
      "id": "date-renderer",
      "enabled": true,
      "predicatePatterns": [
        { "predicate": "schema:datePublished" },
        { "predicate": "schema:dateCreated" },
        { "predicate": "dcterms:date" }
      ]
    },
    "metadata-table-renderer": {
      "id": "metadata-table-renderer",
      "name": "Metadata Table Renderer",
      "enabled": true,
      "predicatePatterns": []
    }
  }
}

Example config for determining which renderers to show and in which order (uses SPARQL Property Path syntax for making hops).

{
  "$schema": "https://.../schema/v1",
  "version": "1.0",
  "@context": {
    "rdf": "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
    "schema": "https://schema.org/",
    "rico": "https://www.ica.org/standards/RiC/ontology#",
    "mdto": "http://www.nationaalarchief.nl/mdto#",
    "skosxl": "http://www.w3.org/2008/05/skos-xl#"
  },
  "renderers": {
    "titleRenderer": {
      "position": "top",
      "settings": {
        "predicates": {
          "include": [
            "schema:name",
            "rdfs:label",
            "skos:prefLabel",
            "skosxl:prefLabel/skosxl:literalForm"
          ]
        }
      }
    },
    "fileThumbnailRenderer": {
      "position": "left",
      "pages": ["searchHits"],
      "settings": {
        "predicates": {
          "include": [
            "schema:thumbnailUrl",
            "schema:associatedMedia/schema:thumbnailUrl"
          ]
        }
      }
    },
    "fileRenderer": {
      "position": "left",
      "pages": ["details"],
      "settings": {
        "predicates": {
          "include": [
            "schema:contentUrl",
            "schema:downloadUrl",
            "schema:url",
            "schema:associatedMedia/schema:url"
          ]
        }
      }
    },
    "typeRenderer": {
      "settings": {
        "style": "badges",
        "maxVisible": 5,
        "predicates": {
          "include": ["rdf:type", "schema:additionalType"]
        }
      }
    },
    "linkRenderer": {
      "settings": {
        "predicates": {
          "include": [
            "schema:url",
            "schema:sameAs",
            "^schema:isPartOf/schema:url",
            "*"
          ],
          "exclude": ["rdf:type", "mdto:checksum"],
          "showAlreadyRendered": false
        }
      }
    }
  }
}

(My interpretation of) Gijs thoughts: consider that a config like this might not be relevant for everyone. Perhaps other devs simply want to take the standalone components and use them in their own (eg React) project. This specific layout configuration then becomes redundant, as how/what is displayed and used is simply determined by their React/Svelte/... project that imports the Valeros components.

Flip side: Perhaps a config like this would allow (a later iteration of) Valeros to work for different organizations with different needs, where all that differs between deployments is a single JSON file. This could be very powerful: the main "Angular" Valeros is then easily configurable in terms of layout, what is shown, etc. If you want to go custom, you can also use the standalone components to import into your own (custom) codebase.

[Gijsjan]

1. keeping components generic is a clear goal of the pilot, during development we will find out how generic a component can be and at what granularity (rendering a single label versus rendering a person) generics are useful. Another factor to weigh in is global state of the app, sometimes components need the global state, which collide with the generic blueprint of the component.
   there are several possible solutions for writing custom interfaces on generic components. 1) create custom code per project
2. create a (JSON) config file 3) create a config UI. Where 1 is closest to the developer and 3 is closest to the user. Idea is to start with 2) and learn during or after the pilot if we should move to 1) or 3)