Integrate hierarchy view into schemes list placeholder #18, add concept and scheme routing #15

.github/workflows/main.yml

@@ -63,7 +63,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        python-version: ["3.11", "3.12"]
+        python-version: ["3.11", "3.12", "3.13"]
 
     steps:
       - uses: actions/checkout@v4

CHANGELOG.md

@@ -10,9 +10,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 -   Add login interface [#13](https://github.com/archesproject/arches-lingo/issues/13)
 -   Add front-end router [#11](https://github.com/archesproject/arches-lingo/issues/11)
+-   Add concept and scheme serializers [#103](https://github.com/archesproject/arches-lingo/issues/103)
 -   Add backend for search [#67](https://github.com/archesproject/arches-lingo/issues/67)
+-   Add concept and scheme pages [#15](https://github.com/archesproject/arches-lingo/issues/15)
+-   Add concept hierarchy component [#18](https://github.com/archesproject/arches-lingo/issues/18)
 
 ### Fixed
+-   Merge language finder implementations [#92](https://github.com/archesproject/arches-lingo/issues/92)
 
 ### Deprecated
 

arches_lingo/migrations/0002_load_lingo_lists.py

@@ -1,8 +1,9 @@
 import io
 import os
 
-from django.db import migrations
 from django.core import management
+from django.db import migrations
+
 from arches_lingo.settings import APP_ROOT
 
 

arches_lingo/serializers.py

@@ -0,0 +1,34 @@
+from arches.app.models.models import ResourceInstance, TileModel
+from arches.app.models.serializers import ArchesModelSerializer, ArchesTileSerializer
+
+
+class SchemeStatementSerializer(ArchesTileSerializer):
+    class Meta:
+        model = TileModel
+        graph_slug = "scheme"
+        root_node = "statement"
+        fields = "__all__"
+
+
+class SchemeSerializer(ArchesModelSerializer):
+    class Meta:
+        model = ResourceInstance
+        graph_slug = "scheme"
+        nodegroups = "__all__"
+        fields = "__all__"
+
+
+class ConceptStatementSerializer(ArchesTileSerializer):
+    class Meta:
+        model = TileModel
+        graph_slug = "concept"
+        root_node = "statement"
+        fields = "__all__"
+
+
+class ConceptSerializer(ArchesModelSerializer):
+    class Meta:
+        model = ResourceInstance
+        graph_slug = "concept"
+        nodegroups = "__all__"
+        fields = "__all__"

arches_lingo/settings.py

@@ -2,10 +2,7 @@
 Django settings for arches_lingo project.
 """
 
-import json
 import os
-import sys
-import arches
 import inspect
 import semantic_version
 from datetime import datetime, timedelta
@@ -249,6 +246,7 @@ def get_optional_env_variable(var_name, default=None) -> str:
     "guardian",
     "captcha",
     "revproxy",
+    "rest_framework",
     "corsheaders",
     "oauth2_provider",
     "django_celery_results",

arches_lingo/src/arches_lingo/App.vue

@@ -9,24 +9,34 @@ import { useToast } from "primevue/usetoast";
 import {
     ANONYMOUS,
     DEFAULT_ERROR_TOAST_LIFE,
+    ENGLISH,
     ERROR,
     USER_KEY,
+    selectedLanguageKey,
+    systemLanguageKey,
 } from "@/arches_lingo/constants.ts";
 
 import { routeNames } from "@/arches_lingo/routes.ts";
 import { fetchUser } from "@/arches_lingo/api.ts";
-
-import type { User } from "@/arches_lingo/types.ts";
-
+import HierarchySplitter from "@/arches_lingo/components/tree/HierarchySplitter.vue";
 import PageHeader from "@/arches_lingo/components/header/PageHeader.vue";
 import SideNav from "@/arches_lingo/components/sidenav/SideNav.vue";
 
+import type { Ref } from "vue";
+import type { Language } from "@/arches_vue_utils/types";
+import type { User } from "@/arches_lingo/types";
+
 const user = ref<User | null>(null);
 const setUser = (userToSet: User | null) => {
     user.value = userToSet;
 };
 provide(USER_KEY, { user, setUser });
 
+const selectedLanguage: Ref<Language> = ref(ENGLISH);
+provide(selectedLanguageKey, selectedLanguage);
+const systemLanguage = ENGLISH; // TODO: get from settings
+provide(systemLanguageKey, systemLanguage);
+
 const router = useRouter();
 const route = useRoute();
 const toast = useToast();
@@ -64,8 +74,9 @@ router.beforeEach(async (to, _from, next) => {
         <PageHeader v-if="route.meta.shouldShowNavigation" />
         <div style="display: flex; flex: auto; flex-direction: row">
             <SideNav v-if="route.meta.shouldShowNavigation" />
-            <div style="margin: 1rem; flex: auto">
-                <RouterView />
+            <div style="flex: auto">
+                <HierarchySplitter v-if="route.meta.shouldShowHierarchy" />
+                <RouterView v-else />
             </div>
         </div>
     </main>

arches_lingo/src/arches_lingo/api.ts

@@ -15,44 +15,26 @@ export const login = async (username: string, password: string) => {
         headers: { "X-CSRFTOKEN": getToken() },
         body: JSON.stringify({ username, password }),
     });
-    try {
-        const responseJson = await response.json();
-        if (response.ok) {
-            return responseJson;
-        }
-        throw new Error(responseJson.message);
-    } catch (error) {
-        throw new Error((error as Error).message || response.statusText);
-    }
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
 };
 
 export const logout = async () => {
     const response = await fetch(arches.urls.api_logout, {
         method: "POST",
         headers: { "X-CSRFTOKEN": getToken() },
     });
-    if (response.ok) {
-        return true;
-    }
-    try {
-        const error = await response.json();
-        throw new Error(error.message);
-    } catch (error) {
-        throw new Error((error as Error).message || response.statusText);
-    }
+    if (response.ok) return true;
+    const parsedError = await response.json();
+    throw new Error(parsedError.message || response.statusText);
 };
 
 export const fetchUser = async () => {
     const response = await fetch(arches.urls.api_user);
-    try {
-        const responseJson = await response.json();
-        if (response.ok) {
-            return responseJson;
-        }
-        throw new Error(responseJson.message);
-    } catch (error) {
-        throw new Error((error as Error).message || response.statusText);
-    }
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
 };
 
 export const fetchSearchResults = async (
@@ -67,15 +49,15 @@ export const fetchSearchResults = async (
     });
 
     const url = `${arches.urls.api_search}?${params.toString()}`;
-
     const response = await fetch(url);
-    try {
-        const responseJson = await response.json();
-        if (response.ok) {
-            return responseJson;
-        }
-        throw new Error(responseJson.message);
-    } catch (error) {
-        throw new Error((error as Error).message || response.statusText);
-    }
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
+export const fetchConcepts = async () => {
+    const response = await fetch(arches.urls.api_concepts);
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
 };

arches_lingo/src/arches_lingo/components/basic-search/BasicSearch.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { nextTick, ref, watch, onMounted } from "vue";
 import { useGettext } from "vue3-gettext";
+import { useRouter } from "vue-router";
 
 import AutoComplete from "primevue/autocomplete";
 import Button from "primevue/button";
@@ -12,24 +13,22 @@ import SearchResult from "@/arches_lingo/components/basic-search/SearchResult.vu
 
 import { fetchSearchResults } from "@/arches_lingo/api.ts";
 import { DEFAULT_ERROR_TOAST_LIFE, ERROR } from "@/arches_lingo/constants.ts";
+import { routeNames } from "@/arches_lingo/routes.ts";
 
+import type { AutoCompleteOptionSelectEvent } from "primevue/autocomplete";
 import type { VirtualScrollerLazyEvent } from "primevue/virtualscroller";
-
-import type { Concept } from "@/arches_lingo/types.ts";
+import type { SearchResultItem } from "@/arches_lingo/types.ts";
 
 const { $gettext } = useGettext();
+const router = useRouter();
 const toast = useToast();
 
-const props = defineProps({
-    searchResultsPerPage: {
-        type: Number,
-        required: true,
-    },
-    searchResultItemSize: {
-        type: Number,
-        required: true,
-    },
-});
+interface Props {
+    searchResultsPerPage: number;
+    searchResultItemSize: number;
+    toggleModal: () => void;
+}
+const props = defineProps<Props>();
 
 const autoCompleteInstance = ref<InstanceType<typeof AutoComplete> | null>(
     null,
@@ -38,7 +37,7 @@ const autoCompleteKey = ref(0);
 const computedSearchResultsHeight = ref("");
 const isLoading = ref(false);
 const isLoadingAdditionalResults = ref(false);
-const searchResults = ref<Concept[]>([]);
+const searchResults = ref<SearchResultItem[]>([]);
 const searchResultsPage = ref(1);
 const searchResultsTotalCount = ref(0);
 const query = ref("");
@@ -125,7 +124,10 @@ const loadAdditionalSearchResults = (event: VirtualScrollerLazyEvent) => {
     }
 };
 
-const navigateToReport = () => {};
+const navigateToReport = (event: AutoCompleteOptionSelectEvent) => {
+    props.toggleModal();
+    router.push({ name: routeNames.concept, params: { id: event.value.id } });
+};
 
 onMounted(focusInput);
 

arches_lingo/src/arches_lingo/components/basic-search/SearchResult.vue

@@ -1,21 +1,30 @@
 <script setup lang="ts">
 import { getItemLabel } from "@/arches_vue_utils/utils.ts";
+import { ENGLISH } from "@/arches_lingo/constants.ts";
 
 import type { PropType } from "vue";
-import type { Concept } from "@/arches_lingo/types.ts";
+import type { SearchResultItem } from "@/arches_lingo/types.ts";
 
 defineProps({
     searchResult: {
-        type: Object as PropType<{ index: number; option: Concept }>,
+        type: Object as PropType<{ index: number; option: SearchResultItem }>,
         required: true,
     },
 });
 
-const getParentLabels = (item: Concept, preferredLanguage: string): string => {
+const getParentLabels = (
+    item: SearchResultItem,
+    preferredLanguageCode: string,
+    systemLanguageCode: string,
+): string => {
     const arrowIcon = " → ";
 
     return item.parents.reduce((acc, parent, index) => {
-        const label = getItemLabel(parent, preferredLanguage, "en-US").value;
+        const label = getItemLabel(
+            parent,
+            preferredLanguageCode,
+            systemLanguageCode,
+        ).value;
         if (label) {
             return acc + (index > 0 ? arrowIcon : "") + label;
         }
@@ -35,11 +44,18 @@ const getParentLabels = (item: Concept, preferredLanguage: string): string => {
         />
 
         <div style="margin: 0 0.5rem">
-            {{ getItemLabel(searchResult.option, "en-US", "en-US").value }}
+            {{
+                getItemLabel(searchResult.option, ENGLISH.code, ENGLISH.code)
+                    .value
+            }}
         </div>
 
         <div class="search-result-hierarchy">
-            [ {{ getParentLabels(searchResult.option, "en-US") }} ]
+            [
+            {{
+                getParentLabels(searchResult.option, ENGLISH.code, ENGLISH.code)
+            }}
+            ]
         </div>
     </div>
 </template>

arches_lingo/src/arches_lingo/components/header/SearchDialog.vue

@@ -15,13 +15,16 @@ import {
 const { $gettext } = useGettext();
 
 const visible = ref(false);
+const toggleModal = () => {
+    visible.value = !visible.value;
+};
 </script>
 
 <template>
     <Button
         icon="pi pi-search"
         :label="$gettext('Search')"
-        @click="visible = true"
+        @click="toggleModal"
     />
 
     <Dialog
@@ -48,6 +51,7 @@ const visible = ref(false);
             <BasicSearch
                 :search-results-per-page="SEARCH_RESULTS_PER_PAGE"
                 :search-result-item-size="SEARCH_RESULT_ITEM_SIZE"
+                :toggle-modal="toggleModal"
             />
         </div>
     </Dialog>