From d8355e79a68d5d495e155936d08130450a89fc78 Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Fri, 14 Feb 2025 13:01:19 -0700
Subject: [PATCH 1/9] Working Resource Instance Select

---
 .../ResourceInstanceSelectWidget.vue          |  51 ++--
 .../ResourceInstanceSelectWidgetEditor.vue    | 247 ++++++++++++++++++
 .../ResourceInstanceSelectWidgetViewer.vue    |   7 +-
 .../src/arches_component_lab/widgets/api.ts   |  36 +++
 .../src/arches_component_lab/widgets/types.ts |  23 ++
 .../templates/arches_urls.htm                 |  13 +
 arches_component_lab/urls.py                  |  14 +-
 .../views/api/relatable_resources.py          |  54 ++++
 arches_component_lab/views/api/widgets.py     |  18 ++
 9 files changed, 441 insertions(+), 22 deletions(-)
 create mode 100644 arches_component_lab/templates/arches_urls.htm
 create mode 100644 arches_component_lab/views/api/relatable_resources.py
 create mode 100644 arches_component_lab/views/api/widgets.py

diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue
index 9e01c8b..d1c8e99 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue
@@ -1,28 +1,38 @@
 <script setup lang="ts">
-import { useTemplateRef } from "vue";
+import { onMounted, ref, useTemplateRef } from "vue";
 
 import ResourceInstanceSelectWidgetEditor from "@/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue";
 import ResourceInstanceSelectWidgetViewer from "@/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue";
-
+import { fetchWidgetConfiguration } from "@/arches_component_lab/widgets/api.ts";
 import { EDIT, VIEW } from "@/arches_component_lab/widgets/constants.ts";
-import type { WidgetMode } from "@/arches_component_lab/widgets/types.ts";
+import type { ResourceInstanceReference, WidgetMode } from "@/arches_component_lab/widgets/types.ts";
 
 const props = defineProps<{
     mode?: WidgetMode;
-    initialValue?: any[];
+    initialValue?: ResourceInstanceReference[];
     configuration: {
-        label: string;
-        placeholder: string;
         nodeAlias: string;
-        multiValue: boolean;
+        graphSlug: string;
+        createNew?: boolean; // option to create a new resource - only used in EDIT; default false/undefined
     };
 }>();
 
+const childConfiguration = ref();
+
 interface ChildComponentInterface {
     rawValue: any;
     isDirty: boolean;
 }
 
+onMounted(async () => {
+    const widgetConfig = await fetchWidgetConfiguration(props.configuration.graphSlug, props.configuration.nodeAlias);
+
+    childConfiguration.value = {
+        ...props.configuration,
+        ...widgetConfig
+    }
+});;
+
 const childRef = useTemplateRef<ChildComponentInterface>("childRef");
 
 defineExpose({
@@ -36,16 +46,21 @@ defineExpose({
 </script>
 
 <template>
-    <div v-if="mode === EDIT">
-        <ResourceInstanceSelectWidgetEditor
-            :initial-value="initialValue"
-            :configuration="configuration"
-        />
-    </div>
-    <div v-if="mode === VIEW">
-        <ResourceInstanceSelectWidgetViewer
-            :initial-value="initialValue"
-            :configuration="configuration"
-        />
+    <div v-if="childConfiguration">
+        <label>{{ childConfiguration?.label }}</label>
+        <div v-if="mode === EDIT">
+            <ResourceInstanceSelectWidgetEditor        
+                ref="childRef"
+                :initial-value="initialValue"
+                :configuration="childConfiguration"
+            />
+        </div>
+        <div v-if="mode === VIEW">
+            <ResourceInstanceSelectWidgetViewer       
+                ref="childRef"
+                :initial-value="initialValue"
+                :configuration="childConfiguration"
+            />
+        </div>
     </div>
 </template>
diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue
index e69de29..d5232f7 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue
@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, toRef, watch } from "vue";
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+import Message from "primevue/message";
+import Select from "primevue/select";
+import { useGettext } from "vue3-gettext";
+import { fetchRelatableResources } from "@/arches_component_lab/widgets/api.ts";
+import type { VirtualScrollerLazyEvent } from "primevue/virtualscroller";
+import type { GraphInfo, NewResourceInstance, ResourceInstanceReference, ResourceInstanceResult } from "@/arches_component_lab/widgets/types.ts";
+
+const showNewResource = ref(false);
+const message = ref<MessageData | undefined>();
+const { $gettext } = useGettext();
+const props = defineProps<{
+    initialValue?: ResourceInstanceReference[];
+    configuration?: {
+        graphSlug: string;
+        nodeAlias: string;
+        createNew?: boolean; // option to create a new resource; default false/undefined
+        ptAriaLabeledBy?: string;
+        itemHeight?: number;
+        resultsPerPage?: number;
+    }
+}>();
+
+const itemHeight = 38;
+const resultsPerPage = 25;
+
+interface MessageData {
+    severity: 'successs' | 'info' | 'warn' | 'error';
+    detail: string;
+}
+
+const rawValue = ref(props.initialValue?.[0]?.resourceId);
+
+const isDirty = computed(() => rawValue.value !== props.initialValue);
+
+const rawSelectedResources = computed({
+    get() {
+        return rawValue.value;
+    },
+    set(value) {
+        rawValue.value = options.value.find(option => option.resourceId == value)?.resourceId
+    }
+}
+);
+
+defineExpose({
+    rawValue,
+    isDirty,
+});
+
+
+const options = ref<ResourceInstanceReference[]>([]);
+const newElements = ref<NewResourceInstance[]>([]);
+const isLoading = ref(false);
+const isLoadingAdditionalResults = ref(false);
+const computedResourceResultsHeight = ref("");
+const resourceResultsPage = ref(1);
+const resourceResultsTotalCount = ref(resultsPerPage);
+watch(options, (resourceResults) => {
+    if (resourceResults?.length) {
+        const rootFontSize = parseFloat(
+            getComputedStyle(document.documentElement).fontSize,
+        );
+        const itemHeightInRem = itemHeight / rootFontSize; // Convert to rem based on the root font size
+        const computedHeightInRem = resourceResults.length * itemHeightInRem;
+
+        const viewHeightInPixels = window.innerHeight * 0.6;
+        const viewHeightInRem = viewHeightInPixels / rootFontSize; // Convert 60vh to rem
+
+        if (computedHeightInRem > viewHeightInRem) {
+            computedResourceResultsHeight.value = "60vh";
+        } else {
+            computedResourceResultsHeight.value = `${computedHeightInRem}rem`;
+        }
+    } else {
+        computedResourceResultsHeight.value = "2.25rem";
+    }
+});
+
+onMounted(() => {
+    console.log('here i am')
+    fetchData(1);
+});
+
+async function fetchData(page: number) {
+    if (props.configuration) {
+        try {
+            const resourceData = await fetchRelatableResources(
+                props.configuration.graphSlug,
+                props.configuration.nodeAlias,
+                page,
+            );
+            const references = resourceData.data.map(
+                (
+                    resourceRecord: ResourceInstanceResult,
+                ): ResourceInstanceReference => ({
+                    display_value: resourceRecord.display_value,
+                    resourceId: resourceRecord.resourceinstanceid,
+                    ontologyProperty: "",
+                    inverseOntologyProperty: "",
+                }),
+            );
+
+            if (page === 1) {
+                options.value = references;
+                newElements.value = resourceData.graphs.map(
+                    (graphInfo: GraphInfo): NewResourceInstance => ({
+                        displayValue: $gettext("Add a new %{graphName}", {
+                            graphName: graphInfo.name,
+                        }),
+                        graphId: graphInfo.graphid,
+                    }),
+                );
+            } else {
+                options.value = [...options.value, ...references];
+            }
+
+            resourceResultsPage.value = resourceData.current_page;
+            resourceResultsTotalCount.value = resourceData.total_results;
+        } catch (error) {
+            message.value = {
+                detail: `Failed to fetch data.  ${error instanceof Error ? error.message : undefined}`,
+                severity: "error",
+            }
+
+            options.value = [];
+            resourceResultsPage.value = 1;
+            resourceResultsTotalCount.value = 0;
+        } finally {
+            isLoading.value = false;
+            isLoadingAdditionalResults.value = false;
+        }
+    }
+}
+
+async function onLazyLoadResources(event: VirtualScrollerLazyEvent) {
+    if (
+        event.last >= resourceResultsPage.value * resultsPerPage &&
+        event.last <= resourceResultsTotalCount.value
+    ) {
+        isLoadingAdditionalResults.value = true;
+        const page = resourceResultsPage.value + 1;
+        fetchData(page);
+    }
+}
+
+function createNewResource(graphId: string) {
+    showNewResource.value = true;
+    console.log(graphId);
+}
+
+function toggleSelectAll() {
+    // check all selected then remove all selected items
+    if (this.$refs.selectAll.allSelected) {
+        this.selectedItems = [];
+        return;
+    }
+
+    // else add all items
+    this.selectAll = true;
+}
+</script>
+<template>  
+    <Select
+        v-model="rawSelectedResources"
+        :show-toggle-all="options?.length > 1"
+        :options
+        option-label="display_value"
+        option-value="resourceId"
+        class="resource-instance-relationships-selector"
+        :virtual-scroller-options="{
+            itemSize: itemHeight,
+            lazy: true,
+            onLazyLoad: onLazyLoadResources,
+            scrollHeight: computedResourceResultsHeight,
+            style: {
+                minHeight: computedResourceResultsHeight,
+                maxHeight: computedResourceResultsHeight,
+            },
+        }"
+        :pt="{
+            emptyMessage: { style: { fontFamily: 'sans-serif' } },
+            option: { style: { fontFamily: 'sans-serif' } },
+            overlay: { style: { fontFamily: 'sans-serif' } },
+        }"
+        :loading="isLoading && !isLoadingAdditionalResults"
+        :placeholder="$gettext('Select Resources')"
+    >
+        <template #header>
+            <div
+                v-if="options.length > 1"
+                class="select-all"
+                @click="toggleSelectAll"
+            >
+                {{ $gettext("Select All Items") }}
+            </div>
+        </template>
+        <template #footer>
+            <div v-if="props?.configuration?.createNew">
+                <div
+                    v-for="element in newElements"
+                    :key="`new-${element.graphId}`"
+                >
+                    <Button
+                        class="relationship-footer-btn"
+                        :label="element.displayValue"
+                        severity="secondary"
+                        variant="text"
+                        @click="() => createNewResource(element.graphId)"
+                    />
+                </div>
+            </div>
+        </template>
+    </Select>
+    <Dialog
+        v-model:visible="showNewResource"
+        :header="$gettext('New Resource')"
+        :dismissable-mask="true"
+        :close-on-escape="true"
+        :modal="true"
+        :pt="{
+            root: {
+                style: {
+                    borderRadius: '0',
+                    fontFamily: 'sans-serif',
+                },
+            },
+        }"
+    ></Dialog>
+    <Message v-if="message" :severity="message.severity">{{ message.detail }}</Message>
+</template>
+<style lang="css" scoped>
+.relationship-footer-btn {
+    width: 100%;
+    border-radius: unset;
+    justify-content: flex-start;
+}
+
+.select-all {
+    position: absolute;
+    top: 0.6rem;
+    left: 2.7rem;
+}
+</style>
\ No newline at end of file
diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue
index 5ba6c97..c3fe9bc 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import arches from "arches";
+import type { ResourceInstanceReference } from "@/arches_component_lab/widgets/types.ts";
 
 const props = defineProps<{
-    initialValue: string | undefined;
+    initialValue?: ResourceInstanceReference[];
     configuration: any;
 }>();
 </script>
 <template>
     <span>
