Merge pull request #248 from OpenTechStrategies/247-demonstrate-referring-to-external-data-source

hminsky2002 · web-flow · commit a3adbe93e852 · 2025-07-09T00:01:52.000-04:00
247 demonstrate referring to external data source
diff --git a/README.md b/README.md
@@ -13,6 +13,7 @@ it is used only to serve the front-end component as bundeled javascript.
 
 The ```front-end``` folder contains a Vue Application, built with Vite and Typescript. The ultimate goal of this application is to provide an alternative UI to the current Arches platform, using a modern web framework like Vue. Currently, the Vue code is bundled by vite into the static directory of the Django Application, which is then served on the user's Arches server.
 
+The application also supports fetching data from external api sources, as seen in the `src/components/ArtistNote.vue` component. This component is designed around a simple API endpoint that is foreign-keyed to the Arches database, linking the arches dataset to an external custom set. The repository for the external API is [here](https://github.com/hminsky2002/archesAppRemoteServer).
 
 # Installation Instructions
 *Credits to users @apeters and @chiatt*
diff --git a/archesdataviewer/static/vite_build/.vite/manifest.json b/archesdataviewer/static/vite_build/.vite/manifest.json
@@ -1,11 +1,11 @@
 {
   "index.html": {
-    "file": "assets/index-DIt9QbVy.js",
+    "file": "assets/index-CVuN95tD.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,
     "css": [
-      "assets/index-BfOOURI1.css"
+      "assets/index-Byc3Ge_L.css"
     ]
   }
 }
diff --git a/archesdataviewer/static/vite_build/assets/index-BfOOURI1.css b/archesdataviewer/static/vite_build/assets/index-BfOOURI1.css
diff --git a/archesdataviewer/static/vite_build/assets/index-Byc3Ge_L.css b/archesdataviewer/static/vite_build/assets/index-Byc3Ge_L.css
diff --git a/archesdataviewer/static/vite_build/assets/index-CVuN95tD.js b/archesdataviewer/static/vite_build/assets/index-CVuN95tD.js
diff --git a/archesdataviewer/static/vite_build/index.html b/archesdataviewer/static/vite_build/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Arches Data Viewer</title>
-    <script type="module" crossorigin src="/assets/index-DIt9QbVy.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BfOOURI1.css">
+    <script type="module" crossorigin src="/assets/index-CVuN95tD.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Byc3Ge_L.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/front-end/.env.example b/front-end/.env.example
@@ -1,3 +1,4 @@
 VITE_ARCHES_API_URL="http://localhost:8002"
 VITE_ARTIST_GRAPH_ID=""
-VITE_ARTWORK_GRAPH_ID=""
+VITE_ARTWORK_GRAPH_ID=""
+VITE_REMOTE_SERVER_URL=""
diff --git a/front-end/src/components/ArtistNote.vue b/front-end/src/components/ArtistNote.vue
@@ -0,0 +1,41 @@
+<template>
+  <div v-if="validateRemoteServerResponseSchema(remoteServerResponse)" class="artist-note">
+    <p>
+      {{ remoteServerResponse.note }}
+      <a :href="remoteServerResponse.url" target="_blank" rel="noopener noreferrer">{{
+        remoteServerResponse.url
+      }}</a>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Artist, RemoteServerResponse } from '@/types';
+import { ref, onMounted } from 'vue';
+import { validateRemoteServerResponseSchema } from '@/types';
+
+const props = defineProps<{
+  artist: Artist;
+}>();
+
+const remoteServerResponse = ref<RemoteServerResponse | undefined>();
+
+async function fetchRemoteServerResponse() {
+  const url = new URL(
+    `${import.meta.env.VITE_REMOTE_SERVER_URL}/artist/${props.artist.remoteServerId}`
+  );
+  const response = await fetch(url.toString()).then((res) => res.json());
+  remoteServerResponse.value = response;
+}
+
+onMounted(async () => {
+  await fetchRemoteServerResponse();
+});
+</script>
+<style scoped>
+.artist-note {
+  color: var(--wac--color--gray);
+  padding-top: var(--wac--accessible-spacing--1x);
+  padding-bottom: var(--wac--accessible-spacing--1x);
+}
+</style>
diff --git a/front-end/src/components/ResourcePanel.vue b/front-end/src/components/ResourcePanel.vue
@@ -12,15 +12,17 @@
         />
         <h1>{{ props.resource.displayname ?? '' }}</h1>
       </div>
