From c254d26e7d564fa6b1c20df419e9472816e49427 Mon Sep 17 00:00:00 2001
From: tarjelavik <Tarje.Lavik@ub.uib.no>
Date: Fri, 17 Sep 2021 14:56:24 +0200
Subject: [PATCH] Add detail to web component diagram

---
 docs/diagrams/component_web.svg      | 73 +++++++++++++++++-----------
 docs/diagrams/src/component_web.puml | 18 ++++---
 2 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/docs/diagrams/component_web.svg b/docs/diagrams/component_web.svg
index 24200cb..6f4c8a6 100644
--- a/docs/diagrams/component_web.svg
+++ b/docs/diagrams/component_web.svg
@@ -1,19 +1,24 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="978px" preserveAspectRatio="none" style="width:1041px;height:978px;background:#FFFFFF;" version="1.1" viewBox="0 0 1041 978" width="1041px" zoomAndPan="magnify"><defs/><g><text fill="#000000" font-family="sans-serif" font-size="18" lengthAdjust="spacing" textLength="337" x="345.5" y="17.4023">Component diagram for Next frontend</text><!--MD5=[3ee045e728939fe034a5f1f68a887008]
-cluster next--><a href="img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABm0lEQVRoQ92Z25LDMAhDt///0dtJpu4kDhgBimPaZ0x0LPCtrz/+7x9I+QJiXCGshIj4kbC0jkyCrHgNLKQpMugugCOYW5d3wAyIEBAKMhvADYOAPAkBA1kgq0A0IFXvCGQ1iCGMBrIqxAYjaq4IIsJIICu7oTZ/D1IF4uJKZZATzBGkkhuXEnsahPH9PUdLlHEjIyYz9rSv/ALIbggbZEvqcZfhyG0gHhgqiGcGpVtdZlNdHgR1hQWyr1p3ONKcs3IvC7IJ94jzxA6fh9iONAdQgWic+cY1A2TUL8uD9KdTrVdKgCAwJUGkEisDYrlSCgSFsfac4SM4+9CINLVWYiVAEFfKgFgw5qanBJxuiOghzzr9IrNKa/CPmN8FiboSWTBYrnzz9JcipDSitdyPY8CoIFFXInBZkJMJmWtqRDzLlYtuCWSmK9ElGQZ5CgbpUXHyNUfQOzejvDyuqHotkJnOWM0/1IqAPAHTl5ip0ww41A5Sv4xSO26wsD44cCJQRJP8Dyk4rXc5NB2EvbKFAJqI1GDBOY9L1G+/AToZcCqjfA/hAAAAAElFTkSuQmCC" target="_top" title="img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABm0lEQVRoQ92Z25LDMAhDt///0dtJpu4kDhgBimPaZ0x0LPCtrz/+7x9I+QJiXCGshIj4kbC0jkyCrHgNLKQpMugugCOYW5d3wAyIEBAKMhvADYOAPAkBA1kgq0A0IFXvCGQ1iCGMBrIqxAYjaq4IIsJIICu7oTZ/D1IF4uJKZZATzBGkkhuXEnsahPH9PUdLlHEjIyYz9rSv/ALIbggbZEvqcZfhyG0gHhgqiGcGpVtdZlNdHgR1hQWyr1p3ONKcs3IvC7IJ94jzxA6fh9iONAdQgWic+cY1A2TUL8uD9KdTrVdKgCAwJUGkEisDYrlSCgSFsfac4SM4+9CINLVWYiVAEFfKgFgw5qanBJxuiOghzzr9IrNKa/CPmN8FiboSWTBYrnzz9JcipDSitdyPY8CoIFFXInBZkJMJmWtqRDzLlYtuCWSmK9ElGQZ5CgbpUXHyNUfQOzejvDyuqHotkJnOWM0/1IqAPAHTl5ip0ww41A5Sv4xSO26wsD44cCJQRJP8Dyk4rXc5NB2EvbKFAJqI1GDBOY9L1G+/AToZcCqjfA/hAAAAAElFTkSuQmCC" xlink:actuate="onRequest" xlink:href="img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABm0lEQVRoQ92Z25LDMAhDt///0dtJpu4kDhgBimPaZ0x0LPCtrz/+7x9I+QJiXCGshIj4kbC0jkyCrHgNLKQpMugugCOYW5d3wAyIEBAKMhvADYOAPAkBA1kgq0A0IFXvCGQ1iCGMBrIqxAYjaq4IIsJIICu7oTZ/D1IF4uJKZZATzBGkkhuXEnsahPH9PUdLlHEjIyYz9rSv/ALIbggbZEvqcZfhyG0gHhgqiGcGpVtdZlNdHgR1hQWyr1p3ONKcs3IvC7IJ94jzxA6fh9iONAdQgWic+cY1A2TUL8uD9KdTrVdKgCAwJUGkEisDYrlSCgSFsfac4SM4+9CINLVWYiVAEFfKgFgw5qanBJxuiOghzzr9IrNKa/CPmN8FiboSWTBYrnzz9JcipDSitdyPY8CoIFFXInBZkJMJmWtqRDzLlYtuCWSmK9ElGQZ5CgbpUXHyNUfQOzejvDyuqHotkJnOWM0/1IqAPAHTl5ip0ww41A5Sv4xSO26wsD44cCJQRJP8Dyk4rXc5NB2EvbKFAJqI1GDBOY9L1G+/AToZcCqjfA/hAAAAAElFTkSuQmCC" xlink:show="new" xlink:title="img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABm0lEQVRoQ92Z25LDMAhDt///0dtJpu4kDhgBimPaZ0x0LPCtrz/+7x9I+QJiXCGshIj4kbC0jkyCrHgNLKQpMugugCOYW5d3wAyIEBAKMhvADYOAPAkBA1kgq0A0IFXvCGQ1iCGMBrIqxAYjaq4IIsJIICu7oTZ/D1IF4uJKZZATzBGkkhuXEnsahPH9PUdLlHEjIyYz9rSv/ALIbggbZEvqcZfhyG0gHhgqiGcGpVtdZlNdHgR1hQWyr1p3ONKcs3IvC7IJ94jzxA6fh9iONAdQgWic+cY1A2TUL8uD9KdTrVdKgCAwJUGkEisDYrlSCgSFsfac4SM4+9CINLVWYiVAEFfKgFgw5qanBJxuiOghzzr9IrNKa/CPmN8FiboSWTBYrnzz9JcipDSitdyPY8CoIFFXInBZkJMJmWtqRDzLlYtuCWSmK9ElGQZ5CgbpUXHyNUfQOzejvDyuqHotkJnOWM0/1IqAPAHTl5ip0ww41A5Sv4xSO26wsD44cCJQRJP8Dyk4rXc5NB2EvbKFAJqI1GDBOY9L1G+/AToZcCqjfA/hAAAAAElFTkSuQmCC" xlink:type="simple"><rect fill="#FFFFFF" height="304" style="stroke:#444444;stroke-width:1.0;stroke-dasharray:7.0,7.0;" width="806" x="229" y="258.1992"/><text fill="#444444" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="72" x="596" y="275.668">Next app</text><text fill="#444444" font-family="sans-serif" font-size="12" lengthAdjust="spacing" textLength="63" x="600.5" y="290.6445">[Container]</text></a><!--MD5=[d5ac3844f66b12d9e08170e47495e096]
-cluster app--><rect fill="#FFFFFF" height="170" style="stroke:#444444;stroke-width:1.0;stroke-dasharray:7.0,7.0;" width="417" x="261" y="343.1992"/><text fill="#444444" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="48" x="445.5" y="360.668">Pages</text><text fill="#444444" font-family="sans-serif" font-size="12" lengthAdjust="spacing" textLength="63" x="438" y="375.6445">[Container]</text><!--MD5=[7442f3b126ee602ae02566c1a49e158a]
-cluster api--><rect fill="#FFFFFF" height="204" style="stroke:#444444;stroke-width:1.0;stroke-dasharray:7.0,7.0;" width="285" x="718" y="326.1992"/><text fill="#444444" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="121" x="800" y="343.668">Server side API</text><text fill="#444444" font-family="sans-serif" font-size="12" lengthAdjust="spacing" textLength="63" x="829" y="358.6445">[Container]</text><!--MD5=[85f4d1a33338ddce045f9b827d37a273]
-entity pages--><rect fill="#85BBF0" height="85.9531" style="stroke:#78A8D8;stroke-width:1.5;" width="157" x="496.75" y="403.1992"/><text fill="#000000" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="54" x="548.25" y="428.668">/items</text><text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="41" x="554.75" y="443.6445">[Route]</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="577.25" y="459.7109"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="133" x="510.75" y="476.1992">Serves static pages.</text><!--MD5=[5d258d01bf6889cf2f44a7b6e9a9e8ae]
-entity id--><rect fill="#85BBF0" height="85.9531" style="stroke:#78A8D8;stroke-width:1.5;" width="157" x="304.75" y="403.1992"/><text fill="#000000" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="37" x="364.75" y="428.668">/[id]</text><text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="41" x="362.75" y="443.6445">[Route]</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="385.25" y="459.7109"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="133" x="318.75" y="476.1992">Serves static pages.</text><!--MD5=[f5830ebc1bf7d5a9a4b07c85dbdf785d]
-entity api_manifest--><rect fill="#85BBF0" height="118.9297" style="stroke:#78A8D8;stroke-width:1.5;" width="218" x="761" y="386.6992"/><text fill="#000000" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="152" x="794" y="412.168">/api/manifest/[id]</text><text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="41" x="849.5" y="427.1445">[Route]</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="872" y="443.2109"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="174" x="783" y="459.6992">Fetch basic metadata and</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="198" x="771" y="476.1875">connected images by id from</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="63" x="838.5" y="492.6758">Sanity DB</text><!--MD5=[b1e3d2dcb3697de9e6328d1cb436cbc4]
-entity frontend--><rect fill="#438DD5" height="152.4414" style="stroke:#3C7FC0;stroke-width:1.5;" width="206" x="166" y="28.1992"/><image height="50" width="50" x="244" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABfUlEQVR4XtWOAY7DIAwE+/9P36mVEm0HQ7wcTriRRmo9hvB6recn4bbwoa6Pwses8jb44QrL4QerXQ4/cKfL4MVP+Sd42dNOwUt20YKHd9KCh3czBQ/t6hAu7+wQLu9uCJf+iw1cuEOFLesXjI4K25UKW9YvGB0VtisVNscTBkfCPlJhczxhcIzgTk+FzfEDh64R3OmpsDl+4NC1B/ciFTbXZuA6grtUYXNtBq5K9H+kwubaDFyV0SxSYXNtBq5KNHvDM9Eem2szcFUyc3cnazNwVZyW6Y7NwFUZtTejzubaDFwVtqs+aq7NwFVhy+z05o4nDI4KW7TzJuqcOZ4wOCps2b1o5njC4KiwUYVt1gYuZFXYIhW2GRu4kFVhi1TYZgzhUsYDzkcqbI5duFipwpZ1CJerVNgyXsIDlSpsI9PwYKUKW08LHq70gPPIKXhJlQpbb8+Gl1WpsLFPw0urPOjNl8DLqzzQ3yXww6u9HT5glY/Bh8y6FXzcyKX8AqAq6Wv25cYoAAAAAElFTkSuQmCC" y="38.1992"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="113" x="212.5" y="103.668">Next frontend</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="126" x="206" y="118.6445">[Javascript and React]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="271" y="134.7109"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="178" x="180" y="151.1992">Provides all content to the</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="185" x="176.5" y="167.6875">user via their web browser.</text><!--MD5=[3d74be2a757051a7059b41e555fce061]
-entity sanity_db--><path d="M769.75,650.6992 C769.75,640.6992 870.25,640.6992 870.25,640.6992 C870.25,640.6992 970.75,640.6992 970.75,650.6992 L970.75,775.6523 C970.75,785.6523 870.25,785.6523 870.25,785.6523 C870.25,785.6523 769.75,785.6523 769.75,775.6523 L769.75,650.6992 " fill="#B3B3B3" style="stroke:#A6A6A6;stroke-width:1.5;"/><path d="M769.75,650.6992 C769.75,660.6992 870.25,660.6992 870.25,660.6992 C870.25,660.6992 970.75,660.6992 970.75,650.6992 " fill="none" style="stroke:#A6A6A6;stroke-width:1.5;"/><image height="50" width="50" x="845.25" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABjklEQVR4Xu2YzU7CQBRGeSoTJa4NaHwNxY2LwsqXplI0rpBLwEzOtGXa3tuZxjnJ2c39+SgNtLNZJpPJdGVXvB5CrY6yPjpcsqvsNzpcaIj79SpOIC6iJeeYwuHacp4J5eLWG2wh56qzDQzCOqEqXrxzTbJWnWtBeL4O1jTJOjUkxMnHuTe0z2DWU55X4y9IzVXh2RC+N29eH8oaFdwgbphqwG8AF6c8rwKDbB9u7IZZ4gU5y3PJwwCuu+XddAJx+SZZlyRc+po/T/M0g3HRPsrfHPaNAhcb4mfMe0s+US6kIeeMglWYchHpCnERDaPeQ+Xxu86FhlguI4Zxka8Il+sqeyaBfMJcNET2SY7QK8a6pOHykw0iMMAkg+yL1em5hiFMgvDJjfJ8F9w+h+f7uEG+FB93owYRWRMCe5gHETiwTta0IVeR9Zce0YOEBKrON3ebZiEucKCV5kEEDrWQM02oNv5gTTnPHC6gIWeMxuHj3Vumj9U6YggXLhaqvMhmr6Rof9Pe/19AJpP55/wCwk7g9HfTvaAAAAAASUVORK5CYII=" y="664.6992"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="168" x="786.25" y="730.168">Sanity Cloud Storage</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="85" x="827.75" y="745.1445">[Google Cloud]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="872.25" y="761.2109"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="177" x="783.75" y="777.6992">Stores metadata and files.</text><!--MD5=[9a631f4ec9219869b7e8b94d6775f9b9]
-entity marcusManifest--><rect fill="#438DD5" height="152.4414" style="stroke:#3C7FC0;stroke-width:1.5;" width="206" x="7" y="370.1992"/><image height="50" width="50" x="85" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABfUlEQVR4XtWOAY7DIAwE+/9P36mVEm0HQ7wcTriRRmo9hvB6recn4bbwoa6Pwses8jb44QrL4QerXQ4/cKfL4MVP+Sd42dNOwUt20YKHd9KCh3czBQ/t6hAu7+wQLu9uCJf+iw1cuEOFLesXjI4K25UKW9YvGB0VtisVNscTBkfCPlJhczxhcIzgTk+FzfEDh64R3OmpsDl+4NC1B/ciFTbXZuA6grtUYXNtBq5K9H+kwubaDFyV0SxSYXNtBq5KNHvDM9Eem2szcFUyc3cnazNwVZyW6Y7NwFUZtTejzubaDFwVtqs+aq7NwFVhy+z05o4nDI4KW7TzJuqcOZ4wOCps2b1o5njC4KiwUYVt1gYuZFXYIhW2GRu4kFVhi1TYZgzhUsYDzkcqbI5duFipwpZ1CJerVNgyXsIDlSpsI9PwYKUKW08LHq70gPPIKXhJlQpbb8+Gl1WpsLFPw0urPOjNl8DLqzzQ3yXww6u9HT5glY/Bh8y6FXzcyKX8AqAq6Wv25cYoAAAAAElFTkSuQmCC" y="380.1992"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="137" x="41.5" y="445.668">Marcus manifest</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="35" x="92.5" y="460.6445">[Next]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="112" y="476.7109"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="178" x="21" y="493.1992">Temporary API for Marcus</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="94" x="63" y="509.6875">IIIF manifests.</text><!--MD5=[de93d881034ae2b005eca73b65398148]
-entity sparql--><path d="M9,666.1992 C9,656.1992 110,656.1992 110,656.1992 C110,656.1992 211,656.1992 211,666.1992 L211,759.9961 C211,769.9961 110,769.9961 110,769.9961 C110,769.9961 9,769.9961 9,759.9961 L9,666.1992 " fill="#438DD5" style="stroke:#3C7FC0;stroke-width:1.5;"/><path d="M9,666.1992 C9,676.1992 110,676.1992 110,676.1992 C110,676.1992 211,676.1992 211,666.1992 " fill="none" style="stroke:#3C7FC0;stroke-width:1.5;"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="129" x="43" y="695.668">Marcus SPARQL</text><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="74" x="73" y="714.5117">endpoint</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="44" x="88" y="729.4883">[Fuseki]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="112" y="745.5547"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="178" x="23" y="762.043">Data endpoint for Marcus.</text><!--MD5=[c00afe3db0c8ea2b21346873462b2a20]
-link frontend to api--><path d="M372.171,116.2502 C462.846,131.3622 592.144,166.9182 670,250.1992 C685.154,266.4092 696.2409,286.4505 704.3447,307.4556 C708.3965,317.9581 711.7027,328.7016 714.3985,339.3277 C715.0725,341.9842 715.7083,344.6333 716.3081,347.2696 C716.608,348.5877 716.8989,349.9026 717.181,351.2135 C717.3221,351.869 717.461,352.5235 717.5977,353.1769 C717.6661,353.5036 717.7339,353.83 717.8012,354.1562 " fill="none" id="frontend-to-api" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="717.8012,354.1562,719.1228,345.715,713.2465,346.9274,717.8012,354.1562" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="30" x="688" y="223.3008">Uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="663" y="237.4336">[JSON/HTTPS]</text><!--MD5=[df12e74ca71a6ef000ee08cd9197b84e]
-link frontend to app--><path d="M269,180.2342 C269,204.8747 269,233.4343 269,262.4919 C269,277.0206 269,291.6738 269,306.0239 C269,313.1989 269,320.2981 269,327.2681 C269,330.7531 269,334.2058 269,337.6195 C269,339.3263 269,341.0234 269,342.7099 " fill="none" id="frontend-to-app" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="269,342.7099,272,334.7099,266,334.7099,269,342.7099" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="30" x="295" y="223.3008">Uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="270" y="237.4336">[JSON/HTTPS]</text><!--MD5=[8bf8f78c8138200d535fc92b12eeb6a8]
-link frontend to marcusManifest--><path d="M166.574,180.2972 C158.317,189.6012 150.9,199.6012 145,210.1992 C119.393,256.1922 110.619,314.7282 108.259,361.8732 " fill="none" id="frontend-to-marcusManifest" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="107.911,369.9362,111.2525,362.0727,105.2581,361.8145,107.911,369.9362" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="113" x="146" y="223.3008">Fetches manifests</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="162.5" y="237.4336">[JSON/HTTPS]</text><!--MD5=[b6a0ac1322f03a45938afc16e0063b61]
-link marcusManifest to sparql--><path d="M110,522.4292 C110,561.9772 110,609.9542 110,647.7732 " fill="none" id="marcusManifest-to-sparql" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="110,656.1712,113,648.1712,107,648.1712,110,656.1712" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="78" x="112" y="591.3008">Fetches data</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="111" y="605.4336">[JSON/HTTPS]</text><!--MD5=[7ea119c7c8011febc771f182c10b6cc3]
-link api_manifest to sanity_db--><path d="M870,506.0112 C870,543.1792 870,591.6892 870,632.3182 " fill="none" id="api_manifest-to-sanity_db" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="870,640.3332,873,632.3332,867,632.3332,870,640.3332" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="30" x="896" y="591.3008">Uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="871" y="605.4336">[JSON/HTTPS]</text><rect fill="#FFFFFF" height="162.3945" rx="5" ry="5" style="stroke:#FFFFFF;stroke-width:1.0;" width="159" x="860" y="799.6523"/><text fill="#000000" font-family="sans-serif" font-size="14" font-weight="bold" lengthAdjust="spacing" textLength="51" x="866" y="820.1875">Legend</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="921" y="820.1875"/><rect fill="#08427B" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="866" y="823.1406"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="48" x="870" y="836.6758">person</text><rect fill="#1168BD" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="866" y="839.6289"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="47" x="870" y="853.1641">system</text><rect fill="#438DD5" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="866" y="856.1172"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="65" x="870" y="869.6523">container</text><rect fill="#85BBF0" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="866" y="872.6055"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="78" x="870" y="886.1406">component</text><rect fill="#686868" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="866" y="889.0938"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="109" x="870" y="902.6289">external person</text><rect fill="#999999" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="866" y="905.582"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="108" x="870" y="919.1172">external system</text><rect fill="#B3B3B3" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="866" y="922.0703"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="126" x="870" y="935.6055">external container</text><rect fill="#CCCCCC" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="866" y="938.5586"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="139" x="870" y="952.0938">external component</text><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="866" x2="1013" y1="806.6523" y2="806.6523"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="866" x2="1013" y1="823.1406" y2="823.1406"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="866" x2="1013" y1="839.6289" y2="839.6289"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="866" x2="1013" y1="856.1172" y2="856.1172"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="866" x2="1013" y1="872.6055" y2="872.6055"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="866" x2="1013" y1="889.0938" y2="889.0938"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="866" x2="1013" y1="905.582" y2="905.582"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="866" x2="1013" y1="922.0703" y2="922.0703"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="866" x2="1013" y1="938.5586" y2="938.5586"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="866" x2="1013" y1="955.0469" y2="955.0469"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="866" x2="866" y1="806.6523" y2="955.0469"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="1013" x2="1013" y1="806.6523" y2="955.0469"/><!--MD5=[39c14553828d308ed41b0ce288d46199]
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="1542px" preserveAspectRatio="none" style="width:849px;height:1542px;background:#FFFFFF;" version="1.1" viewBox="0 0 849 1542" width="849px" zoomAndPan="magnify"><defs/><g><text fill="#000000" font-family="sans-serif" font-size="18" lengthAdjust="spacing" textLength="337" x="249.5" y="17.4023">Component diagram for Next frontend</text><!--MD5=[3ee045e728939fe034a5f1f68a887008]
+cluster next--><a href="img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABm0lEQVRoQ92Z25LDMAhDt///0dtJpu4kDhgBimPaZ0x0LPCtrz/+7x9I+QJiXCGshIj4kbC0jkyCrHgNLKQpMugugCOYW5d3wAyIEBAKMhvADYOAPAkBA1kgq0A0IFXvCGQ1iCGMBrIqxAYjaq4IIsJIICu7oTZ/D1IF4uJKZZATzBGkkhuXEnsahPH9PUdLlHEjIyYz9rSv/ALIbggbZEvqcZfhyG0gHhgqiGcGpVtdZlNdHgR1hQWyr1p3ONKcs3IvC7IJ94jzxA6fh9iONAdQgWic+cY1A2TUL8uD9KdTrVdKgCAwJUGkEisDYrlSCgSFsfac4SM4+9CINLVWYiVAEFfKgFgw5qanBJxuiOghzzr9IrNKa/CPmN8FiboSWTBYrnzz9JcipDSitdyPY8CoIFFXInBZkJMJmWtqRDzLlYtuCWSmK9ElGQZ5CgbpUXHyNUfQOzejvDyuqHotkJnOWM0/1IqAPAHTl5ip0ww41A5Sv4xSO26wsD44cCJQRJP8Dyk4rXc5NB2EvbKFAJqI1GDBOY9L1G+/AToZcCqjfA/hAAAAAElFTkSuQmCC" target="_top" title="img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABm0lEQVRoQ92Z25LDMAhDt///0dtJpu4kDhgBimPaZ0x0LPCtrz/+7x9I+QJiXCGshIj4kbC0jkyCrHgNLKQpMugugCOYW5d3wAyIEBAKMhvADYOAPAkBA1kgq0A0IFXvCGQ1iCGMBrIqxAYjaq4IIsJIICu7oTZ/D1IF4uJKZZATzBGkkhuXEnsahPH9PUdLlHEjIyYz9rSv/ALIbggbZEvqcZfhyG0gHhgqiGcGpVtdZlNdHgR1hQWyr1p3ONKcs3IvC7IJ94jzxA6fh9iONAdQgWic+cY1A2TUL8uD9KdTrVdKgCAwJUGkEisDYrlSCgSFsfac4SM4+9CINLVWYiVAEFfKgFgw5qanBJxuiOghzzr9IrNKa/CPmN8FiboSWTBYrnzz9JcipDSitdyPY8CoIFFXInBZkJMJmWtqRDzLlYtuCWSmK9ElGQZ5CgbpUXHyNUfQOzejvDyuqHotkJnOWM0/1IqAPAHTl5ip0ww41A5Sv4xSO26wsD44cCJQRJP8Dyk4rXc5NB2EvbKFAJqI1GDBOY9L1G+/AToZcCqjfA/hAAAAAElFTkSuQmCC" xlink:actuate="onRequest" xlink:href="img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABm0lEQVRoQ92Z25LDMAhDt///0dtJpu4kDhgBimPaZ0x0LPCtrz/+7x9I+QJiXCGshIj4kbC0jkyCrHgNLKQpMugugCOYW5d3wAyIEBAKMhvADYOAPAkBA1kgq0A0IFXvCGQ1iCGMBrIqxAYjaq4IIsJIICu7oTZ/D1IF4uJKZZATzBGkkhuXEnsahPH9PUdLlHEjIyYz9rSv/ALIbggbZEvqcZfhyG0gHhgqiGcGpVtdZlNdHgR1hQWyr1p3ONKcs3IvC7IJ94jzxA6fh9iONAdQgWic+cY1A2TUL8uD9KdTrVdKgCAwJUGkEisDYrlSCgSFsfac4SM4+9CINLVWYiVAEFfKgFgw5qanBJxuiOghzzr9IrNKa/CPmN8FiboSWTBYrnzz9JcipDSitdyPY8CoIFFXInBZkJMJmWtqRDzLlYtuCWSmK9ElGQZ5CgbpUXHyNUfQOzejvDyuqHotkJnOWM0/1IqAPAHTl5ip0ww41A5Sv4xSO26wsD44cCJQRJP8Dyk4rXc5NB2EvbKFAJqI1GDBOY9L1G+/AToZcCqjfA/hAAAAAElFTkSuQmCC" xlink:show="new" xlink:title="img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABm0lEQVRoQ92Z25LDMAhDt///0dtJpu4kDhgBimPaZ0x0LPCtrz/+7x9I+QJiXCGshIj4kbC0jkyCrHgNLKQpMugugCOYW5d3wAyIEBAKMhvADYOAPAkBA1kgq0A0IFXvCGQ1iCGMBrIqxAYjaq4IIsJIICu7oTZ/D1IF4uJKZZATzBGkkhuXEnsahPH9PUdLlHEjIyYz9rSv/ALIbggbZEvqcZfhyG0gHhgqiGcGpVtdZlNdHgR1hQWyr1p3ONKcs3IvC7IJ94jzxA6fh9iONAdQgWic+cY1A2TUL8uD9KdTrVdKgCAwJUGkEisDYrlSCgSFsfac4SM4+9CINLVWYiVAEFfKgFgw5qanBJxuiOghzzr9IrNKa/CPmN8FiboSWTBYrnzz9JcipDSitdyPY8CoIFFXInBZkJMJmWtqRDzLlYtuCWSmK9ElGQZ5CgbpUXHyNUfQOzejvDyuqHotkJnOWM0/1IqAPAHTl5ip0ww41A5Sv4xSO26wsD44cCJQRJP8Dyk4rXc5NB2EvbKFAJqI1GDBOY9L1G+/AToZcCqjfA/hAAAAAElFTkSuQmCC" xlink:type="simple"><rect fill="#FFFFFF" height="868" style="stroke:#444444;stroke-width:1.0;stroke-dasharray:7.0,7.0;" width="534" x="229" y="258.1992"/><text fill="#444444" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="72" x="460" y="275.668">Next app</text><text fill="#444444" font-family="sans-serif" font-size="12" lengthAdjust="spacing" textLength="63" x="464.5" y="290.6445">[Container]</text></a><!--MD5=[d5ac3844f66b12d9e08170e47495e096]
+cluster app--><rect fill="#FFFFFF" height="186" style="stroke:#444444;stroke-width:1.0;stroke-dasharray:7.0,7.0;" width="470" x="261" y="326.1992"/><text fill="#444444" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="48" x="472" y="343.668">Pages</text><text fill="#444444" font-family="sans-serif" font-size="12" lengthAdjust="spacing" textLength="63" x="464.5" y="358.6445">[Container]</text><!--MD5=[7442f3b126ee602ae02566c1a49e158a]
+cluster api--><rect fill="#FFFFFF" height="204" style="stroke:#444444;stroke-width:1.0;stroke-dasharray:7.0,7.0;" width="285" x="409" y="890.1992"/><text fill="#444444" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="121" x="491" y="907.668">Server side API</text><text fill="#444444" font-family="sans-serif" font-size="12" lengthAdjust="spacing" textLength="63" x="520" y="922.6445">[Container]</text><!--MD5=[67a6735b2a5707e03290b64fb931c9ce]
+cluster components--><rect fill="#FFFFFF" height="204" style="stroke:#444444;stroke-width:1.0;stroke-dasharray:7.0,7.0;" width="285" x="266" y="592.1992"/><text fill="#444444" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="104" x="356.5" y="609.668">Components</text><text fill="#444444" font-family="sans-serif" font-size="12" lengthAdjust="spacing" textLength="63" x="377" y="624.6445">[Container]</text><!--MD5=[85f4d1a33338ddce045f9b827d37a273]
+entity pages--><rect fill="#85BBF0" height="85.9531" style="stroke:#78A8D8;stroke-width:1.5;" width="150" x="557" y="394.1992"/><text fill="#000000" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="54" x="605" y="419.668">/items</text><text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="41" x="611.5" y="434.6445">[Route]</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="634" y="450.7109"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="126" x="571" y="467.1992">Serves static page.</text><!--MD5=[5d258d01bf6889cf2f44a7b6e9a9e8ae]
+entity id--><rect fill="#85BBF0" height="102.4414" style="stroke:#78A8D8;stroke-width:1.5;" width="217" x="304.75" y="386.1992"/><text fill="#000000" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="37" x="394.75" y="411.668">/[id]</text><text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="41" x="392.75" y="426.6445">[Route]</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="415.25" y="442.7109"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="189" x="318.75" y="459.1992">Serves static page based on</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="75" x="375.75" y="475.6875">id variable.</text><!--MD5=[f5830ebc1bf7d5a9a4b07c85dbdf785d]
+entity api_manifest--><rect fill="#85BBF0" height="118.9297" style="stroke:#78A8D8;stroke-width:1.5;" width="218" x="433" y="950.6992"/><text fill="#000000" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="152" x="466" y="976.168">/api/manifest/[id]</text><text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="41" x="521.5" y="991.1445">[Route]</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="544" y="1007.2109"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="174" x="455" y="1023.6992">Fetch basic metadata and</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="198" x="443" y="1040.1875">connected images by id from</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="63" x="510.5" y="1056.6758">Sanity DB</text><!--MD5=[97d47de14f4cfe6ede125365af6aaf98]
+entity mirador_viewer--><rect fill="#85BBF0" height="118.9297" style="stroke:#78A8D8;stroke-width:1.5;" width="218" x="309" y="652.6992"/><text fill="#000000" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="129" x="353.5" y="678.168">/miradorViewer</text><text fill="#000000" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="40" x="398" y="693.1445">[React]</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="420" y="709.2109"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="174" x="331" y="725.6992">Fetch basic metadata and</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="198" x="319" y="742.1875">connected images by id from</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="63" x="386.5" y="758.6758">Sanity DB</text><!--MD5=[b1e3d2dcb3697de9e6328d1cb436cbc4]
+entity frontend--><rect fill="#438DD5" height="152.4414" style="stroke:#3C7FC0;stroke-width:1.5;" width="206" x="517" y="28.1992"/><image height="50" width="50" x="595" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABfUlEQVR4XtWOAY7DIAwE+/9P36mVEm0HQ7wcTriRRmo9hvB6recn4bbwoa6Pwses8jb44QrL4QerXQ4/cKfL4MVP+Sd42dNOwUt20YKHd9KCh3czBQ/t6hAu7+wQLu9uCJf+iw1cuEOFLesXjI4K25UKW9YvGB0VtisVNscTBkfCPlJhczxhcIzgTk+FzfEDh64R3OmpsDl+4NC1B/ciFTbXZuA6grtUYXNtBq5K9H+kwubaDFyV0SxSYXNtBq5KNHvDM9Eem2szcFUyc3cnazNwVZyW6Y7NwFUZtTejzubaDFwVtqs+aq7NwFVhy+z05o4nDI4KW7TzJuqcOZ4wOCps2b1o5njC4KiwUYVt1gYuZFXYIhW2GRu4kFVhi1TYZgzhUsYDzkcqbI5duFipwpZ1CJerVNgyXsIDlSpsI9PwYKUKW08LHq70gPPIKXhJlQpbb8+Gl1WpsLFPw0urPOjNl8DLqzzQ3yXww6u9HT5glY/Bh8y6FXzcyKX8AqAq6Wv25cYoAAAAAElFTkSuQmCC" y="38.1992"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="113" x="563.5" y="103.668">Next frontend</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="126" x="557" y="118.6445">[Javascript and React]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="622" y="134.7109"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="178" x="531" y="151.1992">Provides all content to the</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="185" x="527.5" y="167.6875">user via their web browser.</text><!--MD5=[3d74be2a757051a7059b41e555fce061]
+entity sanity_db--><path d="M441.75,1214.6992 C441.75,1204.6992 542.25,1204.6992 542.25,1204.6992 C542.25,1204.6992 642.75,1204.6992 642.75,1214.6992 L642.75,1339.6523 C642.75,1349.6523 542.25,1349.6523 542.25,1349.6523 C542.25,1349.6523 441.75,1349.6523 441.75,1339.6523 L441.75,1214.6992 " fill="#B3B3B3" style="stroke:#A6A6A6;stroke-width:1.5;"/><path d="M441.75,1214.6992 C441.75,1224.6992 542.25,1224.6992 542.25,1224.6992 C542.25,1224.6992 642.75,1224.6992 642.75,1214.6992 " fill="none" style="stroke:#A6A6A6;stroke-width:1.5;"/><image height="50" width="50" x="517.25" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABjklEQVR4Xu2YzU7CQBRGeSoTJa4NaHwNxY2LwsqXplI0rpBLwEzOtGXa3tuZxjnJ2c39+SgNtLNZJpPJdGVXvB5CrY6yPjpcsqvsNzpcaIj79SpOIC6iJeeYwuHacp4J5eLWG2wh56qzDQzCOqEqXrxzTbJWnWtBeL4O1jTJOjUkxMnHuTe0z2DWU55X4y9IzVXh2RC+N29eH8oaFdwgbphqwG8AF6c8rwKDbB9u7IZZ4gU5y3PJwwCuu+XddAJx+SZZlyRc+po/T/M0g3HRPsrfHPaNAhcb4mfMe0s+US6kIeeMglWYchHpCnERDaPeQ+Xxu86FhlguI4Zxka8Il+sqeyaBfMJcNET2SY7QK8a6pOHykw0iMMAkg+yL1em5hiFMgvDJjfJ8F9w+h+f7uEG+FB93owYRWRMCe5gHETiwTta0IVeR9Zce0YOEBKrON3ebZiEucKCV5kEEDrWQM02oNv5gTTnPHC6gIWeMxuHj3Vumj9U6YggXLhaqvMhmr6Rof9Pe/19AJpP55/wCwk7g9HfTvaAAAAAASUVORK5CYII=" y="1228.6992"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="168" x="458.25" y="1294.168">Sanity Cloud Storage</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="85" x="499.75" y="1309.1445">[Google Cloud]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="544.25" y="1325.2109"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="177" x="455.75" y="1341.6992">Stores metadata and files.</text><!--MD5=[9a631f4ec9219869b7e8b94d6775f9b9]
+entity marcusManifest--><rect fill="#438DD5" height="152.4414" style="stroke:#3C7FC0;stroke-width:1.5;" width="206" x="7" y="934.1992"/><image height="50" width="50" x="85" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABfUlEQVR4XtWOAY7DIAwE+/9P36mVEm0HQ7wcTriRRmo9hvB6recn4bbwoa6Pwses8jb44QrL4QerXQ4/cKfL4MVP+Sd42dNOwUt20YKHd9KCh3czBQ/t6hAu7+wQLu9uCJf+iw1cuEOFLesXjI4K25UKW9YvGB0VtisVNscTBkfCPlJhczxhcIzgTk+FzfEDh64R3OmpsDl+4NC1B/ciFTbXZuA6grtUYXNtBq5K9H+kwubaDFyV0SxSYXNtBq5KNHvDM9Eem2szcFUyc3cnazNwVZyW6Y7NwFUZtTejzubaDFwVtqs+aq7NwFVhy+z05o4nDI4KW7TzJuqcOZ4wOCps2b1o5njC4KiwUYVt1gYuZFXYIhW2GRu4kFVhi1TYZgzhUsYDzkcqbI5duFipwpZ1CJerVNgyXsIDlSpsI9PwYKUKW08LHq70gPPIKXhJlQpbb8+Gl1WpsLFPw0urPOjNl8DLqzzQ3yXww6u9HT5glY/Bh8y6FXzcyKX8AqAq6Wv25cYoAAAAAElFTkSuQmCC" y="944.1992"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="137" x="41.5" y="1009.668">Marcus manifest</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="35" x="92.5" y="1024.6445">[Next]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="112" y="1040.7109"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="178" x="21" y="1057.1992">Temporary API for Marcus</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="94" x="63" y="1073.6875">IIIF manifests.</text><!--MD5=[de93d881034ae2b005eca73b65398148]
+entity sparql--><path d="M9,1239.6992 C9,1229.6992 110,1229.6992 110,1229.6992 C110,1229.6992 211,1229.6992 211,1239.6992 L211,1314.6523 C211,1324.6523 110,1324.6523 110,1324.6523 C110,1324.6523 9,1324.6523 9,1314.6523 L9,1239.6992 " fill="#438DD5" style="stroke:#3C7FC0;stroke-width:1.5;"/><path d="M9,1239.6992 C9,1249.6992 110,1249.6992 110,1249.6992 C110,1249.6992 211,1249.6992 211,1239.6992 " fill="none" style="stroke:#3C7FC0;stroke-width:1.5;"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="143" x="38.5" y="1269.168">SPARQL endpoint</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="44" x="88" y="1284.1445">[Fuseki]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="112" y="1300.2109"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="178" x="23" y="1316.6992">Data endpoint for Marcus.</text><!--MD5=[8ebd58f6b3375343ecaa75fe0bd18033]
+link app to components--><path d="M270.3568,512.2871 C270.3654,512.7599 270.3741,513.2339 270.3828,513.7091 C270.4524,517.5111 270.5235,521.3925 270.5958,525.3375 C270.8848,541.1176 271.1924,557.9148 271.5,574.7117 C271.5769,578.911 271.6538,583.1102 271.7304,587.2935 C271.7496,588.3393 271.7687,589.3841 271.7878,590.4277 C271.7974,590.9495 271.8069,591.471 271.8165,591.9921 " fill="none" id="app-to-components" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="271.8165,591.9921,274.6695,583.9386,268.6705,584.0484,271.8165,591.9921" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="30" x="298" y="549.3008">Uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="273" y="563.4336">[JSON/HTTPS]</text><!--MD5=[34cfbe26f1ff072a7179695b0f111cf6]
+link id to mirador_viewer--><path d="M413.917,488.2712 C414.719,532.0712 415.891,596.0392 416.773,644.2312 " fill="none" id="id-to-mirador_viewer" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="416.924,652.4292,419.7763,644.3754,413.7774,644.4858,416.924,652.4292" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="30" x="442" y="549.3008">Uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="417" y="563.4336">[JSON/HTTPS]</text><!--MD5=[009f1bdadfdb747559dc589c849ab181]
+link mirador_viewer to api_manifest--><path d="M442.647,772.0332 C463.313,821.3672 492.808,891.7742 514.291,943.0542 " fill="none" id="mirador_viewer-to-api_manifest" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="517.4,950.4762,517.0755,941.9384,511.5416,944.2569,517.4,950.4762" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="30" x="506" y="840.3008">Uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="481" y="854.4336">[JSON/HTTPS]</text><!--MD5=[c00afe3db0c8ea2b21346873462b2a20]
+link frontend to api--><path d="M686.6,180.5292 C701.481,201.6692 715.164,225.6392 723,250.1992 C773.923,409.8207 765.2148,597.8645 743.508,746.846 C732.6546,821.3367 718.5516,886.0619 707.0281,932.586 C704.1472,944.217 701.4275,954.7104 698.9602,963.9345 C697.7265,968.5465 696.5559,972.8412 695.4597,976.8021 C695.1857,977.7923 694.9163,978.7617 694.6518,979.7099 C694.5195,980.184 694.3884,980.6529 694.2586,981.1164 " fill="none" id="frontend-to-api" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="694.2586,981.1164,699.3052,974.2221,693.5276,972.6037,694.2586,981.1164" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="30" x="786" y="549.3008">Uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="761" y="563.4336">[JSON/HTTPS]</text><!--MD5=[df12e74ca71a6ef000ee08cd9197b84e]
+link frontend to app--><path d="M516.803,121.8792 C440.788,139.9192 341.667,176.6592 288,250.1992 C263.891,283.2392 258.9115,328.8137 260.0713,366.5802 C260.2162,371.301 260.4571,375.8998 260.7686,380.3369 C260.8075,380.8916 260.8475,381.4437 260.8886,381.9932 C260.9092,382.2679 260.93,382.542 260.951,382.8155 " fill="none" id="frontend-to-app" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="260.951,382.8155,263.3277,374.6087,257.3455,375.0695,260.951,382.8155" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="30" x="347" y="223.3008">Uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="322" y="237.4336">[JSON/HTTPS]</text><!--MD5=[ba084830ed4dce89920c704d0e19a212]
+link mirador_viewer to marcusManifest--><path d="M356.781,772.0332 C310.158,816.8392 245.447,879.0292 193.987,928.4842 " fill="none" id="mirador_viewer-to-marcusManifest" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="188.098,934.1442,195.9447,930.7636,191.7871,926.4377,188.098,934.1442" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="95" x="302" y="833.3008">Fetches Marcus</text><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="62" x="320.5" y="847.4336">manifests</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="311.5" y="861.5664">[JSON/HTTPS]</text><!--MD5=[b6a0ac1322f03a45938afc16e0063b61]
+link marcusManifest to sparql--><path d="M110,1086.4292 C110,1129.4292 110,1182.3932 110,1221.4312 " fill="none" id="marcusManifest-to-sparql" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="110,1229.5422,113,1221.5422,107,1221.5422,110,1229.5422" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="78" x="112" y="1155.3008">Fetches data</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="111" y="1169.4336">[JSON/HTTPS]</text><!--MD5=[7ea119c7c8011febc771f182c10b6cc3]
+link api_manifest to sanity_db--><path d="M542,1070.0112 C542,1107.1792 542,1155.6892 542,1196.3182 " fill="none" id="api_manifest-to-sanity_db" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="542,1204.3332,545,1196.3332,539,1196.3332,542,1204.3332" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="30" x="568" y="1155.3008">Uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="80" x="543" y="1169.4336">[JSON/HTTPS]</text><rect fill="#FFFFFF" height="162.3945" rx="5" ry="5" style="stroke:#FFFFFF;stroke-width:1.0;" width="159" x="668" y="1363.6523"/><text fill="#000000" font-family="sans-serif" font-size="14" font-weight="bold" lengthAdjust="spacing" textLength="51" x="674" y="1384.1875">Legend</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="0" x="729" y="1384.1875"/><rect fill="#08427B" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="674" y="1387.1406"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="48" x="678" y="1400.6758">person</text><rect fill="#1168BD" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="674" y="1403.6289"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="47" x="678" y="1417.1641">system</text><rect fill="#438DD5" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="674" y="1420.1172"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="65" x="678" y="1433.6523">container</text><rect fill="#85BBF0" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="674" y="1436.6055"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="78" x="678" y="1450.1406">component</text><rect fill="#686868" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="674" y="1453.0938"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="109" x="678" y="1466.6289">external person</text><rect fill="#999999" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="674" y="1469.582"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="108" x="678" y="1483.1172">external system</text><rect fill="#B3B3B3" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="674" y="1486.0703"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="126" x="678" y="1499.6055">external container</text><rect fill="#CCCCCC" height="16.4883" style="stroke:none;stroke-width:1.0;" width="147" x="674" y="1502.5586"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="139" x="678" y="1516.0938">external component</text><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="674" x2="821" y1="1370.6523" y2="1370.6523"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="674" x2="821" y1="1387.1406" y2="1387.1406"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="674" x2="821" y1="1403.6289" y2="1403.6289"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="674" x2="821" y1="1420.1172" y2="1420.1172"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="674" x2="821" y1="1436.6055" y2="1436.6055"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="674" x2="821" y1="1453.0938" y2="1453.0938"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="674" x2="821" y1="1469.582" y2="1469.582"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="674" x2="821" y1="1486.0703" y2="1486.0703"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="674" x2="821" y1="1502.5586" y2="1502.5586"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="674" x2="821" y1="1519.0469" y2="1519.0469"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="674" x2="674" y1="1370.6523" y2="1519.0469"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="821" x2="821" y1="1370.6523" y2="1519.0469"/><!--MD5=[66eebc1c5bd76ed29c40389db595807a]
 @startuml "component_web"
 !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
 ' uncomment the following line and comment the first to use locally