-        <a :href="`${arches.urls.resource_editor}${val.resourceId}`">
-            {{ val.display_value }}
+        <a :href="`${arches.urls.resource_editor}${props.initialValue?.[0].resourceId}`">
+            {{ props.initialValue?.[0].display_value }}
         </a>
     </span>
 </template>
diff --git a/arches_component_lab/src/arches_component_lab/widgets/api.ts b/arches_component_lab/src/arches_component_lab/widgets/api.ts
index fbafb8c..e0646fc 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/api.ts
+++ b/arches_component_lab/src/arches_component_lab/widgets/api.ts
@@ -16,3 +16,39 @@ export const fetchLists = async (
         throw new Error((error as Error).message || response.statusText);
     }
 };
+
+export const fetchRelatableResources = async (
+    graphSlug: string,
+    nodeAlias: string,
+    page: number,
+) => {
+    const response = await fetch(
+        `${arches.urls.api_relatable_resources(
+            graphSlug,
+            nodeAlias,
+        )}?page=${page}`,
+    );
+
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
+export const fetchWidgetConfiguration = async (
+    graphSlug: string,
+    nodeAlias: string,
+) => {
+    const response = await fetch(
+        arches.urls.api_widget_configuration(graphSlug, nodeAlias),
+    );
+
+    try {
+        const parsed = await response.json();
+        if (response.ok) {
+            return parsed;
+        }
+        throw new Error(parsed.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
diff --git a/arches_component_lab/src/arches_component_lab/widgets/types.ts b/arches_component_lab/src/arches_component_lab/widgets/types.ts
index cf2b846..7009183 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/types.ts
+++ b/arches_component_lab/src/arches_component_lab/widgets/types.ts
@@ -1,3 +1,26 @@
 import { EDIT, VIEW } from "@/arches_component_lab/widgets/constants";
 
 export type WidgetMode = typeof EDIT | typeof VIEW;
+
+export interface GraphInfo {
+    graphid: string;
+    name: string;
+}
+
+export interface NewResourceInstance {
+    displayValue: string;
+    graphId: string;
+}
+
+export interface ResourceInstanceReference {
+    resourceId: string;
+    ontologyProperty: string;
+    resourceXresourceId?: string;
+    inverseOntologyProperty: string;
+    display_value?: string;
+}
+
+export interface ResourceInstanceResult {
+    resourceinstanceid: string;
+    display_value: string;
+}
diff --git a/arches_component_lab/templates/arches_urls.htm b/arches_component_lab/templates/arches_urls.htm
new file mode 100644
index 0000000..9519855
--- /dev/null
+++ b/arches_component_lab/templates/arches_urls.htm
@@ -0,0 +1,13 @@
+{% extends "arches_urls.htm" %}
+
+{% load static %}
+{% load l10n %}
+{% load i18n %}
+
+{% block arches_urls %}
+{{ block.super }}
+<div class="arches-urls"
+    api_relatable_resources='(graphSlug, nodeAlias) => {return "{% url "api-node-relatable-resources" "----p1" "----p2" %}".replace("----p1", graphSlug).replace("----p2", nodeAlias)}'
+    api_widget_configuration='(graph_slug, node_alias) => { return "{% url "api-widget-configuration" "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa" "bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb" %}".replace("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa", graph_slug).replace("bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb", node_alias)}'
+></div>
+{% endblock arches_urls %}
diff --git a/arches_component_lab/urls.py b/arches_component_lab/urls.py
index 4f9c69b..f479155 100644
--- a/arches_component_lab/urls.py
+++ b/arches_component_lab/urls.py
@@ -3,8 +3,20 @@
 from django.conf.urls.i18n import i18n_patterns
 from django.urls import include, path
 
+from arches_component_lab.views.api.relatable_resources import RelatableResourcesView
+from arches_component_lab.views.api.widgets import WidgetConfigurationView
+
 urlpatterns = [
-    # project-level urls
+    path(
+        "arches-component-lab/api/widget-configuration/<slug:graph>/<slug:node_alias>/relatable-resources",
+        RelatableResourcesView.as_view(),
+        name="api-node-relatable-resources",
+    ),
+    path(
+        "arches-component-lab/api/widget-configuration/<slug:graph_slug>/<slug:node_alias>",
+        WidgetConfigurationView.as_view(),
+        name="api-widget-configuration",
+    ),
 ]
 
 # Ensure Arches core urls are superseded by project-level urls
diff --git a/arches_component_lab/views/api/relatable_resources.py b/arches_component_lab/views/api/relatable_resources.py
new file mode 100644
index 0000000..daa7283
--- /dev/null
+++ b/arches_component_lab/views/api/relatable_resources.py
@@ -0,0 +1,54 @@
+from django.core.paginator import Paginator
+from django.utils.decorators import method_decorator
+from django.views import View
+from django.utils.translation import get_language
+from arches.app.models.models import Node, ResourceInstance, GraphModel
+from arches.app.utils.response import JSONResponse
+from arches.app.utils.betterJSONSerializer import JSONDeserializer
+
+from arches.app.utils.decorators import user_can_read_resource
+
+
+class RelatableResourcesView(View):
+    def get(self, request, graph, node_alias):
+        node = Node.objects.get(
+            name=node_alias,
+            graph__slug=graph,
+            graph__is_active=True,
+            graph__publication__isnull=False,
+        )
+        page_number = request.GET.get("page", 1)
+        items_per_page = request.GET.get("items", 25)
+
+        config = JSONDeserializer().deserialize(node.config.value)
+        graphs = [graph["graphid"] for graph in config.get("graphs", [])]
+
+        graph_models = GraphModel.objects.filter(graphid__in=graphs).values(
+            "name", "graphid"
+        )
+
+        resources = ResourceInstance.objects.filter(graph_id__in=graphs).order_by(
+            "descriptors__{}__name".format(get_language())
+        )
+
+        paginator = Paginator(resources, items_per_page)
+        page_object = paginator.get_page(page_number)
+        language = get_language()
+        data = [
+            {
+                "resourceinstanceid": resource.resourceinstanceid,
+                "display_value": resource.descriptors[language]["name"],
+            }
+            for resource in page_object
+        ]
+
+        return JSONResponse(
+            {
+                "graphs": graph_models,
+                "current_page": paginator.get_page(page_number).number,
+                "total_pages": paginator.num_pages,
+                "results_per_page": paginator.per_page,
+                "total_results": paginator.count,
+                "data": data,
+            }
+        )
diff --git a/arches_component_lab/views/api/widgets.py b/arches_component_lab/views/api/widgets.py
new file mode 100644
index 0000000..f5b491d
--- /dev/null
+++ b/arches_component_lab/views/api/widgets.py
@@ -0,0 +1,18 @@
+import json
+
+from django.views.generic import View
+
+from arches.app.models import models
+from arches.app.utils.response import JSONResponse
+
+
+class WidgetConfigurationView(View):
+    def get(self, request, graph_slug, node_alias):
+        card_x_node_x_widget = models.CardXNodeXWidget.objects.get(
+            node__graph__slug=graph_slug,
+            node__alias=node_alias,
+            node__source_identifier_id__isnull=True,
+        )
+        card_x_node_x_widget_config = json.loads(card_x_node_x_widget.config.value)
+
+        return JSONResponse(card_x_node_x_widget_config)

From 8719e377f98a5cb099c5c7654da02767221b021b Mon Sep 17 00:00:00 2001
From: Christopher Byrd <chrabyrd@gmail.com>
Date: Fri, 14 Feb 2025 15:40:30 -0800
Subject: [PATCH 2/9] merge

---
 .../ResourceInstanceSelectWidget.vue          | 20 +++++++----
 .../ResourceInstanceSelectWidgetEditor.vue    | 35 ++++++++++++-------
 .../ResourceInstanceSelectWidgetViewer.vue    |  4 ++-
 3 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue
index d1c8e99..41b1d40 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue
@@ -5,7 +5,10 @@ import ResourceInstanceSelectWidgetEditor from "@/arches_component_lab/widgets/R
 import ResourceInstanceSelectWidgetViewer from "@/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue";
 import { fetchWidgetConfiguration } from "@/arches_component_lab/widgets/api.ts";
 import { EDIT, VIEW } from "@/arches_component_lab/widgets/constants.ts";
-import type { ResourceInstanceReference, WidgetMode } from "@/arches_component_lab/widgets/types.ts";
+import type {
+    ResourceInstanceReference,
+    WidgetMode,
+} from "@/arches_component_lab/widgets/types.ts";
 
 const props = defineProps<{
     mode?: WidgetMode;
@@ -25,13 +28,16 @@ interface ChildComponentInterface {
 }
 
 onMounted(async () => {
-    const widgetConfig = await fetchWidgetConfiguration(props.configuration.graphSlug, props.configuration.nodeAlias);
+    const widgetConfig = await fetchWidgetConfiguration(
+        props.configuration.graphSlug,
+        props.configuration.nodeAlias,
+    );
 
     childConfiguration.value = {
         ...props.configuration,
-        ...widgetConfig
-    }
-});;
+        ...widgetConfig,
+    };
+});
 
 const childRef = useTemplateRef<ChildComponentInterface>("childRef");
 
@@ -49,14 +55,14 @@ defineExpose({
     <div v-if="childConfiguration">
         <label>{{ childConfiguration?.label }}</label>
         <div v-if="mode === EDIT">
-            <ResourceInstanceSelectWidgetEditor        
+            <ResourceInstanceSelectWidgetEditor
                 ref="childRef"
                 :initial-value="initialValue"
                 :configuration="childConfiguration"
             />
         </div>
         <div v-if="mode === VIEW">
-            <ResourceInstanceSelectWidgetViewer       
+            <ResourceInstanceSelectWidgetViewer
                 ref="childRef"
                 :initial-value="initialValue"
                 :configuration="childConfiguration"
diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue
index d5232f7..eca78b6 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue
@@ -7,7 +7,12 @@ import Select from "primevue/select";
 import { useGettext } from "vue3-gettext";
 import { fetchRelatableResources } from "@/arches_component_lab/widgets/api.ts";
 import type { VirtualScrollerLazyEvent } from "primevue/virtualscroller";
-import type { GraphInfo, NewResourceInstance, ResourceInstanceReference, ResourceInstanceResult } from "@/arches_component_lab/widgets/types.ts";
+import type {
+    GraphInfo,
+    NewResourceInstance,
+    ResourceInstanceReference,
+    ResourceInstanceResult,
+} from "@/arches_component_lab/widgets/types.ts";
 
 const showNewResource = ref(false);
 const message = ref<MessageData | undefined>();
@@ -21,14 +26,14 @@ const props = defineProps<{
         ptAriaLabeledBy?: string;
         itemHeight?: number;
         resultsPerPage?: number;
-    }
+    };
 }>();
 
 const itemHeight = 38;
 const resultsPerPage = 25;
 
 interface MessageData {
-    severity: 'successs' | 'info' | 'warn' | 'error';
+    severity: "successs" | "info" | "warn" | "error";
     detail: string;
 }
 
@@ -41,17 +46,17 @@ const rawSelectedResources = computed({
         return rawValue.value;
     },
     set(value) {
-        rawValue.value = options.value.find(option => option.resourceId == value)?.resourceId
-    }
-}
-);
+        rawValue.value = options.value.find(
+            (option) => option.resourceId == value,
+        )?.resourceId;
+    },
+});
 
 defineExpose({
     rawValue,
     isDirty,
 });
 
