From 73dc3a1d8c9bfa2a00808e981a825e0eeec76b43 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Wed, 31 Jul 2024 09:18:02 -0400
Subject: [PATCH 01/12] Add `vue-router`

---
 package-lock.json | 22 +++++++++++++++++++++-
 package.json      |  8 ++++----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 69d1c37..5d7e084 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,8 @@
             "name": "arches_references",
             "license": "AGPL-3.0-only",
             "dependencies": {
-                "arches": "archesproject/arches#dev/7.6.x"
+                "arches": "archesproject/arches#dev/7.6.x",
+                "vue-router": "^4.4.0"
             },
             "devDependencies": {
                 "arches-dev-dependencies": "archesproject/arches-dev-dependencies#dev/7.6.x"
@@ -5546,6 +5547,11 @@
                 "he": "^1.2.0"
             }
         },
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.3",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
+            "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw=="
+        },
         "node_modules/@vue/language-core": {
             "version": "2.0.29",
             "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.29.tgz",
@@ -16715,6 +16721,20 @@
                 }
             }
         },
+        "node_modules/vue-router": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",
+            "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
+            "dependencies": {
+                "@vue/devtools-api": "^6.5.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.0"
+            }
+        },
         "node_modules/vue-template-compiler": {
             "version": "2.7.16",
             "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
diff --git a/package.json b/package.json
index ca939de..1d8b7c8 100644
--- a/package.json
+++ b/package.json
@@ -18,17 +18,17 @@
         "vitest": "vitest --run --coverage"
     },
     "dependencies": {
-        "arches": "archesproject/arches#dev/7.6.x"
+        "arches": "archesproject/arches#dev/7.6.x",
+        "vue-router": "^4.4.0"
     },
     "devDependencies": {
         "arches-dev-dependencies": "archesproject/arches-dev-dependencies#dev/7.6.x"
     },
-    "nodeModulesPaths": {
-    },
+    "nodeModulesPaths": {},
     "overrides": {
         "moment-timezone": "^0.5.45",
         "nomnom": "npm:@gerhobbelt/nomnom",
-        "rimraf": "^5.0.7", 
+        "rimraf": "^5.0.7",
         "underscore": "^1.13.6"
     }
 }

From f23b0c32cc096e1105b62fb7ee84d5ba69c9d1ed Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Wed, 31 Jul 2024 09:43:25 -0400
Subject: [PATCH 02/12] Remove trailing slashes from URLs

---
 arches_references/urls.py | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/arches_references/urls.py b/arches_references/urls.py
index dd56bc6..8d04c44 100644
--- a/arches_references/urls.py
+++ b/arches_references/urls.py
@@ -13,50 +13,50 @@
 )
 
 urlpatterns = [
-    path("api/controlled_lists/", ListsView.as_view(), name="controlled_lists"),
+    path("api/controlled_lists", ListsView.as_view(), name="controlled_lists"),
     path(
-        "api/controlled_list/<uuid:list_id>/",
+        "api/controlled_list/<uuid:list_id>",
         ListView.as_view(),
         name="controlled_list",
     ),
-    path("api/controlled_list/", ListView.as_view(), name="controlled_list_add"),
+    path("api/controlled_list", ListView.as_view(), name="controlled_list_add"),
     path(
-        "api/controlled_list_item/<uuid:item_id>/",
+        "api/controlled_list_item/<uuid:item_id>",
         ListItemView.as_view(),
         name="controlled_list_item",
     ),
     path(
-        "api/controlled_list_item/",
+        "api/controlled_list_item",
         ListItemView.as_view(),
         name="controlled_list_item_add",
     ),
     path(
-        "api/controlled_list_item_value/<uuid:value_id>/",
+        "api/controlled_list_item_value/<uuid:value_id>",
         ListItemValueView.as_view(),
         name="controlled_list_item_value",
     ),
     path(
-        "api/controlled_list_item_value/",
+        "api/controlled_list_item_value",
         ListItemValueView.as_view(),
         name="controlled_list_item_value_add",
     ),
     path(
-        "api/controlled_list_item_image/<uuid:image_id>/",
+        "api/controlled_list_item_image/<uuid:image_id>",
         ListItemImageView.as_view(),
         name="controlled_list_item_image",
     ),
     path(
-        "api/controlled_list_item_image/",
+        "api/controlled_list_item_image",
         ListItemImageView.as_view(),
         name="controlled_list_item_image_add",
     ),
     path(
-        "api/controlled_list_item_image_metadata/<uuid:metadata_id>/",
+        "api/controlled_list_item_image_metadata/<uuid:metadata_id>",
         ListItemImageMetadataView.as_view(),
         name="controlled_list_item_image_metadata",
     ),
     path(
-        "api/controlled_list_item_image_metadata/",
+        "api/controlled_list_item_image_metadata",
         ListItemImageMetadataView.as_view(),
         name="controlled_list_item_image_metadata_add",
     ),

From c244a60d6e95361c55eb2feb3f5380e5044041c6 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Mon, 12 Aug 2024 13:05:03 -0400
Subject: [PATCH 03/12] Standardize APIBase inheritance

---
 arches_references/views.py | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/arches_references/views.py b/arches_references/views.py
index 8a2d0ca..5c60bda 100644
--- a/arches_references/views.py
+++ b/arches_references/views.py
@@ -1,13 +1,12 @@
-import logging
 from http import HTTPStatus
 from uuid import UUID
 
 from django.core.exceptions import ValidationError
 from django.db import transaction
 from django.db.models import Max
-from django.views.generic import View
 from django.utils.decorators import method_decorator
 from django.utils.translation import gettext as _
+from django.views.generic import View
 
 from arches.app.models.utils import field_names
 from arches.app.utils.betterJSONSerializer import JSONDeserializer
@@ -25,8 +24,6 @@
     NodeProxy,
 )
 
