From 556def1050b311a38d0098675d019a784798ea07 Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Fri, 17 Jan 2025 22:07:37 -0700
Subject: [PATCH] updates ResourceInstanceRelationships to derive types and
 resources from node configuration and database

---
 arches_lingo/src/arches_lingo/api.ts          |  27 +++
 .../components/generic/LabelEditor.vue        | 185 +++++----------
 .../components/generic/NoteEditor.vue         | 140 ++++--------
 .../generic/ResourceInstanceRelationships.vue |  18 +-
 .../ResourceInstanceRelationshipsEditor.vue   | 216 ++++++++++++++++--
 .../ResourceInstanceRelationshipsViewer.vue   |   2 +-
 .../scheme/report/SchemeStandard.vue          |  81 +------
 arches_lingo/src/arches_lingo/constants.ts    |   1 +
 arches_lingo/src/arches_lingo/types.ts        |  15 +-
 arches_lingo/urls.py                          |   6 +
 arches_lingo/views/api/relatable_resources.py |  56 +++++
 11 files changed, 432 insertions(+), 315 deletions(-)
 create mode 100644 arches_lingo/views/api/relatable_resources.py

diff --git a/arches_lingo/src/arches_lingo/api.ts b/arches_lingo/src/arches_lingo/api.ts
index 7b1d0224..1b68adb6 100644
--- a/arches_lingo/src/arches_lingo/api.ts
+++ b/arches_lingo/src/arches_lingo/api.ts
@@ -39,6 +39,20 @@ export const fetchUser = async () => {
     return parsed;
 };
 
