From 68f5da2e55e1e722d474e7baae758270dfeccab2 Mon Sep 17 00:00:00 2001
From: Christopher Byrd <cbyrd@fargeo.com>
Date: Wed, 30 Oct 2024 06:26:39 -0700
Subject: [PATCH] Implements basic search frontend (#79)

---
 arches_lingo/src/arches_lingo/App.vue         |   1 +
 arches_lingo/src/arches_lingo/api.ts          |  25 ++
 .../components/basic-search/BasicSearch.vue   | 313 ++++++++++++++++++
 .../components/basic-search/SearchResult.vue  |  72 ++++
 .../basic-search/SortAndFilterControls.vue    | 130 ++++++++
 .../components/header/PageHeader.vue          |   7 +-
 .../components/header/SearchDialog.vue        |  68 ++++
 .../components/sidenav/SideNav.vue            |   5 -
 arches_lingo/src/arches_lingo/constants.ts    |   3 +
 .../src/arches_lingo/pages/BasicSearch.vue    |   1 -
 arches_lingo/src/arches_lingo/routes.ts       |   9 -
 arches_lingo/src/arches_lingo/types.ts        |  12 +
 arches_lingo/templates/arches_urls.htm        |  12 +
 arches_lingo/urls.py                          |   1 -
 arches_lingo/utils/concept_builder.py         |   3 +
 arches_lingo/views/api/concepts.py            |  27 +-
 tests/tests.py                                |   2 +-
 tsconfig.json                                 |   1 +
 18 files changed, 661 insertions(+), 31 deletions(-)
 create mode 100644 arches_lingo/src/arches_lingo/components/basic-search/BasicSearch.vue
 create mode 100644 arches_lingo/src/arches_lingo/components/basic-search/SearchResult.vue
 create mode 100644 arches_lingo/src/arches_lingo/components/basic-search/SortAndFilterControls.vue
 create mode 100644 arches_lingo/src/arches_lingo/components/header/SearchDialog.vue
 delete mode 100644 arches_lingo/src/arches_lingo/pages/BasicSearch.vue
 create mode 100644 arches_lingo/templates/arches_urls.htm

diff --git a/arches_lingo/src/arches_lingo/App.vue b/arches_lingo/src/arches_lingo/App.vue
index 262bc710..4c8ad376 100644
--- a/arches_lingo/src/arches_lingo/App.vue
+++ b/arches_lingo/src/arches_lingo/App.vue
@@ -77,6 +77,7 @@ main {
     font-family: sans-serif;
     height: 100vh;
     width: 100vw;
+    overflow-x: hidden;
     display: flex;
     flex-direction: column;
 }
diff --git a/arches_lingo/src/arches_lingo/api.ts b/arches_lingo/src/arches_lingo/api.ts
index f6b9f3d2..657efbe4 100644
--- a/arches_lingo/src/arches_lingo/api.ts
+++ b/arches_lingo/src/arches_lingo/api.ts
@@ -54,3 +54,28 @@ export const fetchUser = async () => {
         throw new Error((error as Error).message || response.statusText);
     }
 };