-logger = logging.getLogger(__name__)
-
 
 def _prefetch_terms(request):
     """Children at arbitrary depth will still be returned, but tell
@@ -90,7 +87,7 @@ def get(self, request):
 @method_decorator(
     group_required("RDM Administrator", raise_exception=True), name="dispatch"
 )
-class ListView(View):
+class ListView(APIBase):
     def get(self, request, list_id):
         """Returns either a flat representation (?flat=true) or a tree (default)."""
         try:
@@ -176,7 +173,7 @@ def delete(self, request, list_id):
 @method_decorator(
     group_required("RDM Administrator", raise_exception=True), name="dispatch"
 )
-class ListItemView(View):
+class ListItemView(APIBase):
     def post(self, request):
         data = JSONDeserializer().deserialize(request.body)
         try:
@@ -247,7 +244,7 @@ def delete(self, request, item_id):
 @method_decorator(
     group_required("RDM Administrator", raise_exception=True), name="dispatch"
 )
-class ListItemValueView(View):
+class ListItemValueView(APIBase):
     def post(self, request):
         data = JSONDeserializer().deserialize(request.body)
         value = ListItemValue(**data)
@@ -301,7 +298,7 @@ def delete(self, request, value_id):
 @method_decorator(
     group_required("RDM Administrator", raise_exception=True), name="dispatch"
 )
-class ListItemImageView(View):
+class ListItemImageView(APIBase):
     def post(self, request):
         uploaded_file = request.FILES["item_image"]
         img = ListItemImage(
@@ -328,7 +325,7 @@ def delete(self, request, image_id):
 @method_decorator(
     group_required("RDM Administrator", raise_exception=True), name="dispatch"
 )
-class ListItemImageMetadataView(View):
+class ListItemImageMetadataView(APIBase):
     def post(self, request):
         data = JSONDeserializer().deserialize(request.body)
         data.pop("metadata_label", None)

From 88e6ef9a41eb123c9b0c33ccc2159ec1156cd16b Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Wed, 31 Jul 2024 10:25:39 -0400
Subject: [PATCH 04/12] Implement front-end routing #4

---
 CHANGELOG.md                                  |   5 +-
 .../plugins/controlled-list-manager.js        |  15 +++
 .../components/ControlledListsMain.vue        | 105 ++++++++++++------
 .../components/tree/AddDeleteControls.vue     |  25 -----
 .../components/tree/ListTree.vue              |   6 +-
 .../components/tree/ListTreeControls.vue      |  90 ++++++++++++++-
 .../components/tree/MoveRow.vue               |  24 ++--
 .../components/tree/TreeRow.vue               |  11 +-
 .../src/arches_references/constants.ts        |   6 +
 .../plugins/ControlledListManager.vue         |  14 +--
 .../src/arches_references/utils.ts            |  24 ++--
 11 files changed, 228 insertions(+), 97 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4ef1c9..6c267dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,10 +8,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
--  Added compatibility with PrimeVue 4 [#16](https://github.com/archesproject/arches-references/pull/16)
+-   Add compatibility with PrimeVue 4 [#9](https://github.com/archesproject/arches-references/issues/9)
+-   Add front-end routing [#19](https://github.com/archesproject/arches-references/pull/19)
 
 ### Changed
--  Generate URIs when not supplied [#17](https://github.com/archesproject/arches-references/pull/17)
+-   Generate URIs when not supplied [#17](https://github.com/archesproject/arches-references/pull/17)
 
 ### Fixed
 
diff --git a/arches_references/media/js/views/components/plugins/controlled-list-manager.js b/arches_references/media/js/views/components/plugins/controlled-list-manager.js
index 6ed3916..f6b5c16 100644
--- a/arches_references/media/js/views/components/plugins/controlled-list-manager.js
+++ b/arches_references/media/js/views/components/plugins/controlled-list-manager.js
@@ -1,12 +1,27 @@
 import ko from 'knockout';
 
 import ControlledListManager from '@/arches_references/plugins/ControlledListManager.vue';
+import ControlledListsMain from '@/arches_references/components/ControlledListsMain.vue';
 import createVueApplication from 'utils/create-vue-application';
 import ControlledListManagerTemplate from 'templates/views/components/plugins/controlled-list-manager.htm';
 
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  { path: '/plugins/controlled-list-manager', name: 'splash', component: ControlledListsMain },
+  { path: '/plugins/controlled-list-manager/list/:id', name: 'list', component: ControlledListsMain },
+  { path: '/plugins/controlled-list-manager/item/:id', name: 'item', component: ControlledListsMain },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
 ko.components.register('controlled-list-manager', {
     viewModel: function() {
         createVueApplication(ControlledListManager).then((vueApp) => {
+            vueApp.use(router);
             vueApp.mount('#controlled-list-manager-mounting-point');
         });
     },
diff --git a/arches_references/src/arches_references/components/ControlledListsMain.vue b/arches_references/src/arches_references/components/ControlledListsMain.vue
index 65cc993..be8de0c 100644
--- a/arches_references/src/arches_references/components/ControlledListsMain.vue
+++ b/arches_references/src/arches_references/components/ControlledListsMain.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import arches from "arches";
 import { computed, provide, ref } from "vue";
+import { useRouter } from "vue-router";
 
+import ConfirmDialog from "primevue/confirmdialog";
 import ProgressSpinner from "primevue/progressspinner";
 import Splitter from "primevue/splitter";
 import SplitterPanel from "primevue/splitterpanel";
+import Toast from "primevue/toast";
 
 import {
     displayedRowKey,
+    routes,
     selectedLanguageKey,
 } from "@/arches_references/constants.ts";
 import { dataIsList } from "@/arches_references/utils.ts";
@@ -21,11 +25,23 @@ import type { Ref } from "vue";
 import type { Language } from "@/arches/types";
 import type { Selectable } from "@/arches_references/types";
 
-const splash = "splash";
+const router = useRouter();
 
 const displayedRow: Ref<Selectable | null> = ref(null);
 const setDisplayedRow = (val: Selectable | null) => {
     displayedRow.value = val;
+    if (val === null) {
+        router.push({ name: routes.splash });
+        return;
+    }
+    if (typeof val.id === "number") {
+        return;
+    }
+    if (dataIsList(val)) {
+        router.push({ name: routes.list, params: { id: val.id } });
+    } else {
+        router.push({ name: routes.item, params: { id: val.id } });
+    }
 };
 // @ts-expect-error vue-tsc doesn't like arbitrary properties here
 provide(displayedRowKey, { displayedRow, setDisplayedRow });
@@ -49,37 +65,64 @@ const panel = computed(() => {
 </script>
 
 <template>
-    <div class="list-editor-container">
-        <ListHeader />
-        <Splitter style="height: 100%">
-            <SplitterPanel
-                :size="34"
-                :min-size="25"
-                style="display: flex; flex-direction: column"
-            >
-                <Suspense>
-                    <ListTree />
-                    <template #fallback>
-                        <ProgressSpinner />
-                    </template>
-                </Suspense>
-            </SplitterPanel>
-            <SplitterPanel
-                :size="66"
-                :min-size="25"
-                :style="{
-                    margin: '1rem 0rem 4rem 1rem',
-                    overflowY: 'auto',
-                    paddingRight: '4rem',
-                }"
-            >
-                <component
-                    :is="panel"
-                    :key="displayedRow?.id ?? splash"
-                />
-            </SplitterPanel>
-        </Splitter>
+    <!-- Subtract size of arches toolbars -->
+    <div style="width: calc(100vw - 50px); height: calc(100vh - 50px)">
+        <div class="list-editor-container">
+            <ListHeader />
+            <Splitter style="height: 100%">
+                <SplitterPanel
+                    :size="34"
+                    :min-size="25"
+                    style="display: flex; flex-direction: column"
+                >
+                    <Suspense>
+                        <ListTree />
+                        <template #fallback>
+                            <ProgressSpinner />
+                        </template>
+                    </Suspense>
+                </SplitterPanel>
+                <SplitterPanel
+                    :size="66"
+                    :min-size="25"
+                    :style="{
+                        margin: '1rem 0rem 4rem 1rem',
+                        overflowY: 'auto',
+                        paddingRight: '4rem',
+                    }"
+                >
+                    <component
+                        :is="panel"
+                        :key="displayedRow?.id ?? routes.splash"
+                    />
+                </SplitterPanel>
+            </Splitter>
+        </div>
     </div>
+    <Toast />
+    <ConfirmDialog
+        :draggable="false"
+        :pt="{
+            root: {
+                style: {
+                    fontSize: 'small',
+                },
+            },
+            header: {
+                style: {
+                    background: 'var(--p-navigation)',
+                    color: 'white',
+                    borderRadius: '1rem',
+                    marginBottom: '1rem',
+                },
+            },
+            title: {
+                style: {
+                    fontWeight: 800,
+                },
+            },
+        }"
+    />
 </template>
 
 <style scoped>
diff --git a/arches_references/src/arches_references/components/tree/AddDeleteControls.vue b/arches_references/src/arches_references/components/tree/AddDeleteControls.vue
index 59b7071..84d49c1 100644
--- a/arches_references/src/arches_references/components/tree/AddDeleteControls.vue
+++ b/arches_references/src/arches_references/components/tree/AddDeleteControls.vue
@@ -5,7 +5,6 @@ import { useGettext } from "vue3-gettext";
 import { useConfirm } from "primevue/useconfirm";
 import { useToast } from "primevue/usetoast";
 import Button from "primevue/button";
-import ConfirmDialog from "primevue/confirmdialog";
 import SplitButton from "primevue/splitbutton";
 
 import {
@@ -113,7 +112,6 @@ const createList = () => {
     };
 
     nextNewList.value = newList;
-    newListFormValue.value = "";
     newListCounter.value += 1;
 
     tree.value.push(listAsNode(newList, selectedLanguage.value));
@@ -262,29 +260,6 @@ await fetchListsAndPopulateTree();
         :severity="shouldUseContrast() ? CONTRAST : PRIMARY"
         @click="createList"
     />
-    <ConfirmDialog
-        :draggable="false"
-        :pt="{
-            root: {
-                style: {
-                    fontSize: 'small',
-                },
-            },
-            header: {
-                style: {
-                    background: 'var(--p-navigation)',
-                    color: 'white',
-                    borderRadius: '1rem',
-                    marginBottom: '1rem',
-                },
-            },
-            title: {
-                style: {
-                    fontWeight: 800,
-                },
-            },
-        }"
-    />
     <SplitButton
         class="list-button"
         :label="$gettext('Delete')"
diff --git a/arches_references/src/arches_references/components/tree/ListTree.vue b/arches_references/src/arches_references/components/tree/ListTree.vue
index 8196735..e081807 100644
--- a/arches_references/src/arches_references/components/tree/ListTree.vue
+++ b/arches_references/src/arches_references/components/tree/ListTree.vue
@@ -58,6 +58,10 @@ const { setDisplayedRow } = inject(displayedRowKey) as unknown as {
 };
 
 const updateSelectedAndExpanded = (node: TreeNode) => {
+    if (isMultiSelecting.value || movingItem.value?.key) {
+        return;
+    }
+
     setDisplayedRow(node.data);
     expandedKeys.value = {
         ...expandedKeys.value,
@@ -169,7 +173,7 @@ const ptNodeContent = ({ instance }: TreePassThroughMethodOptions) => {
 <template>
     <ListTreeControls
         :key="refetcher"
-        v-model="tree"
+        v-model:tree="tree"
         v-model:rerender-tree="rerenderTree"
         v-model:expanded-keys="expandedKeys"
         v-model:selected-keys="selectedKeys"
diff --git a/arches_references/src/arches_references/components/tree/ListTreeControls.vue b/arches_references/src/arches_references/components/tree/ListTreeControls.vue
index 627afcd..d469f5c 100644
--- a/arches_references/src/arches_references/components/tree/ListTreeControls.vue
+++ b/arches_references/src/arches_references/components/tree/ListTreeControls.vue
@@ -1,13 +1,21 @@
 <script setup lang="ts">
+import { inject, watch } from "vue";
+import { useRoute } from "vue-router";
+
+import { displayedRowKey, routes } from "@/arches_references/constants.ts";
+import { findNodeInTree } from "@/arches_references/utils.ts";
 import ActionBanner from "@/arches_references/components/tree/ActionBanner.vue";
 import AddDeleteControls from "@/arches_references/components/tree/AddDeleteControls.vue";
 import PresentationControls from "@/arches_references/components/tree/PresentationControls.vue";
 
+import type { RouteLocationNormalizedLoadedGeneric } from "vue-router";
 import type { TreeExpandedKeys, TreeSelectionKeys } from "primevue/tree";
 import type { TreeNode } from "primevue/treenode";
-import type { ControlledList } from "@/arches_references/types";
+import type { ControlledList, RowSetter } from "@/arches_references/types";
 
-const controlledListItemsTree = defineModel<TreeNode[]>({ required: true });
+const controlledListItemsTree = defineModel<TreeNode[]>("tree", {
+    required: true,
+});
 const rerenderTree = defineModel<number>("rerenderTree", { required: true });
 const expandedKeys = defineModel<TreeExpandedKeys>("expandedKeys", {
     required: true,
@@ -24,6 +32,75 @@ const newListFormValue = defineModel<string>("newListFormValue", {
     required: true,
 });
 
+const { setDisplayedRow } = inject(displayedRowKey) as unknown as {
+    setDisplayedRow: RowSetter;
+};
+const route = useRoute();
+watch(
+    [
+        () => {
+            return { ...route };
+        },
+    ],
+    ([newRoute]) => {
+        navigate(newRoute);
+    },
+);
+const navigate = (newRoute: RouteLocationNormalizedLoadedGeneric) => {
+    switch (newRoute.name) {
+        case routes.splash:
+            setDisplayedRow(null);
+            expandedKeys.value = {};
+            selectedKeys.value = {};
+            break;
+        case routes.list: {
+            if (!controlledListItemsTree.value.length) {
+                return;
+            }
+            const list = controlledListItemsTree.value.find(
+                (node) => node.data.id === newRoute.params.id,
+            );
+            if (list) {
+                setDisplayedRow(list.data);
+                expandedKeys.value = {
+                    ...expandedKeys.value,
+                    [list.data.id]: true,
+                };
+                selectedKeys.value = { [list.data.id]: true };
+            } else {
+                setDisplayedRow(null);
+            }
+            break;
+        }
+        case routes.item: {
+            if (!controlledListItemsTree.value.length) {
+                return;
+            }
+            const { found, path } = findNodeInTree(
+                controlledListItemsTree.value,
+                newRoute.params.id as string,
+            );
+            if (found) {
+                setDisplayedRow(found.data);
+                const itemsToExpandIds = path.map(
+                    (itemInPath: TreeNode) => itemInPath.key,
+                );
+                expandedKeys.value = {
+                    ...expandedKeys.value,
+                    ...Object.fromEntries(
+                        [
+                            found.data.controlled_list_id,
+                            ...itemsToExpandIds,
+                        ].map((x) => [x, true]),
+                    ),
+                };
+                selectedKeys.value = { [found.data.id]: true };
+            }
+            break;
+        }
+    }
+};
+
 const expandAll = () => {
     for (const node of controlledListItemsTree.value) {
         expandNode(node);
@@ -43,6 +120,15 @@ const expandNode = (node: TreeNode) => {
         }
     }
 };
+
+// Navigate on initial load of the tree.
+watch(
+    controlledListItemsTree,
+    () => {
+        navigate(route);
+    },
+    { once: true },
+);
 </script>
 
 <template>
diff --git a/arches_references/src/arches_references/components/tree/MoveRow.vue b/arches_references/src/arches_references/components/tree/MoveRow.vue
index 5bb90e9..e20319e 100644
--- a/arches_references/src/arches_references/components/tree/MoveRow.vue
+++ b/arches_references/src/arches_references/components/tree/MoveRow.vue
@@ -69,9 +69,6 @@ const selectedKeys = defineModel<TreeSelectionKeys>("selectedKeys", {
 });
 const movingItem = defineModel<TreeNode>("movingItem");
 const nextNewItem = defineModel<ControlledListItem>("nextNewItem");
-const newLabelFormValue = defineModel<string>("newLabelFormValue", {
-    required: true,
-});
 const newLabelCounter = ref(1);
 const shouldRefocusUpArrow = ref(false);
 const shouldRefocusDownArrow = ref(false);
@@ -83,8 +80,8 @@ watch(displayedRow, () => {
 
 const isFirstItem = (item: ControlledListItem) => {
     const siblings: TreeNode[] = item.parent_id
-        ? findNodeInTree(tree.value, item.parent_id).data.children
-        : findNodeInTree(tree.value, item.list_id).data.items;
+        ? findNodeInTree(tree.value, item.parent_id).found!.data.children
+        : findNodeInTree(tree.value, item.list_id).found!.data.items;
     if (!siblings.length) {
         throw new Error();
     }
@@ -93,8 +90,8 @@ const isFirstItem = (item: ControlledListItem) => {
 
 const isLastItem = (item: ControlledListItem) => {
     const siblings: TreeNode[] = item.parent_id
-        ? findNodeInTree(tree.value, item.parent_id).data.children
-        : findNodeInTree(tree.value, item.list_id).data.items;
+        ? findNodeInTree(tree.value, item.parent_id).found!.data.children
+        : findNodeInTree(tree.value, item.list_id).found!.data.items;
     if (!siblings.length) {
         throw new Error();
     }
@@ -113,7 +110,7 @@ const setMovingItem = (node: TreeNode) => {
             ),
         ],
         node.key,
-    );
+    ).found;
 };
 
 const addItem = (parent: TreeNode) => {
@@ -139,7 +136,6 @@ const addItem = (parent: TreeNode) => {
     };
 
     nextNewItem.value = newItem;
-    newLabelFormValue.value = "";
     newLabelCounter.value += 1;
 
     parent.children!.push(itemAsNode(newItem, selectedLanguage.value));
@@ -153,13 +149,15 @@ const addItem = (parent: TreeNode) => {
 };
 
 const reorder = async (item: ControlledListItem, up: boolean) => {
-    const list: ControlledList = findNodeInTree(tree.value, item.list_id).data;
+    const list: ControlledList = findNodeInTree(tree.value, item.list_id).found!
+        .data;
 
     let siblings: ControlledListItem[];
     if (item.parent_id) {
-        siblings = findNodeInTree(tree.value, item.parent_id).children!.map(
-            (child: TreeNode) => child.data,
-        );
+        siblings = findNodeInTree(
+            tree.value,
+            item.parent_id,
+        ).found!.children!.map((child: TreeNode) => child.data);
     } else {
         siblings = list.items;
     }
diff --git a/arches_references/src/arches_references/components/tree/TreeRow.vue b/arches_references/src/arches_references/components/tree/TreeRow.vue
index 98a8bcd..107ce86 100644
--- a/arches_references/src/arches_references/components/tree/TreeRow.vue
+++ b/arches_references/src/arches_references/components/tree/TreeRow.vue
@@ -138,7 +138,7 @@ const setParent = async (parentNode: TreeNode) => {
         siblings.push(item);
     } else {
         item.parent_id = parentNode.key;
-        list = findNodeInTree(tree.value, item.list_id).data;
+        list = findNodeInTree(tree.value, item.list_id).found!.data;
         siblings = parentNode.data.children;
         siblings.push(item);
     }
@@ -213,7 +213,11 @@ const acceptNewItemShortcutEntry = async () => {
     const parent = findNodeInTree(
         tree.value,
         newItem.parent_id ?? newItem.list_id,
-    );
+    ).found;
+    if (!parent) {
+        throw new Error();
+    }
+
     parent.children = [
         ...parent.children!.filter((child: TreeNode) => !dataIsNew(child.data)),
         itemAsNode(newItem, selectedLanguage.value),
@@ -226,6 +230,7 @@ const acceptNewItemShortcutEntry = async () => {
 
     selectedKeys.value = { [newItem.id]: true };
     setDisplayedRow(newItem);
+    newLabelFormValue.value = "";
 };
 
 const triggerAcceptNewItemShortcut = () => {
@@ -259,6 +264,7 @@ const acceptNewListShortcutEntry = async () => {
     ];
     selectedKeys.value = { [newList.id]: true };
     setDisplayedRow(newList);
+    newLabelFormValue.value = "";
 };
 </script>
 
@@ -332,7 +338,6 @@ const acceptNewListShortcutEntry = async () => {
                 v-model:selected-keys="selectedKeys"
                 v-model:moving-item="movingItem"
                 v-model:next-new-item="nextNewItem"
-                v-model:new-label-form-value="newLabelFormValue"
                 :node
                 :move-labels
             />
diff --git a/arches_references/src/arches_references/constants.ts b/arches_references/src/arches_references/constants.ts
index 1ebc673..554cd2f 100644
--- a/arches_references/src/arches_references/constants.ts
+++ b/arches_references/src/arches_references/constants.ts
@@ -26,6 +26,12 @@ export const SECONDARY = "secondary";
 export const SUCCESS = "success";
 export const DEFAULT_ERROR_TOAST_LIFE = 8000;
 
+export const routes = {
+    splash: "splash",
+    list: "list",
+    item: "item",
+};
+
 // Django model choices
 export const METADATA_CHOICES = {
     title: "title",
diff --git a/arches_references/src/arches_references/plugins/ControlledListManager.vue b/arches_references/src/arches_references/plugins/ControlledListManager.vue
index a15c439..8302f08 100644
--- a/arches_references/src/arches_references/plugins/ControlledListManager.vue
+++ b/arches_references/src/arches_references/plugins/ControlledListManager.vue
@@ -1,17 +1,5 @@
-<script setup lang="ts">
-import Toast from "primevue/toast";
-
-import ControlledListsMain from "@/arches_references/components/ControlledListsMain.vue";
-</script>
-
 <template>
-    <!-- Subtract size of arches toolbars -->
-    <div style="width: calc(100vw - 50px); height: calc(100vh - 50px)">
-        <div style="height: 100%">
-            <ControlledListsMain />
-        </div>
-    </div>
-    <Toast />
+    <RouterView />
 </template>
 
 <style scoped>
diff --git a/arches_references/src/arches_references/utils.ts b/arches_references/src/arches_references/utils.ts
index 545b1a8..31fa110 100644
--- a/arches_references/src/arches_references/utils.ts
+++ b/arches_references/src/arches_references/utils.ts
@@ -53,26 +53,36 @@ export const languageNameFromCode = (code: string) => {
     return arches.languages.find((lang: Language) => lang.code === code).name;
 };
 
-export const findNodeInTree = (tree: TreeNode[], itemId: string) => {
+export const findNodeInTree = (
+    tree: TreeNode[],
+    itemId: string,
+): {
+    found: TreeNode | undefined;
+    path: TreeNode[];
+} => {
+    const path: TreeNode[] = [];
+
     function recurse(items: TreeNode[]): TreeNode | undefined {
         for (const item of items) {
             if (item.data.id === itemId) {
                 return item;
             }
             for (const child of item.items ?? item.children) {
-                const maybeFound = recurse([child]);
-                if (maybeFound) {
-                    return maybeFound;
+                const found = recurse([child]);
+                if (found) {
+                    path.push(item);
+                    return found;
                 }
             }
         }
     }
 
-    const result = recurse(tree);
-    if (!result) {
+    const found = recurse(tree);
+    if (!found) {
         throw new Error();
     }
-    return result;
+
+    return { found, path };
 };
 
 // Shapers

From 93af026c3994541a1f1e17aa0b22de394fc1a79c Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Wed, 31 Jul 2024 10:39:05 -0400
Subject: [PATCH 05/12] Factor out `<MainSplitter>`

---
 .../components/ControlledListsMain.vue        | 51 ++-------------
 .../components/MainSplitter.vue               | 62 +++++++++++++++++++
 2 files changed, 66 insertions(+), 47 deletions(-)
 create mode 100644 arches_references/src/arches_references/components/MainSplitter.vue

diff --git a/arches_references/src/arches_references/components/ControlledListsMain.vue b/arches_references/src/arches_references/components/ControlledListsMain.vue
index be8de0c..104fda8 100644
--- a/arches_references/src/arches_references/components/ControlledListsMain.vue
+++ b/arches_references/src/arches_references/components/ControlledListsMain.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import arches from "arches";
-import { computed, provide, ref } from "vue";
+import { provide, ref } from "vue";
 import { useRouter } from "vue-router";
 
 import ConfirmDialog from "primevue/confirmdialog";
-import ProgressSpinner from "primevue/progressspinner";
-import Splitter from "primevue/splitter";
-import SplitterPanel from "primevue/splitterpanel";
 import Toast from "primevue/toast";
 
 import {
@@ -15,11 +12,9 @@ import {
     selectedLanguageKey,
 } from "@/arches_references/constants.ts";
 import { dataIsList } from "@/arches_references/utils.ts";
-import ControlledListSplash from "@/arches_references/components/misc/ControlledListSplash.vue";
-import ItemEditor from "@/arches_references/components/editor/ItemEditor.vue";
-import ListCharacteristics from "@/arches_references/components/editor/ListCharacteristics.vue";
+
 import ListHeader from "@/arches_references/components/misc/ListHeader.vue";
-import ListTree from "@/arches_references/components/tree/ListTree.vue";
+import MainSplitter from "@/arches_references/components/MainSplitter.vue";
 
 import type { Ref } from "vue";
 import type { Language } from "@/arches/types";
@@ -43,7 +38,6 @@ const setDisplayedRow = (val: Selectable | null) => {
         router.push({ name: routes.item, params: { id: val.id } });
     }
 };
-// @ts-expect-error vue-tsc doesn't like arbitrary properties here
 provide(displayedRowKey, { displayedRow, setDisplayedRow });
 
 const selectedLanguage: Ref<Language> = ref(
@@ -52,16 +46,6 @@ const selectedLanguage: Ref<Language> = ref(
     ) as Language,
 );
 provide(selectedLanguageKey, selectedLanguage);
-
-const panel = computed(() => {
-    if (!displayedRow.value) {
-        return ControlledListSplash;
-    }
-    if (dataIsList(displayedRow.value)) {
-        return ListCharacteristics;
-    }
-    return ItemEditor;
-});
 </script>
 
 <template>
@@ -69,34 +53,7 @@ const panel = computed(() => {
     <div style="width: calc(100vw - 50px); height: calc(100vh - 50px)">
         <div class="list-editor-container">
             <ListHeader />
-            <Splitter style="height: 100%">
-                <SplitterPanel
-                    :size="34"
-                    :min-size="25"
-                    style="display: flex; flex-direction: column"
-                >
-                    <Suspense>
-                        <ListTree />
-                        <template #fallback>
-                            <ProgressSpinner />
-                        </template>
-                    </Suspense>
-                </SplitterPanel>
-                <SplitterPanel
-                    :size="66"
-                    :min-size="25"
-                    :style="{
-                        margin: '1rem 0rem 4rem 1rem',
-                        overflowY: 'auto',
-                        paddingRight: '4rem',
-                    }"
-                >
-                    <component
-                        :is="panel"
-                        :key="displayedRow?.id ?? routes.splash"
-                    />
-                </SplitterPanel>
-            </Splitter>
+            <MainSplitter />
         </div>
     </div>
     <Toast />
diff --git a/arches_references/src/arches_references/components/MainSplitter.vue b/arches_references/src/arches_references/components/MainSplitter.vue
new file mode 100644
index 0000000..bb1a34d
--- /dev/null
+++ b/arches_references/src/arches_references/components/MainSplitter.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+
+import ProgressSpinner from "primevue/progressspinner";
+import Splitter from "primevue/splitter";
+import SplitterPanel from "primevue/splitterpanel";
+
+import { displayedRowKey, routes } from "@/arches_references/constants.ts";
+import { dataIsList } from "@/arches_references/utils.ts";
+import ControlledListSplash from "@/arches_references/components/misc/ControlledListSplash.vue";
+import ItemEditor from "@/arches_references/components/editor/ItemEditor.vue";
+import ListCharacteristics from "@/arches_references/components/editor/ListCharacteristics.vue";
+import ListTree from "@/arches_references/components/tree/ListTree.vue";
+
+import type { Ref } from "vue";
+import type { ControlledList } from "@/arches_references/types";
+
+const { displayedRow } = inject(displayedRowKey) as unknown as {
+    displayedRow: Ref<ControlledList>;
+};
+
+const panel = computed(() => {
+    if (!displayedRow.value) {
+        return ControlledListSplash;
+    }
+    if (dataIsList(displayedRow.value)) {
+        return ListCharacteristics;
+    }
+    return ItemEditor;
+});
+</script>
+
+<template>
+    <Splitter style="height: 100%">
+        <SplitterPanel
+            :size="34"
+            :min-size="25"
+            style="display: flex; flex-direction: column"
+        >
+            <Suspense>
+                <ListTree />
+                <template #fallback>
+                    <ProgressSpinner />
+                </template>
+            </Suspense>
+        </SplitterPanel>
+        <SplitterPanel
+            :size="66"
+            :min-size="25"
+            :style="{
+                margin: '1rem 0rem 4rem 1rem',
+                overflowY: 'auto',
+                paddingRight: '4rem',
+            }"
+        >
+            <component
+                :is="panel"
+                :key="displayedRow?.id ?? routes.splash"
+            />
+        </SplitterPanel>
+    </Splitter>
+</template>

From 69a1cfefe79e7d35ad35f2959d6c349df0d8d819 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Fri, 9 Aug 2024 16:03:11 -0400
Subject: [PATCH 06/12] Add ts-expect-error

---
 .../src/arches_references/components/ControlledListsMain.vue     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/arches_references/src/arches_references/components/ControlledListsMain.vue b/arches_references/src/arches_references/components/ControlledListsMain.vue
index 104fda8..6d00792 100644
--- a/arches_references/src/arches_references/components/ControlledListsMain.vue
+++ b/arches_references/src/arches_references/components/ControlledListsMain.vue
@@ -38,6 +38,7 @@ const setDisplayedRow = (val: Selectable | null) => {
         router.push({ name: routes.item, params: { id: val.id } });
     }
 };
+// @ts-expect-error vue-tsc doesn't like arbitrary properties here
 provide(displayedRowKey, { displayedRow, setDisplayedRow });
 
 const selectedLanguage: Ref<Language> = ref(

From 788939c16dd15942026238309fdce881bafa49c2 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Fri, 9 Aug 2024 16:09:34 -0400
Subject: [PATCH 07/12] Bump frontend deps to arches 8

---
 package-lock.json | 20 ++++++++++----------
 package.json      |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5d7e084..99e88ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,11 +7,11 @@
             "name": "arches_references",
             "license": "AGPL-3.0-only",
             "dependencies": {
-                "arches": "archesproject/arches#dev/7.6.x",
+                "arches": "archesproject/arches#dev/8.0.x",
                 "vue-router": "^4.4.0"
             },
             "devDependencies": {
-                "arches-dev-dependencies": "archesproject/arches-dev-dependencies#dev/7.6.x"
+                "arches-dev-dependencies": "archesproject/arches-dev-dependencies#dev/8.0.x"
             }
         },
         "node_modules/@ampproject/remapping": {
@@ -6029,8 +6029,8 @@
             }
         },
         "node_modules/arches": {
-            "version": "7.6.0",
-            "resolved": "git+ssh://git@github.com/archesproject/arches.git#017862edff660c4a7bb58c4d5e9c9e969ab1008e",
+            "version": "8.0.0",
+            "resolved": "git+ssh://git@github.com/archesproject/arches.git#d093f8f386ccb50a80709b13dc5802618cf262a4",
             "dependencies": {
                 "@babel/runtime": "^7.17.2",
                 "@mapbox/geojson-extent": "~1.0.1",
@@ -6098,8 +6098,8 @@
             }
         },
         "node_modules/arches-dev-dependencies": {
-            "version": "7.6.0",
-            "resolved": "git+ssh://git@github.com/archesproject/arches-dev-dependencies.git#d75232c50957237421aece034456b785ad05bb85",
+            "version": "8.0.0",
+            "resolved": "git+ssh://git@github.com/archesproject/arches-dev-dependencies.git#c5d4097acc341980e327d4cb12534a3a2765107f",
             "dev": true,
             "dependencies": {
                 "@babel/core": "^7.24.4",
@@ -16722,11 +16722,11 @@
             }
         },
         "node_modules/vue-router": {
-            "version": "4.4.0",
-            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",
-            "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
+            "version": "4.4.3",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.3.tgz",
+            "integrity": "sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==",
             "dependencies": {
-                "@vue/devtools-api": "^6.5.1"
+                "@vue/devtools-api": "^6.6.3"
             },
             "funding": {
                 "url": "https://github.com/sponsors/posva"
diff --git a/package.json b/package.json
index 1d8b7c8..8b8e1f9 100644
--- a/package.json
+++ b/package.json
@@ -18,11 +18,11 @@
         "vitest": "vitest --run --coverage"
     },
     "dependencies": {
-        "arches": "archesproject/arches#dev/7.6.x",
+        "arches": "archesproject/arches#dev/8.0.x",
         "vue-router": "^4.4.0"
     },
     "devDependencies": {
-        "arches-dev-dependencies": "archesproject/arches-dev-dependencies#dev/7.6.x"
+        "arches-dev-dependencies": "archesproject/arches-dev-dependencies#dev/8.0.x"
     },
     "nodeModulesPaths": {},
     "overrides": {

From 78dd43d4960466eb58618b2b227f29ef903548b2 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Fri, 9 Aug 2024 16:11:09 -0400
Subject: [PATCH 08/12] Fix issue links

---
 CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6c267dd..4290ee7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,10 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 -   Add compatibility with PrimeVue 4 [#9](https://github.com/archesproject/arches-references/issues/9)
--   Add front-end routing [#19](https://github.com/archesproject/arches-references/pull/19)
+-   Add front-end routing [#4](https://github.com/archesproject/arches-references/issues/4)
 
 ### Changed
--   Generate URIs when not supplied [#17](https://github.com/archesproject/arches-references/pull/17)
+-   Generate URIs when not supplied [#8](https://github.com/archesproject/arches-references/issues/8)
 
 ### Fixed
 

From b949da8dca5895a484f4277e77c8063bd184e869 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Tue, 13 Aug 2024 08:51:04 -0400
Subject: [PATCH 09/12] Move navigation up one component

---
 .../components/tree/ListTree.vue              | 86 ++++++++++++++++++-
 .../components/tree/ListTreeControls.vue      | 86 +------------------
 2 files changed, 85 insertions(+), 87 deletions(-)

diff --git a/arches_references/src/arches_references/components/tree/ListTree.vue b/arches_references/src/arches_references/components/tree/ListTree.vue
index e081807..af6ba87 100644
--- a/arches_references/src/arches_references/components/tree/ListTree.vue
+++ b/arches_references/src/arches_references/components/tree/ListTree.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { computed, inject, ref } from "vue";
+import { computed, inject, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import { useGettext } from "vue3-gettext";
 
 import Tree from "primevue/tree";
 
 import {
     displayedRowKey,
+    routes,
     selectedLanguageKey,
 } from "@/arches_references/constants.ts";
-import { bestLabel, nodeIsList } from "@/arches_references/utils.ts";
+import {
+    bestLabel,
+    findNodeInTree,
+    nodeIsList,
+} from "@/arches_references/utils.ts";
 import LetterCircle from "@/arches_references/components/misc/LetterCircle.vue";
 import ListTreeControls from "@/arches_references/components/tree/ListTreeControls.vue";
 import TreeRow from "@/arches_references/components/tree/TreeRow.vue";
 
 import type { ComponentPublicInstance, Ref } from "vue";
+import type { RouteLocationNormalizedLoadedGeneric } from "vue-router";
 import type { TreePassThroughMethodOptions } from "primevue/tree";
 import type { TreeExpandedKeys, TreeSelectionKeys } from "primevue/tree";
 import type { TreeNode } from "primevue/treenode";
@@ -57,6 +64,81 @@ const { setDisplayedRow } = inject(displayedRowKey) as unknown as {
     setDisplayedRow: RowSetter;
 };
 
+const route = useRoute();
+watch(
+    [
+        () => {
+            return { ...route };
+        },
+    ],
+    ([newRoute]) => {
+        navigate(newRoute);
+    },
+);
+const navigate = (newRoute: RouteLocationNormalizedLoadedGeneric) => {
+    switch (newRoute.name) {
+        case routes.splash:
+            setDisplayedRow(null);
+            expandedKeys.value = {};
+            selectedKeys.value = {};
+            break;
+        case routes.list: {
+            if (!tree.value.length) {
+                return;
+            }
+            const list = tree.value.find(
+                (node) => node.data.id === newRoute.params.id,
+            );
+            if (list) {
+                setDisplayedRow(list.data);
+                expandedKeys.value = {
+                    ...expandedKeys.value,
+                    [list.data.id]: true,
+                };
+                selectedKeys.value = { [list.data.id]: true };
+            } else {
+                setDisplayedRow(null);
+            }
+            break;
+        }
+        case routes.item: {
+            if (!tree.value.length) {
+                return;
+            }
+            const { found, path } = findNodeInTree(
+                tree.value,
+                newRoute.params.id as string,
+            );
+            if (found) {
+                setDisplayedRow(found.data);
+                const itemsToExpandIds = path.map(
+                    (itemInPath: TreeNode) => itemInPath.key,
+                );
+                expandedKeys.value = {
+                    ...expandedKeys.value,
+                    ...Object.fromEntries(
+                        [
+                            found.data.controlled_list_id,
+                            ...itemsToExpandIds,
+                        ].map((x) => [x, true]),
+                    ),
+                };
+                selectedKeys.value = { [found.data.id]: true };
+            }
+            break;
+        }
+    }
+};
+
+// Navigate on initial load of the tree.
+watch(
+    tree,
+    () => {
+        navigate(route);
+    },
+    { once: true },
+);
+
 const updateSelectedAndExpanded = (node: TreeNode) => {
     if (isMultiSelecting.value || movingItem.value?.key) {
         return;
diff --git a/arches_references/src/arches_references/components/tree/ListTreeControls.vue b/arches_references/src/arches_references/components/tree/ListTreeControls.vue
index d469f5c..f74ac99 100644
--- a/arches_references/src/arches_references/components/tree/ListTreeControls.vue
+++ b/arches_references/src/arches_references/components/tree/ListTreeControls.vue
@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import { inject, watch } from "vue";
-import { useRoute } from "vue-router";
-
-import { displayedRowKey, routes } from "@/arches_references/constants.ts";
-import { findNodeInTree } from "@/arches_references/utils.ts";
 import ActionBanner from "@/arches_references/components/tree/ActionBanner.vue";
 import AddDeleteControls from "@/arches_references/components/tree/AddDeleteControls.vue";
 import PresentationControls from "@/arches_references/components/tree/PresentationControls.vue";
 
-import type { RouteLocationNormalizedLoadedGeneric } from "vue-router";
 import type { TreeExpandedKeys, TreeSelectionKeys } from "primevue/tree";
 import type { TreeNode } from "primevue/treenode";
-import type { ControlledList, RowSetter } from "@/arches_references/types";
+import type { ControlledList } from "@/arches_references/types";
 
 const controlledListItemsTree = defineModel<TreeNode[]>("tree", {
     required: true,
@@ -32,75 +26,6 @@ const newListFormValue = defineModel<string>("newListFormValue", {
     required: true,
 });
 
-const { setDisplayedRow } = inject(displayedRowKey) as unknown as {
-    setDisplayedRow: RowSetter;
-};
-const route = useRoute();
-watch(
-    [
-        () => {
-            return { ...route };
-        },
-    ],
-    ([newRoute]) => {
-        navigate(newRoute);
-    },
-);
-const navigate = (newRoute: RouteLocationNormalizedLoadedGeneric) => {
-    switch (newRoute.name) {
-        case routes.splash:
-            setDisplayedRow(null);
-            expandedKeys.value = {};
-            selectedKeys.value = {};
-            break;
-        case routes.list: {
-            if (!controlledListItemsTree.value.length) {
-                return;
-            }
-            const list = controlledListItemsTree.value.find(
-                (node) => node.data.id === newRoute.params.id,
-            );
-            if (list) {
-                setDisplayedRow(list.data);
-                expandedKeys.value = {
-                    ...expandedKeys.value,
-                    [list.data.id]: true,
-                };
-                selectedKeys.value = { [list.data.id]: true };
-            } else {
-                setDisplayedRow(null);
-            }
-            break;
-        }
-        case routes.item: {
-            if (!controlledListItemsTree.value.length) {
-                return;
-            }
-            const { found, path } = findNodeInTree(
-                controlledListItemsTree.value,
-                newRoute.params.id as string,
-            );
-            if (found) {
-                setDisplayedRow(found.data);
-                const itemsToExpandIds = path.map(
-                    (itemInPath: TreeNode) => itemInPath.key,
-                );
-                expandedKeys.value = {
-                    ...expandedKeys.value,
-                    ...Object.fromEntries(
-                        [
-                            found.data.controlled_list_id,
-                            ...itemsToExpandIds,
-                        ].map((x) => [x, true]),
-                    ),
-                };
-                selectedKeys.value = { [found.data.id]: true };
-            }
-            break;
-        }
-    }
-};
-
 const expandAll = () => {
     for (const node of controlledListItemsTree.value) {
         expandNode(node);
@@ -120,15 +45,6 @@ const expandNode = (node: TreeNode) => {
         }
     }
 };
-
-// Navigate on initial load of the tree.
-watch(
-    controlledListItemsTree,
-    () => {
-        navigate(route);
-    },
-    { once: true },
-);
 </script>
 
 <template>

From 7d6e7529b6e9dabfe9f6a01c13e440a09f7acb5b Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Tue, 13 Aug 2024 09:13:23 -0400
Subject: [PATCH 10/12] Move deep CSS selectors for headers

---
 .../components/ControlledListsMain.vue           | 14 ++++++++++++++
 .../plugins/ControlledListManager.vue            | 16 ----------------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/arches_references/src/arches_references/components/ControlledListsMain.vue b/arches_references/src/arches_references/components/ControlledListsMain.vue
index 6d00792..a98e8fd 100644
--- a/arches_references/src/arches_references/components/ControlledListsMain.vue
+++ b/arches_references/src/arches_references/components/ControlledListsMain.vue
@@ -89,4 +89,18 @@ provide(selectedLanguageKey, selectedLanguage);
     flex-direction: column;
     height: 100%;
 }
+
+:deep(h1, h5, h6) {
+    font-weight: 600;
+}
+
+:deep(h2, h3) {
+    font-weight: 600;
+    font-size: 1.6rem;
+}
+
+:deep(h4) {
+    font-weight: 600;
+    font-size: 1.33rem;
+}
 </style>
diff --git a/arches_references/src/arches_references/plugins/ControlledListManager.vue b/arches_references/src/arches_references/plugins/ControlledListManager.vue
index 8302f08..efacaa2 100644
--- a/arches_references/src/arches_references/plugins/ControlledListManager.vue
+++ b/arches_references/src/arches_references/plugins/ControlledListManager.vue
@@ -1,19 +1,3 @@
 <template>
     <RouterView />
 </template>
-
-<style scoped>
-:deep(h1, h5, h6) {
-    font-weight: 600;
-}
-
-:deep(h2, h3) {
-    font-weight: 600;
-    font-size: 1.6rem;
-}
-
-:deep(h4) {
-    font-weight: 600;
-    font-size: 1.33rem;
-}
-</style>

From d8454568054217d83cbc652354765328fe8360bc Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Mon, 19 Aug 2024 17:40:57 -0400
Subject: [PATCH 11/12] Factor out routes.ts

---
 .../plugins/controlled-list-manager.js        |  8 +-----
 .../components/ControlledListsMain.vue        |  8 +++---
 .../components/MainSplitter.vue               |  5 ++--
 .../components/tree/ListTree.vue              |  8 +++---
 .../src/arches_references/constants.ts        |  6 -----
 .../src/arches_references/routes.ts           | 25 +++++++++++++++++++
 6 files changed, 37 insertions(+), 23 deletions(-)
 create mode 100644 arches_references/src/arches_references/routes.ts

diff --git a/arches_references/media/js/views/components/plugins/controlled-list-manager.js b/arches_references/media/js/views/components/plugins/controlled-list-manager.js
index f6b5c16..3823d50 100644
--- a/arches_references/media/js/views/components/plugins/controlled-list-manager.js
+++ b/arches_references/media/js/views/components/plugins/controlled-list-manager.js
@@ -1,18 +1,12 @@
 import ko from 'knockout';
 
+import { routes } from '@/arches_references/routes.ts';
 import ControlledListManager from '@/arches_references/plugins/ControlledListManager.vue';
-import ControlledListsMain from '@/arches_references/components/ControlledListsMain.vue';
 import createVueApplication from 'utils/create-vue-application';
 import ControlledListManagerTemplate from 'templates/views/components/plugins/controlled-list-manager.htm';
 
 import { createRouter, createWebHistory } from 'vue-router';
 
-const routes = [
-  { path: '/plugins/controlled-list-manager', name: 'splash', component: ControlledListsMain },
-  { path: '/plugins/controlled-list-manager/list/:id', name: 'list', component: ControlledListsMain },
-  { path: '/plugins/controlled-list-manager/item/:id', name: 'item', component: ControlledListsMain },
-];
-
 const router = createRouter({
   history: createWebHistory(),
   routes,
diff --git a/arches_references/src/arches_references/components/ControlledListsMain.vue b/arches_references/src/arches_references/components/ControlledListsMain.vue
index a98e8fd..a18ea65 100644
--- a/arches_references/src/arches_references/components/ControlledListsMain.vue
+++ b/arches_references/src/arches_references/components/ControlledListsMain.vue
@@ -8,9 +8,9 @@ import Toast from "primevue/toast";
 
 import {
     displayedRowKey,
-    routes,
     selectedLanguageKey,
 } from "@/arches_references/constants.ts";
+import { routeNames } from "@/arches_references/routes.ts";
 import { dataIsList } from "@/arches_references/utils.ts";
 
 import ListHeader from "@/arches_references/components/misc/ListHeader.vue";
@@ -26,16 +26,16 @@ const displayedRow: Ref<Selectable | null> = ref(null);
 const setDisplayedRow = (val: Selectable | null) => {
     displayedRow.value = val;
     if (val === null) {
-        router.push({ name: routes.splash });
+        router.push({ name: routeNames.splash });
         return;
     }
     if (typeof val.id === "number") {
         return;
     }
     if (dataIsList(val)) {
-        router.push({ name: routes.list, params: { id: val.id } });
+        router.push({ name: routeNames.list, params: { id: val.id } });
     } else {
-        router.push({ name: routes.item, params: { id: val.id } });
+        router.push({ name: routeNames.item, params: { id: val.id } });
     }
 };
 // @ts-expect-error vue-tsc doesn't like arbitrary properties here
diff --git a/arches_references/src/arches_references/components/MainSplitter.vue b/arches_references/src/arches_references/components/MainSplitter.vue
index bb1a34d..f36822c 100644
--- a/arches_references/src/arches_references/components/MainSplitter.vue
+++ b/arches_references/src/arches_references/components/MainSplitter.vue
@@ -5,7 +5,8 @@ import ProgressSpinner from "primevue/progressspinner";
 import Splitter from "primevue/splitter";
 import SplitterPanel from "primevue/splitterpanel";
 
-import { displayedRowKey, routes } from "@/arches_references/constants.ts";
+import { displayedRowKey } from "@/arches_references/constants.ts";
+import { routeNames } from "@/arches_references/routes.ts";
 import { dataIsList } from "@/arches_references/utils.ts";
 import ControlledListSplash from "@/arches_references/components/misc/ControlledListSplash.vue";
 import ItemEditor from "@/arches_references/components/editor/ItemEditor.vue";
@@ -55,7 +56,7 @@ const panel = computed(() => {
         >
             <component
                 :is="panel"
-                :key="displayedRow?.id ?? routes.splash"
+                :key="displayedRow?.id ?? routeNames.splash"
             />
         </SplitterPanel>
     </Splitter>
diff --git a/arches_references/src/arches_references/components/tree/ListTree.vue b/arches_references/src/arches_references/components/tree/ListTree.vue
index af6ba87..68f2004 100644
--- a/arches_references/src/arches_references/components/tree/ListTree.vue
+++ b/arches_references/src/arches_references/components/tree/ListTree.vue
@@ -7,9 +7,9 @@ import Tree from "primevue/tree";
 
 import {
     displayedRowKey,
-    routes,
     selectedLanguageKey,
 } from "@/arches_references/constants.ts";
+import { routeNames } from "@/arches_references/routes.ts";
 import {
     bestLabel,
     findNodeInTree,
@@ -77,12 +77,12 @@ watch(
 );
 const navigate = (newRoute: RouteLocationNormalizedLoadedGeneric) => {
     switch (newRoute.name) {
-        case routes.splash:
+        case routeNames.splash:
             setDisplayedRow(null);
             expandedKeys.value = {};
             selectedKeys.value = {};
             break;
-        case routes.list: {
+        case routeNames.list: {
             if (!tree.value.length) {
                 return;
             }
@@ -101,7 +101,7 @@ const navigate = (newRoute: RouteLocationNormalizedLoadedGeneric) => {
             }
             break;
         }
-        case routes.item: {
+        case routeNames.item: {
             if (!tree.value.length) {
                 return;
             }
diff --git a/arches_references/src/arches_references/constants.ts b/arches_references/src/arches_references/constants.ts
index 554cd2f..1ebc673 100644
--- a/arches_references/src/arches_references/constants.ts
+++ b/arches_references/src/arches_references/constants.ts
@@ -26,12 +26,6 @@ export const SECONDARY = "secondary";
 export const SUCCESS = "success";
 export const DEFAULT_ERROR_TOAST_LIFE = 8000;
 
-export const routes = {
-    splash: "splash",
-    list: "list",
-    item: "item",
-};
-
 // Django model choices
 export const METADATA_CHOICES = {
     title: "title",
diff --git a/arches_references/src/arches_references/routes.ts b/arches_references/src/arches_references/routes.ts
new file mode 100644
index 0000000..113a120
--- /dev/null
+++ b/arches_references/src/arches_references/routes.ts
@@ -0,0 +1,25 @@
+import ControlledListsMain from "@/arches_references/components/ControlledListsMain.vue";
+
+export const routes = [
+    {
+        path: "/plugins/controlled-list-manager",
+        name: "splash",
+        component: ControlledListsMain,
+    },
+    {
+        path: "/plugins/controlled-list-manager/list/:id",
+        name: "list",
+        component: ControlledListsMain,
+    },
+    {
+        path: "/plugins/controlled-list-manager/item/:id",
+        name: "item",
+        component: ControlledListsMain,
+    },
+];
+
+export const routeNames = {
+    splash: "splash",
+    list: "list",
+    item: "item",
+};

From 78681c69a10c7ddc98c5b9a67f2904ca20b3c847 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Mon, 19 Aug 2024 17:46:33 -0400
Subject: [PATCH 12/12] Group watch() together

---
 .../components/tree/ListTree.vue              | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/arches_references/src/arches_references/components/tree/ListTree.vue b/arches_references/src/arches_references/components/tree/ListTree.vue
index 68f2004..6d4d909 100644
--- a/arches_references/src/arches_references/components/tree/ListTree.vue
+++ b/arches_references/src/arches_references/components/tree/ListTree.vue
@@ -65,16 +65,7 @@ const { setDisplayedRow } = inject(displayedRowKey) as unknown as {
 };
 
 const route = useRoute();
-watch(
-    [
-        () => {
-            return { ...route };
-        },
-    ],
-    ([newRoute]) => {
-        navigate(newRoute);
-    },
-);
+
 const navigate = (newRoute: RouteLocationNormalizedLoadedGeneric) => {
     switch (newRoute.name) {
         case routeNames.splash:
@@ -130,6 +121,18 @@ const navigate = (newRoute: RouteLocationNormalizedLoadedGeneric) => {
     }
 };
 
+// React to route changes.
+watch(
+    [
+        () => {
+            return { ...route };
+        },
+    ],
+    ([newRoute]) => {
+        navigate(newRoute);
+    },
+);
+
 // Navigate on initial load of the tree.
 watch(
     tree,