-
       <RouterLink :to="'/'" class="resource-detail-back-button">
         <button type="button" class="back-button">
           <ArrowLeftIcon class="back-button-icon" />
           BACK
         </button>
       </RouterLink>
     </div>
-
+    <ArtistNote
+      v-if="validateArtistSchema(props.resource.resource)"
+      :artist="props.resource.resource"
+    />
     <ResourceDetail>
       <template #items>
         <ArtworkDetailItem
@@ -89,14 +91,15 @@ import type {
   ImageTileData,
   Resource
 } from '@/types';
-import { validateArtworkSchema, PanelResourceEnum } from '@/types';
+import { validateArtworkSchema, PanelResourceEnum, validateArtistSchema } from '@/types';
 import { ArrowLeftIcon } from '@heroicons/vue/24/outline';
 import ResourceDetail from './ResourceDetail.vue';
 import ArtworkDetailItem from './ArtworkDetailItem.vue';
 import RelatedArtworkDetailItem from './RelatedArtworkDetailItem.vue';
 import MoreArtworksByArtist from './MoreArtworksByArtist.vue';
 import ArtworksIcon from './Icons/ArtworksIcon.vue';
 import ArtistsIcon from './Icons/ArtistsIcon.vue';
+import ArtistNote from './ArtistNote.vue';
 
 const props = defineProps<{
   resource: ApiResource;
diff --git a/front-end/src/types/Artist.ts b/front-end/src/types/Artist.ts
@@ -3,12 +3,14 @@ import ajv from '@/ajv';
 
 export interface Artist {
   Name: string;
+  remoteServerId?: string;
 }
 
 const ArtistSchema: JSONSchemaType<Artist> = {
   type: 'object',
   properties: {
-    Name: { type: 'string' }
+    Name: { type: 'string' },
+    remoteServerId: { type: 'string', nullable: true }
   },
   required: ['Name'],
   additionalProperties: true
diff --git a/front-end/src/types/RemoteServerResponse.ts b/front-end/src/types/RemoteServerResponse.ts
@@ -0,0 +1,29 @@
+import type { JSONSchemaType } from 'ajv';
+import ajv from '@/ajv';
+
+interface RemoteServerResponse {
+  arches_resource_id: string;
+  arches_tileid: string;
+  id: string;
+  name: string;
+  note: string;
+  url: string;
+}
+
+const RemoteServerResponseSchema: JSONSchemaType<RemoteServerResponse> = {
+  type: 'object',
+  properties: {
+    arches_resource_id: { type: 'string' },
+    arches_tileid: { type: 'string' },
+    id: { type: 'string' },
+    name: { type: 'string' },
+    note: { type: 'string' },
+    url: { type: 'string' }
+  },
+  required: ['arches_resource_id', 'arches_tileid', 'id', 'name', 'note', 'url'],
+  additionalProperties: true
+};
+
+const validateRemoteServerResponseSchema = ajv.compile(RemoteServerResponseSchema);
+
+export { type RemoteServerResponse, validateRemoteServerResponseSchema };
diff --git a/front-end/src/types/index.ts b/front-end/src/types/index.ts
@@ -7,6 +7,7 @@ export * from './ImageTileData';
 export * from './MapResource';
 export * from './Prefetch';
 export * from './Photographer';
+export * from './RemoteServerResponse';
 export * from './Resource';
 export * from './ResourceXResource';
 export * from './ApiResourceRelation';

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,11 @@`
`1`	`1`	`{`
`2`	`2`	`"index.html": {`
`3`		`- "file": "assets/index-DIt9QbVy.js",`
	`3`	`+ "file": "assets/index-CVuN95tD.js",`
`4`	`4`	`"name": "index",`
`5`	`5`	`"src": "index.html",`
`6`	`6`	`"isEntry": true,`
`7`	`7`	`"css": [`
`8`		`- "assets/index-BfOOURI1.css"`
	`8`	`+ "assets/index-Byc3Ge_L.css"`
`9`	`9`	`]`
`10`	`10`	`}`
`11`	`11`	`}`