+
+export const fetchSearchResults = async (
+    searchTerm: string,
+    items: number,
+    page: number,
+) => {
+    const params = new URLSearchParams({
+        term: searchTerm,
+        items: items.toString(),
+        page: page.toString(),
+    });
+
+    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);
+    }
+};
diff --git a/arches_lingo/src/arches_lingo/components/basic-search/BasicSearch.vue b/arches_lingo/src/arches_lingo/components/basic-search/BasicSearch.vue
new file mode 100644
index 00000000..5a8f46da
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/basic-search/BasicSearch.vue
@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import { nextTick, ref, watch, onMounted } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import AutoComplete from "primevue/autocomplete";
+import Button from "primevue/button";
+
+import { useToast } from "primevue/usetoast";
+
+import SortAndFilterControls from "@/arches_lingo/components/basic-search/SortAndFilterControls.vue";
+import SearchResult from "@/arches_lingo/components/basic-search/SearchResult.vue";
+
+import { fetchSearchResults } from "@/arches_lingo/api.ts";
+import { DEFAULT_ERROR_TOAST_LIFE, ERROR } from "@/arches_lingo/constants.ts";
+
+import type { VirtualScrollerLazyEvent } from "primevue/virtualscroller";
+
+import type { Concept } from "@/arches_lingo/types.ts";
+
+const { $gettext } = useGettext();
+const toast = useToast();
+
+const props = defineProps({
+    searchResultsPerPage: {
+        type: Number,
+        required: true,
+    },
+    searchResultItemSize: {
+        type: Number,
+        required: true,
+    },
+});
+
+const autoCompleteInstance = ref<InstanceType<typeof AutoComplete> | null>(
+    null,
+);
+const autoCompleteKey = ref(0);
+const computedSearchResultsHeight = ref("");
+const isLoading = ref(false);
+const isLoadingAdditionalResults = ref(false);
+const searchResults = ref<Concept[]>([]);
+const searchResultsPage = ref(1);
+const searchResultsTotalCount = ref(0);
+const query = ref("");
+const shouldShowClearInputButton = ref(false);
+
+const clearInput = () => {
+    query.value = "";
+    shouldShowClearInputButton.value = false;
+    focusInput();
+};
+
+const fetchData = async (searchTerm: string, items: number, page: number) => {
+    isLoading.value = true;
+    shouldShowClearInputButton.value = Boolean(page !== 1);
+
+    try {
+        const parsedResponse = await fetchSearchResults(
+            searchTerm,
+            items,
+            page,
+        );
+
+        if (query.value) {
+            if (page === 1) {
+                searchResults.value = parsedResponse.data;
+            } else {
+                searchResults.value = [
+                    ...searchResults.value,
+                    ...parsedResponse.data,
+                ];
+            }
+
+            searchResultsPage.value = parsedResponse.current_page;
+            searchResultsTotalCount.value = parsedResponse.total_results;
+            shouldShowClearInputButton.value = true;
+        }
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Failed to fetch data."),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+
+        searchResults.value = [];
+        searchResultsPage.value = 1;
+        searchResultsTotalCount.value = 0;
+        shouldShowClearInputButton.value = true;
+    } finally {
+        isLoading.value = false;
+        isLoadingAdditionalResults.value = false;
+    }
+};
+
+const focusInput = () => {
+    if (autoCompleteInstance.value) {
+        autoCompleteInstance.value.$el.querySelector("input").focus();
+    }
+};
+
+const keepOverlayVisible = () => {
+    if (
+        query.value &&
+        searchResults.value.length &&
+        isLoading.value === isLoadingAdditionalResults.value
+    ) {
+        nextTick(() => autoCompleteInstance.value?.show());
+    }
+};
+
+const loadAdditionalSearchResults = (event: VirtualScrollerLazyEvent) => {
+    if (
+        event.last >= searchResultsPage.value * props.searchResultsPerPage &&
+        event.last <= searchResultsTotalCount.value
+    ) {
+        isLoadingAdditionalResults.value = true;
+        searchResultsPage.value += 1;
+
+        fetchData(
+            query.value,
+            props.searchResultsPerPage,
+            searchResultsPage.value,
+        );
+    }
+};
+
+const navigateToReport = () => {};
+
+onMounted(focusInput);
+
+// handles the edge case of inputting a query then clearing the input before the data is fetched.
+watch(query, (query) => {
+    if (!query) {
+        autoCompleteKey.value += 1;
+        nextTick(() => {
+            focusInput();
+        });
+    }
+});
+
+/**
+ * This isn't fantastic but it's the best way I can find to get around PrimeVue's lack of support for
+ * updating the height of a `VirtualScroller` overlay, much less updating the height dynamically.
+ */
+watch(searchResults, (searchResults) => {
+    if (searchResults?.length) {
+        const rootFontSize = parseFloat(
+            getComputedStyle(document.documentElement).fontSize,
+        );
+        const itemHeightInRem = props.searchResultItemSize / rootFontSize; // Convert to rem based on the root font size
+        const computedHeightInRem = searchResults.length * itemHeightInRem;
+
+        const viewHeightInPixels = window.innerHeight * 0.6;
+        const viewHeightInRem = viewHeightInPixels / rootFontSize; // Convert 60vh to rem
+
+        if (computedHeightInRem > viewHeightInRem) {
+            computedSearchResultsHeight.value = "60vh";
+        } else {
+            computedSearchResultsHeight.value = `${computedHeightInRem}rem`;
+        }
+    } else {
+        computedSearchResultsHeight.value = "2.25rem";
+    }
+});
+</script>
+
+<template>
+    <div
+        id="basic-search-container"
+        style="width: 100%; font-family: sans-serif"
+    >
+        <div style="display: flex; align-items: center">
+            <i
+                class="pi pi-search search-icon"
+                aria-hidden="true"
+            />
+
+            <AutoComplete
+                ref="autoCompleteInstance"
+                :key="autoCompleteKey"
+                v-model="query"
+                option-label="id"
+                append-to="#basic-search-container"
+                :loading="isLoading && !isLoadingAdditionalResults"
+                :placeholder="$gettext('Quick Search')"
+                :pt="{
+                    option: {
+                        style: {
+                            padding: '0',
+                            borderRadius: '0',
+                        },
+                    },
+                    overlay: {
+                        style: {
+                            padding: '0',
+                            borderRadius: '0',
+                        },
+                    },
+                    list: {
+                        style: {
+                            padding: '0',
+                            gap: '0',
+                        },
+                    },
+                }"
+                :suggestions="searchResults"
+                :virtual-scroller-options="{
+                    itemSize: props.searchResultItemSize,
+                    lazy: true,
+                    onLazyLoad: loadAdditionalSearchResults,
+                    scrollHeight: computedSearchResultsHeight,
+                    style: {
+                        minHeight: computedSearchResultsHeight,
+                        maxHeight: computedSearchResultsHeight,
+                    },
+                    numToleratedItems: 1,
+                }"
+                @complete="
+                    () => {
+                        autoCompleteInstance?.hide();
+                        fetchData(query, props.searchResultsPerPage, 1);
+                    }
+                "
+                @option-select="navigateToReport"
+                @before-hide="keepOverlayVisible"
+                @update:model-value="
+                    (value) => {
+                        if (!value) {
+                            shouldShowClearInputButton = false;
+                        }
+                    }
+                "
+            >
+                <template #empty>
+                    <div style="font-family: sans-serif; text-align: center">
+                        {{ $gettext("No search results found") }}
+                    </div>
+                </template>
+                <template #option="slotProps">
+                    <SearchResult :search-result="slotProps" />
+                </template>
+                <template
+                    v-if="isLoadingAdditionalResults"
+                    #footer
+                >
+                    <div class="footer">
+                        <i
+                            class="pi pi-spin pi-spinner p-virtualscroller-loader"
+                            :aria-label="
+                                $gettext('Loading additional search results')
+                            "
+                        />
+                    </div>
+                </template>
+            </AutoComplete>
+
+            <Button
+                v-if="shouldShowClearInputButton"
+                class="p-button-text clear-button"
+                icon="pi pi-times"
+                :aria-label="$gettext('Clear Input')"
+                @click="clearInput"
+            />
+        </div>
+
+        <SortAndFilterControls />
+    </div>
+</template>
+
+<style scoped>
+.clear-button {
+    background-color: transparent !important;
+    position: absolute;
+    inset-inline-end: 0.2rem;
+    color: var(--p-input-color);
+}
+
+.search-icon {
+    position: absolute;
+    inset-inline-start: 1rem;
+    z-index: 1;
+    font-weight: bold;
+}
+
+.p-autocomplete {
+    width: 100%;
+}
+
+.footer {
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    inset-inline-end: 0;
+
+    i {
+        font-size: 2rem;
+        background-color: transparent;
+        padding: 1rem;
+        height: 4rem;
+    }
+}
+
+:deep(.p-autocomplete .p-autocomplete-input) {
+    width: 100%;
+    padding: 1rem 2.5rem;
+    border: none;
+}
+
+:deep(.p-autocomplete-overlay) {
+    position: static !important;
+}
+</style>
diff --git a/arches_lingo/src/arches_lingo/components/basic-search/SearchResult.vue b/arches_lingo/src/arches_lingo/components/basic-search/SearchResult.vue
new file mode 100644
index 00000000..166a0892
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/basic-search/SearchResult.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { getItemLabel } from "@/arches_vue_utils/utils.ts";
+
+import type { PropType } from "vue";
+import type { Concept } from "@/arches_lingo/types.ts";
+
+defineProps({
+    searchResult: {
+        type: Object as PropType<{ index: number; option: Concept }>,
+        required: true,
+    },
+});
+
+const getParentLabels = (item: Concept, preferredLanguage: string): string => {
+    const arrowIcon = " → ";
+
+    return item.parents.reduce((acc, parent, index) => {
+        const label = getItemLabel(parent, preferredLanguage, "en-US").value;
+        if (label) {
+            return acc + (index > 0 ? arrowIcon : "") + label;
+        }
+        return acc;
+    }, "");
+};
+</script>
+
+<template>
+    <div
+        class="search-result"
+        :class="{ 'is-even': searchResult.index % 2 === 0 }"
+    >
+        <i
+            class="pi pi-paperclip"
+            aria-hidden="true"
+        />
+
+        <div style="margin: 0 0.5rem">
+            {{ getItemLabel(searchResult.option, "en-US", "en-US").value }}
+        </div>
+
+        <div class="search-result-hierarchy">
+            [ {{ getParentLabels(searchResult.option, "en-US") }} ]
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.search-result {
+    height: 100%;
+    width: 100%;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    background-color: white;
+    border-bottom: 1px solid #ddd;
+    font-family: sans-serif;
+}
+
+.search-result-hierarchy {
+    margin: 0 0.5rem;
+    font-size: small;
+    color: steelblue;
+}
+
+.p-focus > .search-result {
+    background-color: #9cc3e4;
+}
+
+.is-even {
+    background-color: #d3e5f4;
+}
+</style>
diff --git a/arches_lingo/src/arches_lingo/components/basic-search/SortAndFilterControls.vue b/arches_lingo/src/arches_lingo/components/basic-search/SortAndFilterControls.vue
new file mode 100644
index 00000000..fcad02fb
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/basic-search/SortAndFilterControls.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Checkbox from "primevue/checkbox";
+import RadioButton from "primevue/radiobutton";
+
+const { $gettext } = useGettext();
+
+const filters = [
+    { value: "Concepts", label: $gettext("Concepts") },
+    { value: "Places", label: $gettext("Places") },
+    { value: "People", label: $gettext("People") },
+    { value: "Groups", label: $gettext("Groups") },
+    { value: "Periods", label: $gettext("Periods") },
+];
+const queryFilters = ref([]);
+
+const sortOptions = [
+    { value: "Unsorted", label: $gettext("Unsorted") },
+    { value: "A to Z", label: $gettext("A to Z") },
+    { value: "Z to A", label: $gettext("Z to A") },
+];
+const querySortPreference = ref();
+</script>
+
+<template>
+    <div class="sort-and-filter-controls">
+        <div class="sort-container">
+            <div class="label">Placeholder Sorting:</div>
+
+            <div
+                v-for="(sortOption, index) in sortOptions"
+                :key="index"
+                class="query-sort-preference"
+            >
+                <RadioButton
+                    v-model="querySortPreference"
+                    :input-id="`querySortPreference${index + 1}`"
+                    :name="`querySortPreference${index + 1}`"
+                    :value="sortOption.value"
+                />
+                <label :for="`querySortPreference${index + 1}`">{{
+                    sortOption.label
+                }}</label>
+            </div>
+        </div>
+
+        <div class="filter-container">
+            <div class="label">Placeholder Include:</div>
+
+            <div
+                v-for="(filter, index) in filters"
+                :key="index"
+                class="query-filter"
+            >
+                <Checkbox
+                    v-model="queryFilters"
+                    :input-id="`queryFilter${index + 1}`"
+                    :name="`queryFilter${index + 1}`"
+                    :value="filter.value"
+                />
+                <label :for="`queryFilter${index + 1}`">{{
+                    filter.label
+                }}</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.sort-and-filter-controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 1rem;
+    background-color: #ebeef0;
+    border-top: 1px solid #ddd;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.sort-container,
+.filter-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.label {
+    min-width: 150px; /* Adjust as necessary */
+    font-weight: bold;
+}
+
+.query-sort-preference,
+.query-filter {
+    display: flex;
+    align-items: center;
+}
+
+label {
+    margin-left: 0.25rem;
+    cursor: pointer;
+}
+
+:deep(.p-radiobutton-box),
+:deep(.p-checkbox-box) {
+    background-color: #ebeef0;
+    border: 1px solid;
+}
+
+@media screen and (max-width: 960px) {
+    .sort-and-filter-controls {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .sort-container,
+    .filter-container {
+        width: 100%;
+    }
+
+    .label {
+        width: 100%;
+        margin-bottom: 0.5rem;
+    }
+}
+</style>
diff --git a/arches_lingo/src/arches_lingo/components/header/PageHeader.vue b/arches_lingo/src/arches_lingo/components/header/PageHeader.vue
index c653ff50..c5d4a0cd 100644
--- a/arches_lingo/src/arches_lingo/components/header/PageHeader.vue
+++ b/arches_lingo/src/arches_lingo/components/header/PageHeader.vue
@@ -6,15 +6,11 @@ import Menubar from "primevue/menubar";
 
 import { routeNames } from "@/arches_lingo/routes.ts";
 import UserInteraction from "@/arches_lingo/components/user/UserInteraction.vue";
+import SearchDialog from "@/arches_lingo/components/header/SearchDialog.vue";
 
 const { $gettext } = useGettext();
 
 const items = ref([
-    {
-        label: $gettext("Search"),
-        icon: "fa fa-search",
-        name: routeNames.search,
-    },
     {
         label: $gettext("Advanced Search"),
         icon: "fa fa-file",
@@ -35,6 +31,7 @@ const items = ref([
             >
                 <h2>{{ $gettext("Arches Lingo") }}</h2>
             </RouterLink>
+            <SearchDialog />
         </template>
         <template #item="{ item }">
             <RouterLink
diff --git a/arches_lingo/src/arches_lingo/components/header/SearchDialog.vue b/arches_lingo/src/arches_lingo/components/header/SearchDialog.vue
new file mode 100644
index 00000000..d5196331
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/header/SearchDialog.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+
+import BasicSearch from "@/arches_lingo/components/basic-search/BasicSearch.vue";
+
+import {
+    SEARCH_RESULTS_PER_PAGE,
+    SEARCH_RESULT_ITEM_SIZE,
+} from "@/arches_lingo/constants.ts";
+
+const { $gettext } = useGettext();
+
+const visible = ref(false);
+</script>
+
+<template>
+    <Button
+        icon="pi pi-search"
+        :label="$gettext('Search')"
+        @click="visible = true"
+    />
+
+    <Dialog
+        v-model:visible="visible"
+        position="top"
+        :header="$gettext('Search')"
+        :dismissable-mask="true"
+        :close-on-escape="true"
+        :modal="true"
+        :pt="{
+            content: {
+                style: {
+                    padding: 0,
+                    overflow: 'visible',
+                },
+            },
+            root: {
+                class: 'basic-search-dialog',
+            },
+        }"
+        :show-header="false"
+    >
+        <div style="width: 80vw">
+            <BasicSearch
+                :search-results-per-page="SEARCH_RESULTS_PER_PAGE"
+                :search-result-item-size="SEARCH_RESULT_ITEM_SIZE"
+            />
+        </div>
+    </Dialog>
+</template>
+
+<!-- NOT scoped because dialog gets appended to <body> and is unreachable via scoped styles -->
+<style>
+.basic-search-dialog {
+    margin-top: 6rem !important;
+    border-radius: 0 !important;
+}
+
+@media screen and (max-width: 960px) {
+    .basic-search-dialog {
+        margin-top: 1rem !important;
+    }
+}
+</style>
diff --git a/arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue b/arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue
index 3606f916..3422bae2 100644
--- a/arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue
+++ b/arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue
@@ -12,11 +12,6 @@ const items = ref([
         routeName: routeNames.root,
         linkName: $gettext("Home"),
     },
-    {
-        icon: "fa fa-search",
-        routeName: routeNames.search,
-        linkName: $gettext("Search"),
-    },
 ]);
 </script>
 
diff --git a/arches_lingo/src/arches_lingo/constants.ts b/arches_lingo/src/arches_lingo/constants.ts
index 534204aa..701063dc 100644
--- a/arches_lingo/src/arches_lingo/constants.ts
+++ b/arches_lingo/src/arches_lingo/constants.ts
@@ -4,6 +4,9 @@ import type { UserRefAndSetter } from "@/arches_lingo/types.ts";
 
 export const ANONYMOUS = "anonymous";
 export const ERROR = "error";
+
 export const DEFAULT_ERROR_TOAST_LIFE = 8000;
+export const SEARCH_RESULTS_PER_PAGE = 25;
+export const SEARCH_RESULT_ITEM_SIZE = 38;
 
 export const USER_KEY = Symbol() as InjectionKey<UserRefAndSetter>;
diff --git a/arches_lingo/src/arches_lingo/pages/BasicSearch.vue b/arches_lingo/src/arches_lingo/pages/BasicSearch.vue
deleted file mode 100644
index fd68eb55..00000000
--- a/arches_lingo/src/arches_lingo/pages/BasicSearch.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template>Basic Search placeholder</template>
diff --git a/arches_lingo/src/arches_lingo/routes.ts b/arches_lingo/src/arches_lingo/routes.ts
index 1a49968b..17bd747d 100644
--- a/arches_lingo/src/arches_lingo/routes.ts
+++ b/arches_lingo/src/arches_lingo/routes.ts
@@ -17,15 +17,6 @@ export const routes = [
             requiresAuthentication: false,
         },
     },
-    {
-        path: "/search",
-        name: "search",
-        component: () => import("@/arches_lingo/pages/BasicSearch.vue"),
-        meta: {
-            shouldShowNavigation: true,
-            requiresAuthentication: true,
-        },
-    },
     {
         path: "/advanced-search",
         name: "advanced-search",
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
index f9a2e309..e791e762 100644
--- a/arches_lingo/src/arches_lingo/types.ts
+++ b/arches_lingo/src/arches_lingo/types.ts
@@ -1,5 +1,7 @@
 import type { Ref } from "vue";
 
+import type { Label } from "@/arches_vue_utils/types";
+
 export interface User {
     first_name: string;
     last_name: string;
@@ -11,3 +13,13 @@ export interface UserRefAndSetter {
     user: Ref<User | null>;
     setUser: (userToSet: User | null) => void;
 }
+
+export interface Concept {
+    id: string;
+    labels: Label[];
+    parents: {
+        id: string;
+        labels: Label[];
+    }[];
+    polyhierarchical: boolean;
+}
diff --git a/arches_lingo/templates/arches_urls.htm b/arches_lingo/templates/arches_urls.htm
new file mode 100644
index 00000000..36fc2df2
--- /dev/null
+++ b/arches_lingo/templates/arches_urls.htm
@@ -0,0 +1,12 @@
+{% extends "arches_urls.htm" %}
+
+{% load static %}
+{% load l10n %}
+{% load i18n %}
+
+{% block arches_urls %}
+{{ block.super }}
+<div class="arches-urls"
+    api_search="{% url 'api-search' %}"
+></div>
+{% endblock arches_urls %}
\ No newline at end of file
diff --git a/arches_lingo/urls.py b/arches_lingo/urls.py
index a8899f36..2f3df8ec 100644
--- a/arches_lingo/urls.py
+++ b/arches_lingo/urls.py
@@ -9,7 +9,6 @@
 urlpatterns = [
     path("", LingoRootView.as_view(), name="root"),
     path("login", LingoRootView.as_view(), name="login"),
-    path("search", LingoRootView.as_view(), name="search"),
     path("advanced-search", LingoRootView.as_view(), name="advanced-search"),
     path("schemes", LingoRootView.as_view(), name="schemes"),
     path("api/concepts", ConceptTreeView.as_view(), name="api-concepts"),
diff --git a/arches_lingo/utils/concept_builder.py b/arches_lingo/utils/concept_builder.py
index cd702be7..231dae34 100644
--- a/arches_lingo/utils/concept_builder.py
+++ b/arches_lingo/utils/concept_builder.py
@@ -22,8 +22,10 @@
     SCHEME_NAME_LANGUAGE_NODE,
     SCHEME_NAME_TYPE_NODE,
 )
+
 from arches_lingo.utils.query_expressions import JsonbArrayElements
 
+
 TOP_CONCEPT_OF_LOOKUP = f"data__{TOP_CONCEPT_OF_NODE_AND_NODEGROUP}"
 BROADER_LOOKUP = f"data__{CLASSIFICATION_STATUS_ASCRIBED_CLASSIFICATION_NODEID}"
 
@@ -212,6 +214,7 @@ def add_broader_concept_recursive(self, working_parent_list, conceptid):
             schemes = sorted(self.schemes_by_top_concept[conceptid])
             working_parent_list.insert(0, schemes[0])
             return working_parent_list
+
         working_parent_list.insert(0, first_broader_conceptid)
         return self.add_broader_concept_recursive(
             working_parent_list, first_broader_conceptid
diff --git a/arches_lingo/views/api/concepts.py b/arches_lingo/views/api/concepts.py
index 41e0dc71..6d868f5a 100644
--- a/arches_lingo/views/api/concepts.py
+++ b/arches_lingo/views/api/concepts.py
@@ -57,17 +57,26 @@ def get(self, request):
             concept_query = VwLabelValue.objects.all().order_by("concept_id")
         concept_ids = concept_query.values_list("concept_id", flat=True).distinct()
 
+        data = []
         paginator = Paginator(concept_ids, items_per_page)
-        if not paginator.count:
-            return JSONResponse([])
-
-        builder = ConceptBuilder()
-        data = [
-            builder.serialize_concept(str(concept_uuid), parents=True, children=False)
-            for concept_uuid in paginator.get_page(page_number)
-        ]
+        if paginator.count:
+            builder = ConceptBuilder()
+            data = [
+                builder.serialize_concept(
+                    str(concept_uuid), parents=True, children=False
+                )
+                for concept_uuid in paginator.get_page(page_number)
+            ]
 
-        return JSONResponse(data)
+        return JSONResponse(
+            {
+                "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,
+            }
+        )
 
     @staticmethod
     def default_sensitivity():
diff --git a/tests/tests.py b/tests/tests.py
index 987e5077..9808e303 100644
--- a/tests/tests.py
+++ b/tests/tests.py
@@ -247,7 +247,7 @@ def test_search(self):
             with self.subTest(query=query):
                 response = self.client.get(reverse("api-search"), QUERY_STRING=query)
                 result = json.loads(response.content)
-                self.assertEqual(len(result), expected_result_count, result)
+                self.assertEqual(len(result["data"]), expected_result_count, result)
 
     def test_invalid_search_term(self):
         self.client.force_login(self.admin)
diff --git a/tsconfig.json b/tsconfig.json
index 34902ec7..c223f2c6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,7 @@
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
+    "types": ["vitest/globals"],
     "allowImportingTsExtensions": true
   }
 }