-
 const options = ref<ResourceInstanceReference[]>([]);
 const newElements = ref<NewResourceInstance[]>([]);
 const isLoading = ref(false);
@@ -81,7 +86,7 @@ watch(options, (resourceResults) => {
 });
 
 onMounted(() => {
-    console.log('here i am')
+    console.log("here i am");
     fetchData(1);
 });
 
@@ -124,7 +129,7 @@ async function fetchData(page: number) {
             message.value = {
                 detail: `Failed to fetch data.  ${error instanceof Error ? error.message : undefined}`,
                 severity: "error",
-            }
+            };
 
             options.value = [];
             resourceResultsPage.value = 1;
@@ -163,7 +168,7 @@ function toggleSelectAll() {
     this.selectAll = true;
 }
 </script>
-<template>  
+<template>
     <Select
         v-model="rawSelectedResources"
         :show-toggle-all="options?.length > 1"
@@ -230,7 +235,11 @@ function toggleSelectAll() {
             },
         }"
     ></Dialog>
-    <Message v-if="message" :severity="message.severity">{{ message.detail }}</Message>
+    <Message
+        v-if="message"
+        :severity="message.severity"
+        >{{ message.detail }}</Message
+    >
 </template>
 <style lang="css" scoped>
 .relationship-footer-btn {
@@ -244,4 +253,4 @@ function toggleSelectAll() {
     top: 0.6rem;
     left: 2.7rem;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue
index c3fe9bc..97d22ab 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue
@@ -9,7 +9,9 @@ const props = defineProps<{
 </script>
 <template>
     <span>
-        <a :href="`${arches.urls.resource_editor}${props.initialValue?.[0].resourceId}`">
+        <a
+            :href="`${arches.urls.resource_editor}${props.initialValue?.[0].resourceId}`"
+        >
             {{ props.initialValue?.[0].display_value }}
         </a>
     </span>

From 53c43f625f1fbe245d00cea66a33ae165628b8d6 Mon Sep 17 00:00:00 2001
From: Christopher Byrd <chrabyrd@gmail.com>
Date: Fri, 14 Feb 2025 15:41:56 -0800
Subject: [PATCH 3/9] nit

---
 .../src/arches_component_lab/widgets/api.ts   | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/arches_component_lab/src/arches_component_lab/widgets/api.ts b/arches_component_lab/src/arches_component_lab/widgets/api.ts
index e73a54c..79819d1 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/api.ts
+++ b/arches_component_lab/src/arches_component_lab/widgets/api.ts
@@ -52,22 +52,3 @@ export const fetchRelatableResources = async (
     if (!response.ok) throw new Error(parsed.message || response.statusText);
     return parsed;
 };
-
-export const fetchWidgetConfiguration = async (
-    graphSlug: string,
-    nodeAlias: string,
-) => {
-    const response = await fetch(
-        arches.urls.api_widget_configuration(graphSlug, nodeAlias),
-    );
-
-    try {
-        const parsed = await response.json();
-        if (response.ok) {
-            return parsed;
-        }
-        throw new Error(parsed.message);
-    } catch (error) {
-        throw new Error((error as Error).message || response.statusText);
-    }
-};

From 56f3e5ec72956a8dfc3cc55e25338a57d184eae5 Mon Sep 17 00:00:00 2001
From: Christopher Byrd <chrabyrd@gmail.com>
Date: Tue, 18 Feb 2025 10:46:28 -0800
Subject: [PATCH 4/9] updates resource-instance-select widget

---
 .../ResourceInstanceSelectWidget.vue          |  67 ++--
 .../ResourceInstanceSelectWidgetEditor.vue    | 377 ++++++++----------
 2 files changed, 193 insertions(+), 251 deletions(-)

diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue
index 41b1d40..bf4f8cc 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue
@@ -1,72 +1,61 @@
 <script setup lang="ts">
-import { onMounted, ref, useTemplateRef } from "vue";
+import { onMounted, ref } from "vue";
+
+import ProgressSpinner from "primevue/progressspinner";
 
 import ResourceInstanceSelectWidgetEditor from "@/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue";
 import ResourceInstanceSelectWidgetViewer from "@/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue";
+
 import { fetchWidgetConfiguration } from "@/arches_component_lab/widgets/api.ts";
 import { EDIT, VIEW } from "@/arches_component_lab/widgets/constants.ts";
+
 import type {
     ResourceInstanceReference,
     WidgetMode,
 } from "@/arches_component_lab/widgets/types.ts";
 
 const props = defineProps<{
-    mode?: WidgetMode;
-    initialValue?: ResourceInstanceReference[];
-    configuration: {
-        nodeAlias: string;
-        graphSlug: string;
-        createNew?: boolean; // option to create a new resource - only used in EDIT; default false/undefined
-    };
+    mode: WidgetMode;
+    initialValue: ResourceInstanceReference[];
+    nodeAlias: string;
+    graphSlug: string;
 }>();
 
-const childConfiguration = ref();
-
-interface ChildComponentInterface {
-    rawValue: any;
-    isDirty: boolean;
-}
+const isLoading = ref(true);
+const configuration = ref();
 
 onMounted(async () => {
-    const widgetConfig = await fetchWidgetConfiguration(
-        props.configuration.graphSlug,
-        props.configuration.nodeAlias,
+    configuration.value = await fetchWidgetConfiguration(
+        props.graphSlug,
+        props.nodeAlias,
     );
 
-    childConfiguration.value = {
-        ...props.configuration,
-        ...widgetConfig,
-    };
-});
-
-const childRef = useTemplateRef<ChildComponentInterface>("childRef");
-
-defineExpose({
-    get rawValue() {
-        return childRef.value?.rawValue;
-    },
-    get isDirty() {
-        return childRef.value?.isDirty;
-    },
+    isLoading.value = false;
 });
 </script>
 
 <template>
-    <div v-if="childConfiguration">
-        <label>{{ childConfiguration?.label }}</label>
+    <ProgressSpinner
+        v-if="isLoading"
+        style="width: 2em; height: 2em"
+    />
+
+    <template v-else>
+        <label>{{ configuration.label }}</label>
+
         <div v-if="mode === EDIT">
             <ResourceInstanceSelectWidgetEditor
-                ref="childRef"
                 :initial-value="initialValue"
-                :configuration="childConfiguration"
+                :configuration="configuration"
+                :node-alias="props.nodeAlias"
+                :graph-slug="props.graphSlug"
             />
         </div>
         <div v-if="mode === VIEW">
             <ResourceInstanceSelectWidgetViewer
-                ref="childRef"
                 :initial-value="initialValue"
-                :configuration="childConfiguration"
+                :configuration="configuration"
             />
         </div>
-    </div>
+    </template>
 </template>
diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue
index eca78b6..8c6b296 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue
@@ -1,256 +1,209 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, toRef, watch } from "vue";
-import Button from "primevue/button";
-import Dialog from "primevue/dialog";
-import Message from "primevue/message";
-import Select from "primevue/select";
+import { computed, ref, useTemplateRef, watch } from "vue";
+
 import { useGettext } from "vue3-gettext";
+
+import { FormField } from "@primevue/forms";
+import Message from "primevue/message";
+// import Select from "primevue/select";
+import MultiSelect from "primevue/multiselect";
+
 import { fetchRelatableResources } from "@/arches_component_lab/widgets/api.ts";
+
+import type { FormFieldResolverOptions } from "@primevue/forms";
 import type { VirtualScrollerLazyEvent } from "primevue/virtualscroller";
 import type {
-    GraphInfo,
-    NewResourceInstance,
     ResourceInstanceReference,
     ResourceInstanceResult,
 } from "@/arches_component_lab/widgets/types.ts";
 
-const showNewResource = ref(false);
-const message = ref<MessageData | undefined>();
-const { $gettext } = useGettext();
 const props = defineProps<{
-    initialValue?: ResourceInstanceReference[];
-    configuration?: {
-        graphSlug: string;
-        nodeAlias: string;
-        createNew?: boolean; // option to create a new resource; default false/undefined
-        ptAriaLabeledBy?: string;
-        itemHeight?: number;
-        resultsPerPage?: number;
-    };
+    initialValue: ResourceInstanceReference[];
+    graphSlug: string;
+    nodeAlias: string;
 }>();
 
-const itemHeight = 38;
-const resultsPerPage = 25;
+const { $gettext } = useGettext();
 
-interface MessageData {
-    severity: "successs" | "info" | "warn" | "error";
-    detail: string;
-}
+const itemSize = 36; // in future iteration this should be declared in the CardXNodeXWidget config
 
-const rawValue = ref(props.initialValue?.[0]?.resourceId);
+const options = ref<ResourceInstanceReference[]>(props.initialValue);
+const isLoading = ref(false);
+const resourceResultsPage = ref(0);
+const resourceResultsTotalCount = ref(0);
+const fetchError = ref<string | null>(null);
+
+const formFieldRef = useTemplateRef("formFieldRef");
+
+// this watcher is necessary to be able to format the value of the form field when the date picker is updated
+watch(
+    // @ts-expect-error - This is a bug in the PrimeVue types
+    () => formFieldRef.value?.field?.states?.value,
+    (newVal) => {
+        if (
+            newVal.length &&
+            newVal.every((item: string | object) => typeof item === "string")
+        ) {
+            // @ts-expect-error - This is a bug in the PrimeVue types
+            formFieldRef.value!.field.states.value = options.value.filter(
+                (option) => newVal?.includes(option.resourceId),
+            );
+        }
+    },
+);
 
-const isDirty = computed(() => rawValue.value !== props.initialValue);
+const resourceResultsCurrentCount = computed(() => options.value.length);
 
-const rawSelectedResources = computed({
-    get() {
-        return rawValue.value;
-    },
-    set(value) {
-        rawValue.value = options.value.find(
-            (option) => option.resourceId == value,
-        )?.resourceId;
-    },
-});
+async function fetchData(page: number) {
+    try {
+        isLoading.value = true;
 
-defineExpose({
-    rawValue,
-    isDirty,
-});
+        const resourceData = await fetchRelatableResources(
+            props.graphSlug,
+            props.nodeAlias,
+            page,
+        );
 
-const options = ref<ResourceInstanceReference[]>([]);
-const newElements = ref<NewResourceInstance[]>([]);
-const isLoading = ref(false);
-const isLoadingAdditionalResults = ref(false);
-const computedResourceResultsHeight = ref("");
-const resourceResultsPage = ref(1);
-const resourceResultsTotalCount = ref(resultsPerPage);
-watch(options, (resourceResults) => {
-    if (resourceResults?.length) {
-        const rootFontSize = parseFloat(
-            getComputedStyle(document.documentElement).fontSize,
+        const references = resourceData.data.map(
+            (
+                resourceRecord: ResourceInstanceResult,
+            ): ResourceInstanceReference => ({
+                display_value: resourceRecord.display_value,
+                resourceId: resourceRecord.resourceinstanceid,
+                ontologyProperty: "",
+                inverseOntologyProperty: "",
+            }),
         );
-        const itemHeightInRem = itemHeight / rootFontSize; // Convert to rem based on the root font size
-        const computedHeightInRem = resourceResults.length * itemHeightInRem;
 
-        const viewHeightInPixels = window.innerHeight * 0.6;
-        const viewHeightInRem = viewHeightInPixels / rootFontSize; // Convert 60vh to rem
+        options.value = [...options.value, ...references];
 
-        if (computedHeightInRem > viewHeightInRem) {
-            computedResourceResultsHeight.value = "60vh";
-        } else {
-            computedResourceResultsHeight.value = `${computedHeightInRem}rem`;
-        }
-    } else {
-        computedResourceResultsHeight.value = "2.25rem";
+        resourceResultsPage.value = resourceData.current_page;
+        resourceResultsTotalCount.value = resourceData.total_results;
+    } catch (error) {
+        fetchError.value = (error as Error).message;
+    } finally {
+        isLoading.value = false;
     }
-});
-
-onMounted(() => {
-    console.log("here i am");
-    fetchData(1);
-});
-
-async function fetchData(page: number) {
-    if (props.configuration) {
-        try {
-            const resourceData = await fetchRelatableResources(
-                props.configuration.graphSlug,
-                props.configuration.nodeAlias,
-                page,
-            );
-            const references = resourceData.data.map(
-                (
-                    resourceRecord: ResourceInstanceResult,
-                ): ResourceInstanceReference => ({
-                    display_value: resourceRecord.display_value,
-                    resourceId: resourceRecord.resourceinstanceid,
-                    ontologyProperty: "",
-                    inverseOntologyProperty: "",
-                }),
-            );
+}
 
-            if (page === 1) {
-                options.value = references;
-                newElements.value = resourceData.graphs.map(
-                    (graphInfo: GraphInfo): NewResourceInstance => ({
-                        displayValue: $gettext("Add a new %{graphName}", {
-                            graphName: graphInfo.name,
-                        }),
-                        graphId: graphInfo.graphid,
-                    }),
-                );
-            } else {
-                options.value = [...options.value, ...references];
-            }
+async function onLazyLoadResources(event?: VirtualScrollerLazyEvent) {
+    if (isLoading.value) {
+        return;
+    }
 
-            resourceResultsPage.value = resourceData.current_page;
-            resourceResultsTotalCount.value = resourceData.total_results;
-        } catch (error) {
-            message.value = {
-                detail: `Failed to fetch data.  ${error instanceof Error ? error.message : undefined}`,
-                severity: "error",
-            };
+    if (
+        // if we have already fetched all the resources
+        resourceResultsTotalCount.value > 0 &&
+        resourceResultsCurrentCount.value >= resourceResultsTotalCount.value
+    ) {
+        return;
+    }
 
-            options.value = [];
-            resourceResultsPage.value = 1;
-            resourceResultsTotalCount.value = 0;
-        } finally {
-            isLoading.value = false;
-            isLoadingAdditionalResults.value = false;
-        }
+    if (
+        // if the user has NOT scrolled to the end of the list
+        event &&
+        event.last < resourceResultsCurrentCount.value - 1
+    ) {
+        return;
     }
-}
 
-async function onLazyLoadResources(event: VirtualScrollerLazyEvent) {
     if (
-        event.last >= resourceResultsPage.value * resultsPerPage &&
-        event.last <= resourceResultsTotalCount.value
+        // if the dropdown is opened and we already have data
+        !event &&
+        resourceResultsCurrentCount.value > 0
     ) {
-        isLoadingAdditionalResults.value = true;
-        const page = resourceResultsPage.value + 1;
-        fetchData(page);
+        return;
     }
-}
 
-function createNewResource(graphId: string) {
-    showNewResource.value = true;
-    console.log(graphId);
+    await fetchData((resourceResultsPage.value || 0) + 1);
 }
 
-function toggleSelectAll() {
-    // check all selected then remove all selected items
-    if (this.$refs.selectAll.allSelected) {
-        this.selectedItems = [];
-        return;
-    }
+let timeout: ReturnType<typeof setTimeout>;
+
+function resolver(e: FormFieldResolverOptions) {
+    return new Promise((resolve) => {
+        if (timeout) clearTimeout(timeout);
+
+        timeout = setTimeout(() => {
+            resolve(validate(e));
+        }, 500);
+    });
+}
 
-    // else add all items
-    this.selectAll = true;
+ 
+function validate(e: FormFieldResolverOptions) {
+    console.log("validate", e);
+    // API call to validate the input
+    // if (true) {
+    //     return {};
+    // } else {
+    //     return {
+    //         errors: [
+    //             { message: "This is an error message" },
+    //             { message: "This is also an error message" },
+    //         ],
+    //     };
+    // }
 }
 </script>
+
 <template>
-    <Select
-        v-model="rawSelectedResources"
-        :show-toggle-all="options?.length > 1"
-        :options
-        option-label="display_value"
-        option-value="resourceId"
-        class="resource-instance-relationships-selector"
-        :virtual-scroller-options="{
-            itemSize: itemHeight,
-            lazy: true,
-            onLazyLoad: onLazyLoadResources,
-            scrollHeight: computedResourceResultsHeight,
-            style: {
-                minHeight: computedResourceResultsHeight,
-                maxHeight: computedResourceResultsHeight,
-            },
-        }"
-        :pt="{
-            emptyMessage: { style: { fontFamily: 'sans-serif' } },
-            option: { style: { fontFamily: 'sans-serif' } },
-            overlay: { style: { fontFamily: 'sans-serif' } },
-        }"
-        :loading="isLoading && !isLoadingAdditionalResults"
-        :placeholder="$gettext('Select Resources')"
-    >
-        <template #header>
-            <div
-                v-if="options.length > 1"
-                class="select-all"
-                @click="toggleSelectAll"
-            >
-                {{ $gettext("Select All Items") }}
-            </div>
-        </template>
-        <template #footer>
-            <div v-if="props?.configuration?.createNew">
-                <div
-                    v-for="element in newElements"
-                    :key="`new-${element.graphId}`"
-                >
-                    <Button
-                        class="relationship-footer-btn"
-                        :label="element.displayValue"
-                        severity="secondary"
-                        variant="text"
-                        @click="() => createNewResource(element.graphId)"
-                    />
-                </div>
-            </div>
-        </template>
-    </Select>
-    <Dialog
-        v-model:visible="showNewResource"
-        :header="$gettext('New Resource')"
-        :dismissable-mask="true"
-        :close-on-escape="true"
-        :modal="true"
-        :pt="{
-            root: {
-                style: {
-                    borderRadius: '0',
-                    fontFamily: 'sans-serif',
-                },
-            },
-        }"
-    ></Dialog>
     <Message
-        v-if="message"
-        :severity="message.severity"
-        >{{ message.detail }}</Message
+        v-if="fetchError"
+        severity="error"
     >
+        {{ fetchError }}
+    </Message>
+    <FormField
+        v-else
+        ref="formFieldRef"
+        v-slot="$field"
+        :name="props.nodeAlias"
+        :initial-value="
+            props.initialValue.map((resource) => resource.resourceId)
+        "
+        :resolver="resolver"
+    >
+        <MultiSelect
+            class="resource-instance-multiselect-widget"
+            display="chip"
+            option-label="display_value"
+            option-value="resourceId"
+            :fluid="true"
+            :loading="isLoading"
+            :options
+            :placeholder="$gettext('Select Resources')"
+            :virtual-scroller-options="{
+                itemSize: itemSize,
+                lazy: true,
+                loading: isLoading,
+                onLazyLoad: onLazyLoadResources,
+            }"
+            @before-show="onLazyLoadResources"
+        />
+        <Message
+            v-for="error in $field.errors"
+            :key="error.message"
+            severity="error"
+            size="small"
+        >
+            {{ error.message }}
+        </Message>
+    </FormField>
 </template>
-<style lang="css" scoped>
-.relationship-footer-btn {
-    width: 100%;
-    border-radius: unset;
-    justify-content: flex-start;
+<style>
+.resource-instance-multiselect-widget .p-multiselect-label {
+    visibility: visible !important;
+    display: grid !important;
+}
+
+.resource-instance-multiselect-widget .p-multiselect-chip {
+    display: grid !important;
+    grid-template-columns: 1fr auto;
 }
 
-.select-all {
-    position: absolute;
-    top: 0.6rem;
-    left: 2.7rem;
+.resource-instance-multiselect-widget .p-chip-label {
+    max-width: min-content;
+    white-space: normal;
 }
 </style>

From a57ab6000ff6e5e40bada8ae4e0691ad1ce855cb Mon Sep 17 00:00:00 2001
From: Christopher Byrd <chrabyrd@gmail.com>
Date: Tue, 18 Feb 2025 11:02:41 -0800
Subject: [PATCH 5/9] rename

---
 .../ResourceInstanceMultiSelectWidget.vue}                       | 0
 .../components/ResourceInstanceMultiSelectWidgetEditor.vue}      | 1 -
 .../components/ResourceInstanceMultiSelectWidgetViewer.vue}      | 0
 3 files changed, 1 deletion(-)
 rename arches_component_lab/src/arches_component_lab/widgets/{ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue => ResourceInstanceMultiSelectWidget/ResourceInstanceMultiSelectWidget.vue} (100%)
 rename arches_component_lab/src/arches_component_lab/widgets/{ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue => ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue} (99%)
 rename arches_component_lab/src/arches_component_lab/widgets/{ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue => ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetViewer.vue} (100%)

diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/ResourceInstanceMultiSelectWidget.vue
similarity index 100%
rename from arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/ResourceInstanceSelectWidget.vue
rename to arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/ResourceInstanceMultiSelectWidget.vue
diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue
similarity index 99%
rename from arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue
rename to arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue
index 8c6b296..a1cc3a0 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue
@@ -130,7 +130,6 @@ function resolver(e: FormFieldResolverOptions) {
     });
 }
 
- 
 function validate(e: FormFieldResolverOptions) {
     console.log("validate", e);
     // API call to validate the input
diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetViewer.vue
similarity index 100%
rename from arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue
rename to arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetViewer.vue

From 6385a4f16f21fcbe2259db562a35fda6f7f3b933 Mon Sep 17 00:00:00 2001
From: Christopher Byrd <chrabyrd@gmail.com>
Date: Tue, 18 Feb 2025 11:23:33 -0800
Subject: [PATCH 6/9] nit

---
 .../ResourceInstanceMultiSelectWidget.vue                 | 8 ++++----
 arches_component_lab/templates/arches_urls.htm            | 4 ++--
 arches_component_lab/urls.py                              | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/ResourceInstanceMultiSelectWidget.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/ResourceInstanceMultiSelectWidget.vue
index bf4f8cc..112b464 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/ResourceInstanceMultiSelectWidget.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/ResourceInstanceMultiSelectWidget.vue
@@ -3,8 +3,8 @@ import { onMounted, ref } from "vue";
 
 import ProgressSpinner from "primevue/progressspinner";
 
-import ResourceInstanceSelectWidgetEditor from "@/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetEditor.vue";
-import ResourceInstanceSelectWidgetViewer from "@/arches_component_lab/widgets/ResourceInstanceSelectWidget/components/ResourceInstanceSelectWidgetViewer.vue";
+import ResourceInstanceMultiSelectWidgetEditor from "@/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue";
+import ResourceInstanceMultiSelectWidgetViewer from "@/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetViewer.vue";
 
 import { fetchWidgetConfiguration } from "@/arches_component_lab/widgets/api.ts";
 import { EDIT, VIEW } from "@/arches_component_lab/widgets/constants.ts";
@@ -44,7 +44,7 @@ onMounted(async () => {
         <label>{{ configuration.label }}</label>
 
         <div v-if="mode === EDIT">
-            <ResourceInstanceSelectWidgetEditor
+            <ResourceInstanceMultiSelectWidgetEditor
                 :initial-value="initialValue"
                 :configuration="configuration"
                 :node-alias="props.nodeAlias"
@@ -52,7 +52,7 @@ onMounted(async () => {
             />
         </div>
         <div v-if="mode === VIEW">
-            <ResourceInstanceSelectWidgetViewer
+            <ResourceInstanceMultiSelectWidgetViewer
                 :initial-value="initialValue"
                 :configuration="configuration"
             />
diff --git a/arches_component_lab/templates/arches_urls.htm b/arches_component_lab/templates/arches_urls.htm
index 9519855..01d3458 100644
--- a/arches_component_lab/templates/arches_urls.htm
+++ b/arches_component_lab/templates/arches_urls.htm
@@ -7,7 +7,7 @@
 {% block arches_urls %}
 {{ block.super }}
 <div class="arches-urls"
-    api_relatable_resources='(graphSlug, nodeAlias) => {return "{% url "api-node-relatable-resources" "----p1" "----p2" %}".replace("----p1", graphSlug).replace("----p2", nodeAlias)}'
-    api_widget_configuration='(graph_slug, node_alias) => { return "{% url "api-widget-configuration" "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa" "bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb" %}".replace("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa", graph_slug).replace("bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb", node_alias)}'
+    api_relatable_resources='(graph_slug, node_alias) => {return "{% url "api-relatable-resources" "----p1" "----p2" %}".replace("----p1", graph_slug).replace("----p2", node_alias)}'
+    api_widget_configuration='(graph_slug, node_alias) => {return "{% url "api-widget-configuration" "----p1" "----p2" %}".replace("----p1", graph_slug).replace("----p2", node_alias)}'
 ></div>
 {% endblock arches_urls %}
diff --git a/arches_component_lab/urls.py b/arches_component_lab/urls.py
index f479155..20fd0ea 100644
--- a/arches_component_lab/urls.py
+++ b/arches_component_lab/urls.py
@@ -8,9 +8,9 @@
 
 urlpatterns = [
     path(
-        "arches-component-lab/api/widget-configuration/<slug:graph>/<slug:node_alias>/relatable-resources",
+        "arches-component-lab/api/relatable-resources/<slug:graph>/<slug:node_alias>",
         RelatableResourcesView.as_view(),
-        name="api-node-relatable-resources",
+        name="api-relatable-resources",
     ),
     path(
         "arches-component-lab/api/widget-configuration/<slug:graph_slug>/<slug:node_alias>",

From d4779a8a90134c832a82167bada53d2164c54b95 Mon Sep 17 00:00:00 2001
From: Christopher Byrd <chrabyrd@gmail.com>
Date: Tue, 18 Feb 2025 12:53:50 -0800
Subject: [PATCH 7/9] nit

---
 .../components/ResourceInstanceMultiSelectWidgetEditor.vue  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue
index a1cc3a0..b6b6ee2 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue
@@ -87,9 +87,7 @@ async function fetchData(page: number) {
 }
 
 async function onLazyLoadResources(event?: VirtualScrollerLazyEvent) {
-    if (isLoading.value) {
-        return;
-    }
+    if (isLoading.value) { return; }
 
     if (
         // if we have already fetched all the resources
@@ -129,7 +127,7 @@ function resolver(e: FormFieldResolverOptions) {
         }, 500);
     });
 }
-
+ 
 function validate(e: FormFieldResolverOptions) {
     console.log("validate", e);
     // API call to validate the input

From bad3e2eb1742fa97e75827d699b00548d7b99fda Mon Sep 17 00:00:00 2001
From: Christopher Byrd <chrabyrd@gmail.com>
Date: Tue, 18 Feb 2025 16:06:56 -0800
Subject: [PATCH 8/9] nit

---
 .../ReferenceSelectWidget.vue                 | 47 ----------
 .../ReferenceSelectWidgetEditor.vue           | 87 -------------------
 .../ReferenceSelectWidgetViewer.vue           |  6 --
 ...esourceInstanceMultiSelectWidgetEditor.vue | 11 +--
 arches_component_lab/views/api/widgets.py     | 14 +++
 5 files changed, 20 insertions(+), 145 deletions(-)
 delete mode 100644 arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/ReferenceSelectWidget.vue
 delete mode 100644 arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/components/ReferenceSelectWidgetEditor.vue
 delete mode 100644 arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/components/ReferenceSelectWidgetViewer.vue

diff --git a/arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/ReferenceSelectWidget.vue b/arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/ReferenceSelectWidget.vue
deleted file mode 100644
index 0b0f93c..0000000
--- a/arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/ReferenceSelectWidget.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { useTemplateRef } from "vue";
-
-import ReferenceSelectWidgetEditor from "@/arches_component_lab/widgets/ReferenceSelectWidget/components/ReferenceSelectWidgetEditor.vue";
-import ReferenceSelectWidgetViewer from "@/arches_component_lab/widgets/ReferenceSelectWidget/components/ReferenceSelectWidgetViewer.vue";
-
-import { EDIT, VIEW } from "@/arches_component_lab/widgets/constants.ts";
-import type { WidgetMode } from "@/arches_component_lab/widgets/types.ts";
-
-const props = defineProps<{
-    mode?: WidgetMode;
-    initialValue?: any[];
-    configuration: {
-        label: string;
-        placeholder: string;
-        nodeAlias: string;
-        multiValue: boolean;
-    };
-}>();
-
-interface ChildComponentInterface {
-    rawValue: any;
-    isDirty: boolean;
-}
-
-const childRef = useTemplateRef<ChildComponentInterface>("childRef");
-
-defineExpose({
-    get rawValue() {
-        return childRef.value?.rawValue;
-    },
-    get isDirty() {
-        return childRef.value?.isDirty;
-    },
-});
-</script>
-
-<template>
-    <label>{{ props.configuration.label }}</label>
-
-    <ReferenceSelectWidgetEditor
-        v-if="props.mode === EDIT"
-        ref="childRef"
-        :initial-value="initialValue"
-        :configuration="props.configuration"
-    />
-</template>
diff --git a/arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/components/ReferenceSelectWidgetEditor.vue b/arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/components/ReferenceSelectWidgetEditor.vue
deleted file mode 100644
index 93ceffd..0000000
--- a/arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/components/ReferenceSelectWidgetEditor.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
-
-import Select from "primevue/select";
-
-import { fetchLists } from "@/arches_component_lab/widgets/api.ts";
-
-const props = defineProps<{
-    initialValue: any;
-    configuration: any;
-}>();
-
-const rawValue = ref(props.initialValue[0].uri);
-const isDirty = computed(() => rawValue.value !== props.initialValue[0].uri);
-
-const options = ref([]);
-
-defineExpose({
-    rawValue,
-    isDirty,
-});
-
-onMounted(async () => {
-    options.value = await getOptions();
-});
-
-// THE API THIS FUNCTION INTERACTS WITH SHOULD BE UPDATED
-// TO PROVIDE THE MOST SIMPLE LIST OF CONTROLLED LIST OPTIONS
-async function getOptions() {
-    let fetchedLists;
-    try {
-        fetchedLists = await fetchLists([props.configuration.nodeAlias]);
-    } catch (error) {
-        // NO TOAST! INSTEAD RENDER ERROR MESSAGE COMPONENT
-        // NO GETTEXT! SHOULD JUST RENDER SERVER RESPONSE
-        // toast.add({
-        //     severity: "error",
-        //     summary: $gettext("Error"),
-        //     detail:
-        //         error instanceof Error
-        //             ? error.message
-        //             : $gettext("Could not fetch the controlled list options"),
-        // });
-        // return [];
-    }
-
-    console.log(fetchedLists);
-    const controlledList = fetchedLists.controlled_lists[0];
-
-    return controlledList.items.map((item) => ({
-        list_id: item.list_id,
-        uri: item.uri,
-        labels: item.values,
-    }));
-}
-
-function extractURI(item: ControlledListItem[]): string | string[] {
-    if (item && !props.multiValue) {
-        return item[0]?.uri;
-    } else if (item && props.multiValue) {
-        return item.map((item) => item.uri);
-    } else {
-        return [];
-    }
-}
-
-// THIS SHOULD NOT EXIST, THE API SHOULD RETURN A MORE SIMPLIFIED RESPONSE
-function getOptionLabels(item: ControlledListItem): string {
-    const prefLabels = item.labels.filter(
-        (label) => label.valuetype_id === "prefLabel",
-    );
-    const optionLabel =
-        prefLabels.find((label) => label.language_id === "en") || prefLabels[0];
-    return optionLabel?.value ?? "";
-}
-</script>
-
-<template>
-    <Select
-        v-model="rawValue"
-        style="display: flex"
-        option-value="uri"
-        :options="options"
-        :option-label="getOptionLabels"
-        :placeholder="configuration.placeholder"
-    />
-</template>
diff --git a/arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/components/ReferenceSelectWidgetViewer.vue b/arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/components/ReferenceSelectWidgetViewer.vue
deleted file mode 100644
index a2cedc4..0000000
--- a/arches_component_lab/src/arches_component_lab/widgets/ReferenceSelectWidget/components/ReferenceSelectWidgetViewer.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<script setup lang="ts">
-// TODO
-</script>
-<template>
-    <!-- TODO -->
-</template>
diff --git a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue
index b6b6ee2..a91e22a 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/ResourceInstanceMultiSelectWidget/components/ResourceInstanceMultiSelectWidgetEditor.vue
@@ -5,7 +5,6 @@ import { useGettext } from "vue3-gettext";
 
 import { FormField } from "@primevue/forms";
 import Message from "primevue/message";
-// import Select from "primevue/select";
 import MultiSelect from "primevue/multiselect";
 
 import { fetchRelatableResources } from "@/arches_component_lab/widgets/api.ts";
@@ -54,7 +53,7 @@ watch(
 
 const resourceResultsCurrentCount = computed(() => options.value.length);
 
-async function fetchData(page: number) {
+async function getOptions(page: number) {
     try {
         isLoading.value = true;
 
@@ -87,7 +86,9 @@ async function fetchData(page: number) {
 }
 
 async function onLazyLoadResources(event?: VirtualScrollerLazyEvent) {
-    if (isLoading.value) { return; }
+    if (isLoading.value) {
+        return;
+    }
 
     if (
         // if we have already fetched all the resources
@@ -113,7 +114,7 @@ async function onLazyLoadResources(event?: VirtualScrollerLazyEvent) {
         return;
     }
 
-    await fetchData((resourceResultsPage.value || 0) + 1);
+    await getOptions((resourceResultsPage.value || 0) + 1);
 }
 
 let timeout: ReturnType<typeof setTimeout>;
@@ -127,7 +128,7 @@ function resolver(e: FormFieldResolverOptions) {
         }, 500);
     });
 }
- 
+
 function validate(e: FormFieldResolverOptions) {
     console.log("validate", e);
     // API call to validate the input
diff --git a/arches_component_lab/views/api/widgets.py b/arches_component_lab/views/api/widgets.py
index 3059852..a1c6c4a 100644
--- a/arches_component_lab/views/api/widgets.py
+++ b/arches_component_lab/views/api/widgets.py
@@ -1,5 +1,6 @@
 import json
 
+from django.utils import translation
 from django.views.generic import View
 
 from arches.app.models import models
@@ -8,6 +9,8 @@
 
 class WidgetConfigurationView(View):
     def get(self, request, graph_slug, node_alias):
+        user_language = translation.get_language()
+
         node = models.Node.objects.get(
             graph__slug=graph_slug, alias=node_alias, source_identifier_id__isnull=True
         )
@@ -33,4 +36,15 @@ def get(self, request, graph_slug, node_alias):
                 **card_x_node_x_widget_config,
             }
 
+        if "i18n_properties" in response and isinstance(
+            response["i18n_properties"], list
+        ):
+            for prop in response["i18n_properties"]:
+                if (
+                    prop in response
+                    and isinstance(response[prop], dict)
+                    and user_language in response[prop]
+                ):
+                    response[prop] = response[prop][user_language]
+
         return JSONResponse(response)

From 06563a88c6884ec8eef172ffd8a56d9f9502981e Mon Sep 17 00:00:00 2001
From: Christopher Byrd <chrabyrd@gmail.com>
Date: Wed, 19 Feb 2025 09:24:06 -0800
Subject: [PATCH 9/9] updates NonLocalizedStringWidget

---
 .../NonLocalizedStringWidget.vue              | 53 +++++++++++++------
 .../NonLocalizedStringWidgetEditor.vue        |  9 ++--
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/arches_component_lab/src/arches_component_lab/widgets/NonLocalizedStringWidget/NonLocalizedStringWidget.vue b/arches_component_lab/src/arches_component_lab/widgets/NonLocalizedStringWidget/NonLocalizedStringWidget.vue
index f7a02fe..7595ae7 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/NonLocalizedStringWidget/NonLocalizedStringWidget.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/NonLocalizedStringWidget/NonLocalizedStringWidget.vue
@@ -1,31 +1,54 @@
 <script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+import ProgressSpinner from "primevue/progressspinner";
+
 import NonLocalizedStringWidgetEditor from "@/arches_component_lab/widgets/NonLocalizedStringWidget/components/NonLocalizedStringWidgetEditor.vue";
 import NonLocalizedStringWidgetViewer from "@/arches_component_lab/widgets/NonLocalizedStringWidget/components/NonLocalizedStringWidgetViewer.vue";
 
 import { EDIT, VIEW } from "@/arches_component_lab/widgets/constants.ts";
+import { fetchWidgetConfiguration } from "@/arches_component_lab/widgets/api.ts";
+
 import type { WidgetMode } from "@/arches_component_lab/widgets/types.ts";
 
 const props = defineProps<{
-    configuration: {
-        label: string;
-        graphSlug: string;
-        nodeAlias: string;
-    };
+    graphSlug: string;
+    nodeAlias: string;
     initialValue: string | undefined;
     mode: WidgetMode;
 }>();
+
+const isLoading = ref(true);
+const configuration = ref();
+
+onMounted(async () => {
+    configuration.value = await fetchWidgetConfiguration(
+        props.graphSlug,
+        props.nodeAlias,
+    );
+
+    isLoading.value = false;
+});
 </script>
 
 <template>
-    <label>{{ configuration.label }}</label>
-
-    <NonLocalizedStringWidgetEditor
-        v-if="props.mode === EDIT"
-        :initial-value="props.initialValue"
-        :configuration="props.configuration"
-    />
-    <NonLocalizedStringWidgetViewer
-        v-else-if="props.mode === VIEW"
-        :value="props.initialValue"
+    <ProgressSpinner
+        v-if="isLoading"
+        style="width: 2em; height: 2em"
     />
+    <template v-else>
+        <label>{{ configuration.label }}</label>
+
+        <NonLocalizedStringWidgetEditor
+            v-if="props.mode === EDIT"
+            :initial-value="initialValue"
+            :graph-slug="props.graphSlug"
+            :node-alias="props.nodeAlias"
+            :configuration="configuration"
+        />
+        <NonLocalizedStringWidgetViewer
+            v-else-if="props.mode === VIEW"
+            :value="props.initialValue"
+        />
+    </template>
 </template>
diff --git a/arches_component_lab/src/arches_component_lab/widgets/NonLocalizedStringWidget/components/NonLocalizedStringWidgetEditor.vue b/arches_component_lab/src/arches_component_lab/widgets/NonLocalizedStringWidget/components/NonLocalizedStringWidgetEditor.vue
index abe580f..608d36c 100644
--- a/arches_component_lab/src/arches_component_lab/widgets/NonLocalizedStringWidget/components/NonLocalizedStringWidgetEditor.vue
+++ b/arches_component_lab/src/arches_component_lab/widgets/NonLocalizedStringWidget/components/NonLocalizedStringWidgetEditor.vue
@@ -6,10 +6,9 @@ import { FormField, type FormFieldResolverOptions } from "@primevue/forms";
 
 const props = defineProps<{
     initialValue: string | undefined;
-    configuration: {
-        nodeAlias: string;
-        graphSlug: string;
-    };
+    nodeAlias: string;
+    graphSlug: string;
+    configuration: any;
 }>();
 
 let timeout: ReturnType<typeof setTimeout>;
@@ -43,7 +42,7 @@ function validate(e: FormFieldResolverOptions) {
 <template>
     <FormField
         v-slot="$field"
-        :name="props.configuration.nodeAlias"
+        :name="props.nodeAlias"
         :initial-value="props.initialValue"
         :resolver="resolver"
     >