+export const fetchRelatableResources = async (
+    graphSlug: string,
+    nodeAlias: string,
+    page: number,
+) => {
+    const response = await fetch(
+        `/api/graph/${graphSlug}/node/${nodeAlias}/relatable-resources?page=${page}`,
+    );
+
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
 export const fetchLingoResources = async (graphSlug: string) => {
     const response = await fetch(arches.urls.api_lingo_resources(graphSlug));
     const parsed = await response.json();
@@ -158,6 +172,19 @@ export const createScheme = async (newScheme: SchemeInstance) => {
     return parsed;
 };
 
+export const fetchRelatableResources = async (
+    graphSlug: string,
+    nodeAlias: string,
+) => {
+    const response = await fetch(
+        `/api/graph/${graphSlug}/node/${nodeAlias}/relatable-resources`,
+    );
+
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
 export const fetchSearchResults = async (
     searchTerm: string,
     items: number,
diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
index 2d45d281..a3d1d5b7 100644
--- a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref, toRaw, toRef, useId } from "vue";
+import { computed, onMounted, ref, toRaw, toRef, useId } from "vue";
 
 import Button from "primevue/button";
 import { useGettext } from "vue3-gettext";
@@ -19,30 +19,21 @@ import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedSt
 import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDatatype.vue";
 import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
 
-import {
-    EDIT,
-    ERROR,
-    NEW,
-    selectedLanguageKey,
-} from "@/arches_lingo/constants.ts";
+import { EDIT, ERROR, NEW } from "@/arches_lingo/constants.ts";
 
-import type { Ref } from "vue";
 import type {
     AppellativeStatus,
     ControlledListResult,
     ControlledListItem,
     ControlledListItemResult,
     ResourceInstanceReference,
-    ResourceInstanceResult,
     SchemeInstance,
 } from "@/arches_lingo/types.ts";
-import type { Language } from "@/arches_vue_utils/types.ts";
 
 const emit = defineEmits(["update"]);
 const toast = useToast();
 const route = useRoute();
 const router = useRouter();
-const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 const { $gettext } = useGettext();
 
 const props = withDefaults(
@@ -200,51 +191,9 @@ async function getControlledLists() {
     });
 }
 
-async function getResourceInstanceOptions(
-    fetchOptions: () => Promise<ResourceInstanceResult[]>,
-): Promise<ResourceInstanceReference[]> {
-    let options;
-    try {
-        options = await fetchOptions();
-    } catch (error) {
-        toast.add({
-            severity: ERROR,
-            summary: $gettext("Error"),
-            detail:
-                error instanceof Error
-                    ? error.message
-                    : $gettext("Could not fetch the resource instance options"),
-        });
-        return [];
-    }
-    const results = options.map((option: ResourceInstanceResult) => {
-        const result: ResourceInstanceReference = {
-            display_value: option.descriptors[selectedLanguage.value.code].name,
-            resourceId: option.resourceinstanceid,
-            ontologyProperty: "ac41d9be-79db-4256-b368-2f4559cfbe55",
-            inverseOntologyProperty: "ac41d9be-79db-4256-b368-2f4559cfbe55",
-        };
-        return result;
-    });
-    return results;
-}
-async function initializeSelectOptions() {
+onMounted(async () => {
     getControlledLists();
-    groupAndPersonOptions.value = await getResourceInstanceOptions(() =>
-        fetchLingoResources("group"),
-    );
-    groupAndPersonOptions.value = [
-        ...(groupAndPersonOptions.value || []),
-        ...(await getResourceInstanceOptions(() =>
-            fetchLingoResources("person"),
-        )),
-    ];
-    textualWorkOptions.value = await getResourceInstanceOptions(() =>
-        fetchLingoResources("textual_work"),
-    );
-}
-
-onMounted(initializeSelectOptions);
+});
 </script>
 
 <template>
@@ -253,10 +202,9 @@ onMounted(initializeSelectOptions);
         :value="formValue?.appellative_status_ascribed_name_content"
         :mode="EDIT"
         :pass-thru-id="labelId"
-        @update="
-            (val) =>
-                onUpdateString('appellative_status_ascribed_name_content', val)
-        "
+        @update="(val) =>
+            onUpdateString('appellative_status_ascribed_name_content', val)
+            "
     />
     <p :id="labelLanguageId">{{ $gettext("Label Language") }}</p>
     <ReferenceDatatype
@@ -265,13 +213,12 @@ onMounted(initializeSelectOptions);
         :multi-value="false"
         :options="languageOptions"
         :pt-aria-labeled-by="labelLanguageId"
-        @update="
-            (val) =>
-                onUpdateReferenceDatatype(
-                    'appellative_status_ascribed_name_language',
-                    val,
-                )
-        "
+        @update="(val) =>
+            onUpdateReferenceDatatype(
+                'appellative_status_ascribed_name_language',
+                val,
+            )
+            "
     />
     <p :id="labelTypeId">{{ $gettext("Label Type") }}</p>
     <ReferenceDatatype
@@ -280,13 +227,12 @@ onMounted(initializeSelectOptions);
         :multi-value="false"
         :options="typeOptions"
         :pt-aria-labeled-by="labelTypeId"
-        @update="
-            (val) =>
-                onUpdateReferenceDatatype(
-                    'appellative_status_ascribed_relation',
-                    val,
-                )
-        "
+        @update="(val) =>
+            onUpdateReferenceDatatype(
+                'appellative_status_ascribed_relation',
+                val,
+            )
+            "
     />
     <p :id="labelStatusId">{{ $gettext("Label Status") }}</p>
     <ReferenceDatatype
@@ -295,9 +241,8 @@ onMounted(initializeSelectOptions);
         :multi-value="false"
         :options="statusOptions"
         :pt-aria-labeled-by="labelStatusId"
-        @update="
-            (val) => onUpdateReferenceDatatype('appellative_status_status', val)
-        "
+        @update="(val) => onUpdateReferenceDatatype('appellative_status_status', val)
+            "
     />
     <p :id="labelMetatypeId">{{ $gettext("Label Metatype") }}</p>
     <ReferenceDatatype
@@ -306,69 +251,66 @@ onMounted(initializeSelectOptions);
         :multi-value="false"
         :options="metatypeOptions"
         :pt-aria-labeled-by="labelMetatypeId"
-        @update="
-            (val) =>
-                onUpdateReferenceDatatype(
-                    'appellative_status_status_metatype',
-                    val,
-                )
-        "
+        @update="(val) =>
+            onUpdateReferenceDatatype(
+                'appellative_status_status_metatype',
+                val,
+            )
+            "
     />
     <p :id="labelStartId">{{ $gettext("Label Temporal Validity Start") }}</p>
     <DateDatatype
         :value="formValue?.appellative_status_timespan_begin_of_the_begin"
         :mode="EDIT"
         :pt-aria-labeled-by="labelStartId"
-        @update="
-            (val) =>
-                onUpdateString(
-                    'appellative_status_timespan_begin_of_the_begin',
-                    val,
-                )
-        "
+        @update="(val) =>
+            onUpdateString(
+                'appellative_status_timespan_begin_of_the_begin',
+                val,
+            )
+            "
     />
     <p :id="labelEndId">{{ $gettext("Label Temporal Validity End") }}</p>
     <DateDatatype
         :value="formValue?.appellative_status_timespan_end_of_the_end"
         :mode="EDIT"
         :pt-aria-labeled-by="labelEndId"
-        @update="
-            (val) =>
-                onUpdateString(
-                    'appellative_status_timespan_end_of_the_end',
-                    val,
-                )
-        "
+        @update="(val) =>
+            onUpdateString(
+                'appellative_status_timespan_end_of_the_end',
+                val,
+            )
+            "
     />
     <p :id="labelContributorId">{{ $gettext("Contributor") }}</p>
     <ResourceInstanceRelationships
         :value="formValue?.appellative_status_data_assignment_actor"
         :mode="EDIT"
-        :options="groupAndPersonOptions"
         :pt-aria-labeled-by="labelContributorId"
-        @update="
-            (val) =>
-                onUpdateResourceInstance(
-                    'appellative_status_data_assignment_actor',
-                    val,
-                    groupAndPersonOptions ?? [],
-                )
-        "
+        graph-slug="scheme"
+        node-alias="appellative_status_data_assignment_actor"
+        @update="(val: string[]) =>
+            onUpdateResourceInstance(
+                'appellative_status_data_assignment_actor',
+                val,
+                groupAndPersonOptions ?? [],
+            )
+            "
     />
     <p :id="labelSourcesId">{{ $gettext("Sources") }}</p>
     <ResourceInstanceRelationships
         :value="formValue?.appellative_status_data_assignment_object_used"
         :mode="EDIT"
-        :options="textualWorkOptions"
+        graph-slug="scheme"
+        node-alias="appellative_status_data_assignment_object_used"
         :pt-aria-labeled-by="labelSourcesId"
-        @update="
-            (val) =>
-                onUpdateResourceInstance(
-                    'appellative_status_data_assignment_object_used',
-                    val,
-                    textualWorkOptions ?? [],
-                )
-        "
+        @update="(val: string[]) =>
+            onUpdateResourceInstance(
+                'appellative_status_data_assignment_object_used',
+                val,
+                textualWorkOptions ?? [],
+            )
+            "
     />
     <p :id="labelWarrantId">{{ $gettext("Warrant Type") }}</p>
     <ReferenceDatatype
@@ -377,13 +319,12 @@ onMounted(initializeSelectOptions);
         :multi-value="false"
         :options="eventTypeOptions"
         :pt-aria-labeled-by="labelWarrantId"
-        @update="
-            (val) =>
-                onUpdateReferenceDatatype(
-                    'appellative_status_data_assignment_type',
-                    val,
-                )
-        "
+        @update="(val) =>
+            onUpdateReferenceDatatype(
+                'appellative_status_data_assignment_type',
+                val,
+            )
+            "
     />
     <Button
         :label="$gettext('Update')"
diff --git a/arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue b/arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue
index e1838872..deb366ab 100644
--- a/arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/NoteEditor.vue
@@ -1,14 +1,5 @@
 <script setup lang="ts">
-import {
-    computed,
-    inject,
-    onMounted,
-    ref,
-    toRaw,
-    toRef,
-    useId,
-    type Ref,
-} from "vue";
+import { computed, onMounted, ref, toRaw, toRef, useId } from "vue";
 
 import Button from "primevue/button";
 import { useGettext } from "vue3-gettext";
@@ -26,29 +17,21 @@ import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedSt
 import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDatatype.vue";
 import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
 
-import {
-    EDIT,
-    ERROR,
-    NEW,
-    selectedLanguageKey,
-} from "@/arches_lingo/constants.ts";
+import { EDIT, ERROR, NEW } from "@/arches_lingo/constants.ts";
 
 import type {
     ControlledListItem,
     ControlledListItemResult,
     ControlledListResult,
     ResourceInstanceReference,
-    ResourceInstanceResult,
     SchemeInstance,
     SchemeStatement,
 } from "@/arches_lingo/types.ts";
-import type { Language } from "@/arches_vue_utils/types.ts";
 
 const emit = defineEmits(["update"]);
 const toast = useToast();
 const route = useRoute();
 const router = useRouter();
-const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 const { $gettext } = useGettext();
 
 const props = withDefaults(
@@ -204,36 +187,8 @@ async function save() {
     }
 }
 
-async function getResourceInstanceOptions(
-    fetchOptions: () => Promise<ResourceInstanceResult[]>,
-): Promise<ResourceInstanceReference[]> {
-    const options = await fetchOptions();
-    const results = options.map((option: ResourceInstanceResult) => {
-        const result: ResourceInstanceReference = {
-            display_value: option.descriptors[selectedLanguage.value.code].name,
-            resourceId: option.resourceinstanceid,
-            ontologyProperty: "ac41d9be-79db-4256-b368-2f4559cfbe55",
-            inverseOntologyProperty: "ac41d9be-79db-4256-b368-2f4559cfbe55",
-        };
-        return result;
-    });
-    return results;
-}
-
 async function initializeSelectOptions() {
     getControlledLists();
-    groupAndPersonOptions.value = await getResourceInstanceOptions(() =>
-        fetchLingoResources("group"),
-    );
-    groupAndPersonOptions.value = [
-        ...(groupAndPersonOptions.value || []),
-        ...(await getResourceInstanceOptions(() =>
-            fetchLingoResources("person"),
-        )),
-    ];
-    textualWorkOptions.value = await getResourceInstanceOptions(() =>
-        fetchLingoResources("textual_work"),
-    );
 }
 </script>
 
@@ -245,6 +200,7 @@ async function initializeSelectOptions() {
         :mode="EDIT"
         @update="(val) => onUpdateString('statement_content_n1', val)"
     />
+
     <!-- Statement Language: reference datatype -->
     <label :for="labelLanguageId">{{ $gettext("Statement Language") }}</label>
     <ReferenceDatatype
@@ -253,10 +209,10 @@ async function initializeSelectOptions() {
         :multi-value="false"
         :options="languageOptions"
         :pt-aria-labeled-by="labelLanguageId"
-        @update="
-            (val) => onUpdateReferenceDatatype('statement_language_n1', val)
-        "
+        @update="(val) => onUpdateReferenceDatatype('statement_language_n1', val)
+            "
     />
+
     <!-- Statement Type: reference datatype -->
     <label :for="labelTypeId">{{ $gettext("Statement Type") }}</label>
     <ReferenceDatatype
@@ -276,10 +232,9 @@ async function initializeSelectOptions() {
         :multi-value="false"
         :options="metatypeOptions"
         :pt-aria-labeled-by="labelMetatypeId"
-        @update="
-            (val) =>
-                onUpdateReferenceDatatype('statement_type_metatype_n1', val)
-        "
+        @update="(val) =>
+            onUpdateReferenceDatatype('statement_type_metatype_n1', val)
+            "
     />
 
     <!-- Statement Temporal Validity Start: date -->
@@ -287,18 +242,16 @@ async function initializeSelectOptions() {
         $gettext("Statement Temporal Validity Start")
     }}</label>
     <DateDatatype
-        :value="
-            formValue?.statement_data_assignment_timespan_begin_of_the_begin
-        "
+        :value="formValue?.statement_data_assignment_timespan_begin_of_the_begin
+            "
         :mode="EDIT"
         :pt-aria-labeled-by="labelStartId"
-        @update="
-            (val) =>
-                onUpdateString(
-                    'statement_data_assignment_timespan_begin_of_the_begin',
-                    val,
-                )
-        "
+        @update="(val) =>
+            onUpdateString(
+                'statement_data_assignment_timespan_begin_of_the_begin',
+                val,
+            )
+            "
     />
 
     <!-- Statement Temporal Validity End: date -->
@@ -309,13 +262,12 @@ async function initializeSelectOptions() {
         :value="formValue?.statement_data_assignment_timespan_end_of_the_end"
         :mode="EDIT"
         :pt-aria-labeled-by="labelEndId"
-        @update="
-            (val) =>
-                onUpdateString(
-                    'statement_data_assignment_timespan_end_of_the_end',
-                    val,
-                )
-        "
+        @update="(val) =>
+            onUpdateString(
+                'statement_data_assignment_timespan_end_of_the_end',
+                val,
+            )
+            "
     />
 
     <!-- Contributor: resource instance -->
@@ -323,33 +275,35 @@ async function initializeSelectOptions() {
     <ResourceInstanceRelationships
         :value="formValue?.statement_data_assignment_actor"
         :mode="EDIT"
-        :options="groupAndPersonOptions"
+        graph-slug="scheme"
+        node-alias="statement_data_assignment_actor"
         :pt-aria-labeled-by="labelContributorId"
-        @update="
-            (val) =>
-                onUpdateResourceInstance(
-                    'statement_data_assignment_actor',
-                    val,
-                    groupAndPersonOptions ?? [],
-                )
-        "
+        @updated="(val) =>
+            onUpdateResourceInstance(
+                'statement_data_assignment_actor',
+                val,
+                groupAndPersonOptions ?? [],
+            )
+            "
     />
+
     <!-- Sources: resource instance -->
     <label :for="labelSourcesId">{{ $gettext("Sources") }}</label>
     <ResourceInstanceRelationships
         :value="formValue?.statement_data_assignment_object_used"
         :mode="EDIT"
-        :options="textualWorkOptions"
+        graph-slug="scheme"
+        node-alias="statement_data_assignment_object_used"
         :pt-aria-labeled-by="labelSourcesId"
-        @update="
-            (val) =>
-                onUpdateResourceInstance(
-                    'statement_data_assignment_object_used',
-                    val,
-                    textualWorkOptions ?? [],
-                )
-        "
+        @updated="(val: string[]) =>
+            onUpdateResourceInstance(
+                'statement_data_assignment_object_used',
+                val,
+                textualWorkOptions ?? [],
+            )
+            "
     />
+
     <!-- Warrant Type: reference datatype -->
     <label :for="labelWarrantId">{{ $gettext("Warrant Type") }}</label>
     <ReferenceDatatype
@@ -358,11 +312,11 @@ async function initializeSelectOptions() {
         :multi-value="false"
         :options="eventTypeOptions"
         :pt-aria-labeled-by="labelWarrantId"
-        @update="
-            (val) =>
-                onUpdateReferenceDatatype('statement_data_assignment_type', val)
-        "
+        @updated="(val) =>
+            onUpdateReferenceDatatype('statement_data_assignment_type', val)
+            "
     />
+
     <Button
         :label="$gettext('Update')"
         @click="save"
diff --git a/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue b/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue
index d3443d6f..2c37724b 100644
--- a/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ResourceInstanceRelationshipsViewer from "@/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue";
 import ResourceInstanceRelationshipsEditor from "@/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue";
-import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
+import { EDIT, UPDATED, VIEW } from "@/arches_lingo/constants.ts";
 import type {
     DataComponentMode,
     ResourceInstanceReference,
@@ -10,28 +10,30 @@ import type {
 const { mode = VIEW } = defineProps<{
     mode?: DataComponentMode;
     value?: ResourceInstanceReference[];
-    options?: ResourceInstanceReference[];
+    graphSlug?: string;
+    nodeAlias?: string;
     ptAriaLabeledBy?: string;
 }>();
 
-const emits = defineEmits(["update"]);
+const emit = defineEmits([UPDATED]);
 
-function onUpdate(val: string[]) {
-    emits("update", val);
+function onUpdate(val: ResourceInstanceReference[]) {
+    emit(UPDATED, val);
 }
 </script>
 <template>
     <div v-if="mode === VIEW">
         <ResourceInstanceRelationshipsViewer :value="value" />
     </div>
-    <div v-if="mode === EDIT">
+    <div v-if="mode === EDIT && graphSlug && nodeAlias">
         <ResourceInstanceRelationshipsEditor
-            :options="options"
             :val="
                 value?.map((referenceValue) => referenceValue.resourceId) ?? []
             "
             :pt-aria-labeled-by="ptAriaLabeledBy"
-            @update="onUpdate"
+            :graph-slug="graphSlug"
+            :node-alias="nodeAlias"
+            @updated="onUpdate"
         />
     </div>
 </template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue b/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue
index 42d90a8a..f47d2c69 100644
--- a/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue
@@ -1,32 +1,90 @@
 <script setup lang="ts">
-import { computed, toRef, ref, watch } from "vue";
+import { computed, onMounted, ref, toRef, watch } from "vue";
 import MultiSelect from "primevue/multiselect";
-import type { ResourceInstanceReference } from "@/arches_lingo/types";
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+import type {
+    GraphInfo,
+    NewResourceInstance,
+    ResourceInstanceReference,
+    ResourceInstanceResult,
+} from "@/arches_lingo/types";
 import { useGettext } from "vue3-gettext";
+import { fetchRelatableResources } from "@/arches_lingo/api.ts";
+import {
+    UPDATED,
+    CREATE_NEW_RESOURCE,
+    ERROR,
+    DEFAULT_ERROR_TOAST_LIFE,
+} from "@/arches_lingo/constants.ts";
+import type { VirtualScrollerLazyEvent } from "primevue/virtualscroller";
+import { useToast } from "primevue/usetoast";
 
+const showNewResource = ref(false);
 const { $gettext } = useGettext();
+const toast = useToast();
 
-const props = withDefaults(
-    defineProps<{
-        val?: string[];
-        options?: ResourceInstanceReference[];
-        ptAriaLabeledBy?: string;
-    }>(),
-    {
-        options: () => [],
-    },
-);
+const {
+    val,
+    graphSlug,
+    nodeAlias,
+    ptAriaLabeledBy,
+    itemHeight = 38,
+    resultsPerPage = 25,
+} = defineProps<{
+    val?: string[];
+    graphSlug: string;
+    nodeAlias: string;
+    ptAriaLabeledBy?: string;
+    itemHeight?: number;
+    resultsPerPage?: number;
+}>();
+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 emit = defineEmits(["update"]);
+        const viewHeightInPixels = window.innerHeight * 0.6;
+        const viewHeightInRem = viewHeightInPixels / rootFontSize; // Convert 60vh to rem
 
-const valRef = toRef(props, "val");
+        if (computedHeightInRem > viewHeightInRem) {
+            computedResourceResultsHeight.value = "60vh";
+        } else {
+            computedResourceResultsHeight.value = `${computedHeightInRem}rem`;
+        }
+    } else {
+        computedResourceResultsHeight.value = "2.25rem";
+    }
+});
+
+onMounted(() => {
+    fetchData(1);
+});
+
+const emit = defineEmits([UPDATED, CREATE_NEW_RESOURCE]);
+
+const valRef = toRef(() => val);
 
 const value = computed({
     get() {
         return valRef.value;
     },
     set(value) {
-        emit("update", value);
+        const selected = options.value.filter((option) =>
+            value?.includes(option.resourceId),
+        );
+        emit(UPDATED, selected);
     },
 });
 
@@ -34,19 +92,139 @@ const primeVuePickerVal = ref(value.value);
 watch(primeVuePickerVal, (newVal) => {
     value.value = newVal;
 });
+
+async function fetchData(page: number) {
+    try {
+        const resourceData = await fetchRelatableResources(
+            graphSlug,
+            nodeAlias,
+            page,
+        );
+        const references = resourceData.data.map(
+            (
+                resourceRecord: ResourceInstanceResult,
+            ): ResourceInstanceReference => ({
+                displayValue: 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) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Failed to fetch data."),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+
+        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);
+}
 </script>
 <template>
     <MultiSelect
         v-model="primeVuePickerVal"
-        :show-toggle-all="!!options?.length"
+        :show-toggle-all="options?.length > 1"
         :options
-        option-label="display_value"
+        option-label="displayValue"
         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')"
-        :aria-labelledby="props.ptAriaLabeledBy"
-    />
+        :aria-labelledby="ptAriaLabeledBy"
+    >
+        <template #footer>
+            <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>
+        </template>
+    </MultiSelect>
+    <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>
 </template>
+<style lang="css" scoped>
+.relationship-footer-btn {
+    width: 100%;
+    border-radius: unset;
+}
+
+.resource-instance-relationships-selector {
+    max-width: 12rem;
+}
+</style>
diff --git a/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue b/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue
index f5757350..39297a89 100644
--- a/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue
@@ -17,7 +17,7 @@ withDefaults(defineProps<{ value?: ResourceInstanceReference[] }>(), {
             class="resource-instance-relationship-view"
         >
             <a :href="`${arches.urls.resource_editor}${val.resourceId}`">
-                {{ val.display_value }}
+                {{ val.displayValue }}
             </a>
         </span>
     </span>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue
index cf19a645..f175d803 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, onMounted, ref, type Ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useGettext } from "vue3-gettext";
 
@@ -15,7 +15,6 @@ import {
     updateLingoResource,
 } from "@/arches_lingo/api.ts";
 import {
-    selectedLanguageKey,
     VIEW,
     EDIT,
     OPEN_EDITOR,
@@ -34,10 +33,8 @@ import type {
 
 const toast = useToast();
 const schemeInstance = ref<SchemeInstance>({});
-const textualWorkOptions = ref<ResourceInstanceReference[]>();
 const route = useRoute();
 const router = useRouter();
-const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 const { $gettext } = useGettext();
 
 const { mode = VIEW } = defineProps<{
@@ -52,20 +49,6 @@ onMounted(async () => {
     getSectionValue();
 });
 
-async function getOptions(): Promise<ResourceInstanceReference[]> {
-    const options = await fetchLingoResources("textual_work");
-    const results = options.map((option: ResourceInstanceResult) => {
-        const result: ResourceInstanceReference = {
-            display_value: option.descriptors[selectedLanguage.value.code].name,
-            resourceId: option.resourceinstanceid,
-            ontologyProperty: "ac41d9be-79db-4256-b368-2f4559cfbe55",
-            inverseOntologyProperty: "ac41d9be-79db-4256-b368-2f4559cfbe55",
-        };
-        return result;
-    });
-    return results;
-}
-
 async function save() {
     try {
         let updated;
@@ -93,30 +76,7 @@ async function save() {
     }
 }
 
-async function getCachedOptions(): Promise<
-    ResourceInstanceReference[] | undefined
-> {
-    if (route.params.id === NEW) {
-        return;
-    }
-    try {
-        const options = textualWorkOptions.value || (await getOptions());
-        return options;
-    } catch (error) {
-        toast.add({
-            severity: ERROR,
-            summary: $gettext("Error"),
-            detail:
-                error instanceof Error
-                    ? error.message
-                    : $gettext("Could not fetch options for the standard"),
-        });
-    }
-}
-
-async function setSchemeInstance(
-    options: ResourceInstanceReference[] | undefined,
-) {
+async function setSchemeInstance() {
     try {
         const scheme = await fetchLingoResourcePartial(
             "scheme",
@@ -124,18 +84,6 @@ async function setSchemeInstance(
             "creation",
         );
 
-        const hydratedResults = options?.map((option) => {
-            const savedSource = scheme.creation?.creation_sources.find(
-                (source: ResourceInstanceReference) =>
-                    source.resourceId === option.resourceId,
-            );
-            if (savedSource) {
-                return savedSource;
-            } else {
-                return option;
-            }
-        });
-        textualWorkOptions.value = hydratedResults;
         schemeInstance.value = scheme;
     } catch (error) {
         toast.add({
@@ -150,24 +98,16 @@ async function setSchemeInstance(
 }
 
 async function getSectionValue() {
-    const options = await getCachedOptions();
-
-    if (options) {
-        setSchemeInstance(options);
-    }
+    setSchemeInstance();
 }
 
-function onCreationUpdate(val: string[]) {
+function onCreationUpdate(val: ResourceInstanceReference[]) {
     const schemeInstanceValue = schemeInstance.value!; // should never be null when updating
-    if (textualWorkOptions.value) {
-        const options = textualWorkOptions.value?.filter((option) =>
-            val.includes(option.resourceId),
-        );
-        if (!schemeInstanceValue?.creation) {
-            schemeInstanceValue.creation = { creation_sources: options };
-        } else {
-            schemeInstanceValue.creation.creation_sources = options;
-        }
+
+    if (!schemeInstanceValue?.creation) {
+        schemeInstanceValue.creation = { creation_sources: val };
+    } else {
+        schemeInstanceValue.creation.creation_sources = val;
     }
 }
 </script>
@@ -189,7 +129,8 @@ function onCreationUpdate(val: string[]) {
     <div v-if="mode === EDIT">
         <ResourceInstanceRelationships
             :value="schemeInstance?.creation?.creation_sources"
-            :options="textualWorkOptions"
+            graph-slug="scheme"
+            node-alias="creation_sources"
             :mode="EDIT"
             @update="onCreationUpdate"
         />
diff --git a/arches_lingo/src/arches_lingo/constants.ts b/arches_lingo/src/arches_lingo/constants.ts
index ad59090c..97ec71d6 100644
--- a/arches_lingo/src/arches_lingo/constants.ts
+++ b/arches_lingo/src/arches_lingo/constants.ts
@@ -9,6 +9,7 @@ export const CONTRAST = "contrast";
 export const EDIT = "edit";
 export const VIEW = "view";
 export const OPEN_EDITOR = "openEditor";
+export const CREATE_NEW_RESOURCE = "createNewResource";
 export const UPDATED = "updated";
 export const NEW = "new";
 export const MAXIMIZE = "maximize";
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
index 342c5117..d16fffa5 100644
--- a/arches_lingo/src/arches_lingo/types.ts
+++ b/arches_lingo/src/arches_lingo/types.ts
@@ -75,13 +75,24 @@ export interface ResourceInstanceReference {
     ontologyProperty: string;
     resourceXresourceId?: string;
     inverseOntologyProperty: string;
-    display_value?: string;
+    displayValue?: string;
+}
+
+export interface NewResourceInstance {
+    displayValue: string;
+    graphId: string;
 }
 
 export interface ResourceInstanceResult {
     resourceinstanceid: string;
-    descriptors: { [key: string]: { name: string } };
+    display_value: string;
+}
+
+export interface GraphInfo {
+    graphid: string;
+    name: string;
 }
+
 interface ControlledListItemValue {
     value: string;
 }
diff --git a/arches_lingo/urls.py b/arches_lingo/urls.py
index ab354963..a5a8be82 100644
--- a/arches_lingo/urls.py
+++ b/arches_lingo/urls.py
@@ -4,6 +4,7 @@
 from django.urls import include, path
 
 from arches_lingo.views.root import LingoRootView
+from arches_lingo.views.api.relatable_resources import RelatableResourcesView
 from arches_lingo.views.api.concepts import ConceptTreeView, ValueSearchView
 from arches_lingo.views.api.generic import (
     LingoResourceDetailView,
@@ -23,6 +24,11 @@
     path("concept/<uuid:id>", LingoRootView.as_view(), name="concept"),
     path("api/concept-tree", ConceptTreeView.as_view(), name="api-concepts"),
     path("api/search", ValueSearchView.as_view(), name="api-search"),
+    path(
+        "api/lingo/<slug:graph_slug>/node/<slug:node_alias>/relatable-resources",
+        RelatableResourcesView.as_view(),
+        name="api-node-relatable-resources",
+    ),
     path(
         "api/lingo/<slug:graph>",
         LingoResourceListCreateView.as_view(),
diff --git a/arches_lingo/views/api/relatable_resources.py b/arches_lingo/views/api/relatable_resources.py
new file mode 100644
index 00000000..ae1687a4
--- /dev/null
+++ b/arches_lingo/views/api/relatable_resources.py
@@ -0,0 +1,56 @@
+from django.core.paginator import Paginator
+from django.utils.decorators import method_decorator
+from arches.app.utils.decorators import group_required
+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 can_edit_resource_instance
+
+
+@method_decorator(can_edit_resource_instance, name="dispatch")
+class RelatableResourcesView(View):
+    def get(self, request, graph_slug, node_alias):
+        node = Node.objects.get(
+            name=node_alias,
+            graph__slug=graph_slug,
+            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,
+            }
+        )