Update resource models and reference data

afrc/src/afrc/Search/SearchPage.vue

@@ -12,6 +12,7 @@ import arches from "arches";
 
 import SimpleSearchFilter from "@/afrc/Search/components/SimpleSearchFilter.vue";
 import SearchResultItem from "@/afrc/Search/components/SearchResultItem.vue";
+import SearchItemDetails from "@/afrc/Search/components/SearchItemDetails.vue";
 import InteractiveMap from "@/afrc/Search/components/InteractiveMap/InteractiveMap.vue";
 import { fetchMapData } from "@/afrc/Search/api.ts";
 import type { GenericObject } from "@/afrc/Search/types";
@@ -21,6 +22,7 @@ let query = getQueryObject(null);
 let queryString = ref(JSON.stringify(query));
 let searchResults = ref([]);
 let resultsCount = ref("calculating...");
+let resultSelected = ref("");
 const showMap = ref(false);
 const basemaps: Ref<Basemap[]> = ref([]);
 const overlays: Ref<MapLayer[]> = ref([]);
@@ -31,6 +33,7 @@ const toast = useToast();
 const { $gettext } = useGettext();
 
 provide("resultsSelected", resultsSelected);
+provide("resultSelected", resultSelected);
 
 watch(queryString, () => {
     doQuery();
@@ -181,7 +184,11 @@ onMounted(async () => {
                     />
                 </div>
             </section>
-
+            <section
+                v-if="dataLoaded && resultSelected"
+            >
+                <SearchItemDetails :instanceId="resultSelected"/>
+            </section>
             <div
                 v-if="showMap && dataLoaded"
                 style="width: 100%; height: 100%"
@@ -191,6 +198,7 @@ onMounted(async () => {
                     :overlays="overlays"
                     :sources="sources"
                     :include-drawer="false"
+                    :popup-enabled="false"
                 />
             </div>
 
@@ -260,6 +268,7 @@ section.afrc-search-results-panel {
     flex-grow: 1;
     margin: 15px;
     overflow-y: auto;
+    min-width: 350px;
 }
 .search-result-list {
     display: flex;

afrc/src/afrc/Search/api.ts

@@ -60,5 +60,15 @@ export const createRequest = (url: string) => {
     };
 };
 
+export const fetchResourceData = (resourceId: string) => {
+    const url = `${arches.urls["api_resources"](resourceId)}?format=json&v=beta`;
+    return createRequest(url)();
+};
+
+export const fetchImageData = (imageResourceIds: string[]) => { 
+    const url = `${arches.urls["api-file-data"]}?resourceids=${imageResourceIds.join(",")}`;
+    return createRequest(url)();
+};
+
 export const fetchSettings = createRequest(arches.urls["api-settings"]);
 export const fetchMapData = createRequest(arches.urls["api-map-data"]);

afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue

@@ -33,6 +33,7 @@ const props = defineProps<{
     basemaps: Basemap[];
     sources: MapSource[];
     includeDrawer: boolean;
+    popupEnabled: boolean;
 }>();
 
 const map: Ref<Map | null> = ref(null);
@@ -116,6 +117,7 @@ function updateSelectedDrawnFeature(feature: Feature) {
             :overlays="overlays"
             :sources="sources"
             :is-drawing-enabled="true"
+            :is-popup-enabled="popupEnabled"
             @map-initialized="
                 (mapInstance) => {
                     map = mapInstance;

afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue

@@ -66,6 +66,7 @@ interface Props {
     isDrawingEnabled?: boolean;
     drawnFeatures?: Feature[];
     drawnFeaturesBuffer?: Buffer;
+    isPopupEnabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -76,6 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
     isDrawingEnabled: false,
     drawnFeatures: () => [],
     drawnFeaturesBuffer: undefined,
+    isPopupEnabled: false,
 });
 
 const {
@@ -86,9 +88,11 @@ const {
     isDrawingEnabled,
     drawnFeatures,
     drawnFeaturesBuffer,
+    isPopupEnabled,
 } = props;
 
 let resultsSelected = inject("resultsSelected") as Ref<string[]>;
+let resultSelected = inject("resultSelected") as Ref<string>;
 
 const emits = defineEmits([
     "mapInitialized",
@@ -143,15 +147,17 @@ watch(
     },
 );
 
-watch(clickedFeatures, () => {
-    if (popupInstance.value) {
-        popupInstance.value.remove();
-    }
-    popupInstance.value = new maplibregl.Popup()
-        .setLngLat(clickedCoordinates.value)
-        .setDOMContent(popupContainer.value!.$el)
-        .addTo(map.value!);
-});
+if (isPopupEnabled) {
+    watch(clickedFeatures, () => {
+        if (popupInstance.value) {
+            popupInstance.value.remove();
+        }
+        popupInstance.value = new maplibregl.Popup()
+            .setLngLat(clickedCoordinates.value)
+            .setDOMContent(popupContainer.value!.$el)
+            .addTo(map.value!);
+    });
+}
 
 onMounted(() => {
     createMap();
@@ -386,15 +392,18 @@ function addOverlayToMap(overlay: MapLayer) {
                 clickedCoordinates.value = [e.lngLat.lng, e.lngLat.lat];
                 clickedFeatures.value = features;
                 resultsSelected.value = [];
+                resultSelected.value = "";
                 const uniqueResourceIds = new Set(
                     features.map(
                         (feature) =>
                             feature.properties?.resourceinstanceid as string,
                     ),
                 );
                 resultsSelected.value = Array.from(uniqueResourceIds);
+                resultSelected.value = resultsSelected.value[0];
             } else {
                 resultsSelected.value = [];
+                resultSelected.value = "";
             }
         };
 

afrc/src/afrc/Search/components/SearchItemDetails.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { onMounted, inject, ref, watch } from "vue";
+import type { GenericObject, Acquisition } from "@/afrc/Search/types";
+import { fetchResourceData, fetchImageData } from "@/afrc/Search/api.ts";
+import type { Ref } from "vue";
+import Button from "primevue/button";
+import Carousel from 'primevue/carousel';
+
+const resultSelected = inject("resultSelected") as Ref<string>;
+const resultsSelected = inject("resultsSelected") as Ref<string[]>;
+
+let displayname: Ref<string> = ref("");
+let displaydescription: Ref<string> = ref("");
+let images: Ref<string[]> = ref([]);
+let acquisitions: Ref<Acquisition[]> = ref([]);
+let identifier: Ref<string> = ref("");
+
+onMounted(async () => {
+    getData();
+});
+
+watch(resultSelected, () => {
+    getData();
+});
+
+async function getData() {
+    let imageData: string[] = [];
+    const resp = await fetchResourceData(resultSelected.value);
+    const imageResourceids = resp.resource["Digital Reference"]?.map((tile: { [key: string]: any; }) => tile["Digital Source"]["resourceId"]);
+    const accessionNumber = resp.resource['Identifier']?.find((x: {[key: string]: any;}) => x["Identifier_type"]["@display_value"]==="Accession Number")
+
+    acquisitions.value = resp.resource["Addition to Collection"]?.map((x: { [key: string]: any; }) => (
+        {
+            "person": x["Addition to Collection_carried out by"]["@display_value"],
+            "date": x["Addition to Collection_time"]["Addition to Collection_time_begin of the begin"]["@display_value"],
+            "details": x["Addition to Collection_Statement"]?.map((y: {[key: string]: any;}) => (y["Addition to Collection_Statement_content"]["@display_value"])).join(" ")
+        }));
+    displayname.value = resp.displayname;
+    displaydescription.value = resp.displaydescription;
+    identifier.value = accessionNumber ? accessionNumber["Identifier_content"]["@display_value"] : ""
+
+    if (imageResourceids) {
+        imageData = await fetchImageData(imageResourceids);
+        images.value = imageData;
+    } else {
+        images.value = [];
+    }
+}
+
+function clearResult() {
+    resultSelected.value = "";
+    resultsSelected.value = [];
+}
+
+</script>
+
+<template>
+    <div class="search-item-details">
+        <div class="title">
+            <div style='display:flex; flex-direction: column; padding: 3px'>
+                <div>
+                {{ displayname || "No name provided" }}
+                </div>
+                <div style="font-size: 0.7em; color: steelblue; font-style: italic; font-weight: 400;">
+                    {{ identifier }}
+                </div>
+            </div>
+            <div>
+            <Button
+                label="Close"
+                severity="secondary"
+                icon="pi pi-times-circle"
+                icon-pos="top"
+                text
+                size="large"
+                @click="clearResult()"
+            />
+            </div>
+        </div>
+        <div class="description">
+            <div v-if="displaydescription && displaydescription != 'Undefined'">{{ displaydescription }}</div>
+            <div v-else>No description provided</div> 
+        </div>
+        <div class="images" v-if="images.length">
+        <Carousel :value="images" :numVisible="2" :numScroll="1" containerClass="flex items-center">
+            <template #item="image">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2  p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <div style="padding: 3px">
+                            <img :src="image.data" height="120px" width="120px" class="w-full rounded" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Carousel>
+        </div>
+        <div class="resource-details"  style="color: grey">
+            <div class="value-header">Material Information</div>
+            <div class="value-entry">Chemical (CAS) Number:<span class="resource-details-value">1309-36-0</span></div>
+            <div class="value-entry">Chemical Formula:<span class="resource-details-value">FeS2</span></div>
+            <div class="value-entry">Chemical Name:<span class="resource-details-value">Iron Disulfide</span></div>
+            <div class="value-entry">Common Name:<span class="resource-details-value">Pyrite, Fool's Gold</span></div>
+        </div>
+        <div class="resource-details" v-if="acquisitions">
+            <div class="value-header">Acquisition Information</div>
+            <div v-for="acquisition in acquisitions">
+                <div class="value-entry">Acquired by:<span class="resource-details-value">{{ acquisition.person }}</span></div>
+                <div class="value-entry">Acquired on:<span class="resource-details-value">{{ acquisition.date }}</span></div>
+                <div class="value-entry">Acquisition Details:<span class="resource-details-value">{{ acquisition.details }}</span></div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<style scoped>
+    .search-item-details {
+        display: flex;
+        flex-direction: column;
+        padding: 5px;
+        border-right: #ddd solid 1px;
+        border-left: solid #ddd 1px;
+        width: 375px;
+        height: 100%;
+        background-color: #fff;
+    }
+    .title {
+        display: flex;
+        font-size: 1.2em;
+        font-weight: bold;
+        margin-bottom: 5px;
+        justify-content: space-between;
+        border-bottom: #ddd solid 1px;
+    }
+    .description {
+        font-size: 1em;
+        margin-bottom: 15px;
+        padding: 10px;
+    }
+    .resource-details {
+        padding: 10px;
+    }
+    .value-header {
+        color: steelblue;
+        font-size: 1.1em;
+        font-weight: bold;
+    }
+    .value-entry {
+        font-size: 1.0em;
+        padding: 0px 3px;
+    }
+    .resource-details-value {
+        color: steelblue;
+        padding: 0px 3px;
+    }
+</style>

afrc/src/afrc/Search/components/SearchResultItem.vue

@@ -7,6 +7,7 @@ import Button from "primevue/button";
 import arches from "arches";
 
 const resultsSelected = inject("resultsSelected") as Ref<string[]>;
+const resultSelected = inject("resultSelected") as Ref<string>;
 
 const props = defineProps({
     searchResult: {
@@ -15,13 +16,17 @@ const props = defineProps({
     },
 });
 
+function highlightResult(resourceid: string) {
+    if (!resultSelected.value) {
+        resultsSelected.value = [resourceid];
+    }
+}
+
 function selectResult(resourceid: string) {
+    resultSelected.value = resourceid;
     resultsSelected.value = [resourceid];
 }
 
-function clearResult() {
-    resultsSelected.value = [];
-}
 </script>
 
 <template>
@@ -32,8 +37,7 @@ function clearResult() {
                 searchResult._source.resourceinstanceid,
             ),
         }"
-        @mouseenter="selectResult(searchResult._source.resourceinstanceid)"
-        @mouseleave="clearResult"
+        @mouseenter="highlightResult(searchResult._source.resourceinstanceid)"
     >
         <div class="image-placeholder">
             <img src="https://picsum.photos/160" />
@@ -55,6 +59,7 @@ function clearResult() {
                     severity="secondary"
                     text
                     size="large"
+                    @click="selectResult(searchResult._source.resourceinstanceid)"
                 />
                 <Button
                     label="edit"
@@ -64,7 +69,7 @@ function clearResult() {
                     target="_blank"
                     size="large"
                     icon="pi pi-pen-to-square"
-                    :href="'./' + arches.urls.resource + '/' + searchResult._id"
+                    :href="arches.urls.resource + '/' + searchResult._id"
                 />
             </div>
         </div>