@@ -37,27 +42,33 @@ Container(frontend, "Next frontend", "Javascript and React", "Provides all conte
 ContainerDb_Ext(sanity_db, "Sanity Cloud Storage", "Google Cloud", "Stores metadata and files.", SANITY)
 
 Container(marcusManifest, "Marcus manifest", "Next", "Temporary API for Marcus IIIF manifests.", NEXT)
-ContainerDb(sparql, "Marcus SPARQL endpoint", "Fuseki", "Data endpoint for Marcus.")
+ContainerDb(sparql, "SPARQL endpoint", "Fuseki", "Data endpoint for Marcus.")
 
 Container_Boundary(next, "Next app", "", NEXT) {
 
     Container_Boundary(app, "Pages") {
-        Component(pages, "/items", "Route", "Serves static pages.")
-        Component(id, "/[id]", "Route", "Serves static pages.")
-
+        Component(pages, "/items", "Route", "Serves static page.")
+        Component(id, "/[id]", "Route", "Serves static page based on id variable.")
     }
 
     Container_Boundary(api, "Server side API") {
         Component(api_manifest, "/api/manifest/[id]", "Route", "Fetch basic metadata and connected images by id from Sanity DB")
-
     }
+    Container_Boundary(components, "Components") {
+        Component(mirador_viewer, "/miradorViewer", "React", "Fetch basic metadata and connected images by id from Sanity DB")
+    }
+    
+    Rel_D(app, components, "Uses", "JSON/HTTPS")
+    Rel_D(id, mirador_viewer, "Uses", "JSON/HTTPS")
+    Rel_D(mirador_viewer, api_manifest, "Uses", "JSON/HTTPS")
+
 }
 
 
 'Rel_L(frontend, sanity_db, "Uses", "JSON/HTTPS")
 Rel_D(frontend, api, "Uses", "JSON/HTTPS")
 Rel_D(frontend, app, "Uses", "JSON/HTTPS")
-Rel_D(frontend, marcusManifest, "Fetches manifests", "JSON/HTTPS")
+Rel_D(mirador_viewer, marcusManifest, "Fetches Marcus manifests", "JSON/HTTPS")
 Rel_D(marcusManifest, sparql, "Fetches data", "JSON/HTTPS")
 Rel(api_manifest, sanity_db, "Uses", "JSON/HTTPS")
 
@@ -735,26 +746,32 @@ rectangle "<img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4
 database "<img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAACeklEQVRoQ+2ZQU5bQQyGPe8hVWkT0mOgqlUldskNkos06aaLwIojlGzbHgTBCYA1C9hwiUYEWkQSI0cMekomE9vjlwBK1jO2P//2eObFwRv5uTfCARuQl6bkRpGQIje9DnKVogxW+3/MEmliSAIQAq0ZACWBpAIUoTLn4MPhb3U86o2WEEUgrToqkLIgPJAGRgwyaDUw+/SV29PqdVIYMcjfVgNzBkgokGHvGyJzBq8dhBMAtzQ5trzkIkVIjenGLIN858tc2Ugc0+ZlQBJ7OhAAmC0viVOfgX/733E0mUT7iGtXDULePYxzDqrKGWClShIITMaQf94FbtbURxhjYxrIk4OPJ+ciO4y4xEtEATw3e8BN7hzUjs9E9sTRRjaIHMdAij7WoZAIhILlwniwSp7Bu6NTsR+pWmIHUpBQQOS0btxXYhCNKrHs0vV926C3VCB0cWQ/BQU1ktJbKhCKrSwYBw7qJ/LTTw3iE23RM7OiaXooGcQHMWg3EQ0LzjmA+jF/0JqBzGZ10GoiQlonSXqmNJA5sHZDJRgXZmUgWsVePEgRLHZgvCqQ2JB9VSC3vS5OAGF8dTE3Ps1BrF5yoUFftF29voTBw+h52cpB6D3y3ui5W1Rm5SCUQs2TN6R0qSAU6LLyksLc7XVxHLgNUEL8SWauCBfEF3dMnWGvu3TqkypcCPIpHogcVQQ394VLSweRKqOFkvabWBEKbLjfQYx/INTGP90nhVCVVjHCMspMA5EMQgbw4AcO/98nKTANxAFUD/V/jqpKa9l0llBtZRlUfv5KjiPZwKKg41/aHdT6+j8+Qz5LA5GoYrF2A2KRRUsbG0Uss2lh6xFkswBC9e0BzQAAAABJRU5ErkJggg==>\n==Sanity Cloud Storage\n//<size:12>[Google Cloud]</size>//\n\n Stores metadata and files." <<external_container>> as sanity_db 
 
 rectangle "<img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABm0lEQVRoQ92Z25LDMAhDt///0dtJpu4kDhgBimPaZ0x0LPCtrz/+7x9I+QJiXCGshIj4kbC0jkyCrHgNLKQpMugugCOYW5d3wAyIEBAKMhvADYOAPAkBA1kgq0A0IFXvCGQ1iCGMBrIqxAYjaq4IIsJIICu7oTZ/D1IF4uJKZZATzBGkkhuXEnsahPH9PUdLlHEjIyYz9rSv/ALIbggbZEvqcZfhyG0gHhgqiGcGpVtdZlNdHgR1hQWyr1p3ONKcs3IvC7IJ94jzxA6fh9iONAdQgWic+cY1A2TUL8uD9KdTrVdKgCAwJUGkEisDYrlSCgSFsfac4SM4+9CINLVWYiVAEFfKgFgw5qanBJxuiOghzzr9IrNKa/CPmN8FiboSWTBYrnzz9JcipDSitdyPY8CoIFFXInBZkJMJmWtqRDzLlYtuCWSmK9ElGQZ5CgbpUXHyNUfQOzejvDyuqHotkJnOWM0/1IqAPAHTl5ip0ww41A5Sv4xSO26wsD44cCJQRJP8Dyk4rXc5NB2EvbKFAJqI1GDBOY9L1G+/AToZcCqjfA/hAAAAAElFTkSuQmCC>\n==Marcus manifest\n//<size:12>[Next]</size>//\n\n Temporary API for Marcus IIIF manifests." <<container>> as marcusManifest 
-database "==Marcus SPARQL endpoint\n//<size:12>[Fuseki]</size>//\n\n Data endpoint for Marcus." <<container>> as sparql 
+database "==SPARQL endpoint\n//<size:12>[Fuseki]</size>//\n\n Data endpoint for Marcus." <<container>> as sparql 
 
 rectangle "==Next app\n<size:12>[Container]</size>" <<boundary>> as next [[img:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABm0lEQVRoQ92Z25LDMAhDt///0dtJpu4kDhgBimPaZ0x0LPCtrz/+7x9I+QJiXCGshIj4kbC0jkyCrHgNLKQpMugugCOYW5d3wAyIEBAKMhvADYOAPAkBA1kgq0A0IFXvCGQ1iCGMBrIqxAYjaq4IIsJIICu7oTZ/D1IF4uJKZZATzBGkkhuXEnsahPH9PUdLlHEjIyYz9rSv/ALIbggbZEvqcZfhyG0gHhgqiGcGpVtdZlNdHgR1hQWyr1p3ONKcs3IvC7IJ94jzxA6fh9iONAdQgWic+cY1A2TUL8uD9KdTrVdKgCAwJUGkEisDYrlSCgSFsfac4SM4+9CINLVWYiVAEFfKgFgw5qanBJxuiOghzzr9IrNKa/CPmN8FiboSWTBYrnzz9JcipDSitdyPY8CoIFFXInBZkJMJmWtqRDzLlYtuCWSmK9ElGQZ5CgbpUXHyNUfQOzejvDyuqHotkJnOWM0/1IqAPAHTl5ip0ww41A5Sv4xSO26wsD44cCJQRJP8Dyk4rXc5NB2EvbKFAJqI1GDBOY9L1G+/AToZcCqjfA/hAAAAAElFTkSuQmCC]] {
 
 rectangle "==Pages\n<size:12>[Container]</size>" <<boundary>> as app  {
-        rectangle "==/items\n//<size:12>[Route]</size>//\n\n Serves static pages." <<component>> as pages 
-        rectangle "==/[id]\n//<size:12>[Route]</size>//\n\n Serves static pages." <<component>> as id 
-
+        rectangle "==/items\n//<size:12>[Route]</size>//\n\n Serves static page." <<component>> as pages 
+        rectangle "==/[id]\n//<size:12>[Route]</size>//\n\n Serves static page based on id variable." <<component>> as id 
     }
 
 rectangle "==Server side API\n<size:12>[Container]</size>" <<boundary>> as api  {
         rectangle "==/api/manifest/[id]\n//<size:12>[Route]</size>//\n\n Fetch basic metadata and connected images by id from Sanity DB" <<component>> as api_manifest 
-
     }
+rectangle "==Components\n<size:12>[Container]</size>" <<boundary>> as components  {
+        rectangle "==/miradorViewer\n//<size:12>[React]</size>//\n\n Fetch basic metadata and connected images by id from Sanity DB" <<component>> as mirador_viewer 
+    }
+    
+    app -DOWN->> components : **Uses**\n//<size:12>[JSON/HTTPS]</size>//
+    id -DOWN->> mirador_viewer : **Uses**\n//<size:12>[JSON/HTTPS]</size>//
+    mirador_viewer -DOWN->> api_manifest : **Uses**\n//<size:12>[JSON/HTTPS]</size>//
+
 }
 
 
 frontend -DOWN->> api : **Uses**\n//<size:12>[JSON/HTTPS]</size>//
 frontend -DOWN->> app : **Uses**\n//<size:12>[JSON/HTTPS]</size>//
-frontend -DOWN->> marcusManifest : **Fetches manifests**\n//<size:12>[JSON/HTTPS]</size>//
+mirador_viewer -DOWN->> marcusManifest : **Fetches Marcus manifests**\n//<size:12>[JSON/HTTPS]</size>//
 marcusManifest -DOWN->> sparql : **Fetches data**\n//<size:12>[JSON/HTTPS]</size>//
 api_manifest - ->> sanity_db : **Uses**\n//<size:12>[JSON/HTTPS]</size>//
 
diff --git a/docs/diagrams/src/component_web.puml b/docs/diagrams/src/component_web.puml
index 9e374cf..0fbe7cc 100644
--- a/docs/diagrams/src/component_web.puml
+++ b/docs/diagrams/src/component_web.puml
@@ -21,27 +21,33 @@ Container(frontend, "Next frontend", "Javascript and React", "Provides all conte
 ContainerDb_Ext(sanity_db, "Sanity Cloud Storage", "Google Cloud", "Stores metadata and files.", SANITY)
 
 Container(marcusManifest, "Marcus manifest", "Next", "Temporary API for Marcus IIIF manifests.", NEXT)
-ContainerDb(sparql, "Marcus SPARQL endpoint", "Fuseki", "Data endpoint for Marcus.")
+ContainerDb(sparql, "SPARQL endpoint", "Fuseki", "Data endpoint for Marcus.")
 
 Container_Boundary(next, "Next app", "", NEXT) {
 
     Container_Boundary(app, "Pages") {
-        Component(pages, "/items", "Route", "Serves static pages.")
-        Component(id, "/[id]", "Route", "Serves static pages.")
-
+        Component(pages, "/items", "Route", "Serves static page.")
+        Component(id, "/[id]", "Route", "Serves static page based on id variable.")
     }
 
     Container_Boundary(api, "Server side API") {
         Component(api_manifest, "/api/manifest/[id]", "Route", "Fetch basic metadata and connected images by id from Sanity DB")
-
     }
+    Container_Boundary(components, "Components") {
+        Component(mirador_viewer, "/miradorViewer", "React", "Fetch basic metadata and connected images by id from Sanity DB")
+    }
+    
+    Rel_D(app, components, "Uses", "JSON/HTTPS")
+    Rel_D(id, mirador_viewer, "Uses", "JSON/HTTPS")
+    Rel_D(mirador_viewer, api_manifest, "Uses", "JSON/HTTPS")
+
 }
 
 
 'Rel_L(frontend, sanity_db, "Uses", "JSON/HTTPS")
 Rel_D(frontend, api, "Uses", "JSON/HTTPS")
 Rel_D(frontend, app, "Uses", "JSON/HTTPS")
-Rel_D(frontend, marcusManifest, "Fetches manifests", "JSON/HTTPS")
+Rel_D(mirador_viewer, marcusManifest, "Fetches Marcus manifests", "JSON/HTTPS")
 Rel_D(marcusManifest, sparql, "Fetches data", "JSON/HTTPS")
 Rel(api_manifest, sanity_db, "Uses", "JSON/HTTPS")
 
-- 
GitLab