Add focusing mechanism

archesproject · Mar 12, 2024 · 6161702 · 6161702
1 parent df7955f
commit 6161702
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 13 deletions.
diff --git a/arches_rdm/src/components/ConceptTree.vue b/arches_rdm/src/components/ConceptTree.vue
@@ -38,6 +38,7 @@ const schemes: Ref<Scheme[]> = ref([]);
 const selectedLanguage: Ref<Language> = ref(ENGLISH);
 
 const selectedNode: Ref<TreeNode> = defineModel({});
+const focusedNode: Ref<TreeNode> = ref({});
 
 const toast = useToast();
 const { $gettext } = useGettext();
@@ -47,6 +48,8 @@ const ERROR = "error";
 const SCHEME_LABEL = $gettext("Scheme");
 const GUIDE_LABEL = $gettext("Guide Item");
 const INDEXABLE_LABEL = $gettext("Indexable Item");
+const FOCUS = $gettext("Focus");
+const UNFOCUS = $gettext("Unfocus");
 
 import { DJANGO_HOST } from "@/main";
 
@@ -71,30 +74,40 @@ const onNodeExpand = (node: TreeNode) => {
     });
 };
 
-function conceptAsNode(concept: Concept): TreeNode {
-    return {
+function conceptAsNode(concept: Concept, focusedNode: TreeNode): TreeNode {
+    const node = {
         key: concept.id,
         label: bestLabel(concept, 'en').value,
         children: concept.narrower.map(child => conceptAsNode(child)),
         data: concept,
         icon: concept.guide ? "fa fa-folder-open" : "fa fa-hand-pointer-o",
         iconLabel: concept.guide ? GUIDE_LABEL : INDEXABLE_LABEL,
     };
+    const focalNodeIdx = node.children.findIndex(child => child.data.id === focusedNode?.data?.id);
+    if (focalNodeIdx > -1) {
+        node.children = [node.children[focalNodeIdx]];
+    }
+    return node;
 }
 
-function schemeAsNode(scheme: Scheme): TreeNode {
-    return {
+function schemeAsNode(scheme: Scheme, focusedNode: TreeNode): TreeNode {
+    const node = {
         key: scheme.id,
         label: bestLabel(scheme, 'en').value,
-        children: scheme.top_concepts.map(top => conceptAsNode(top)),
+        children: scheme.top_concepts.map(top => conceptAsNode(top, focusedNode)),
         data: scheme,
         icon: "fa fa-list",
         iconLabel: SCHEME_LABEL,
     };
+    const focalNodeIdx = node.children.findIndex(child => child.data.id === focusedNode?.data?.id);
+    if (focalNodeIdx > -1) {
+        node.children = [node.children[focalNodeIdx]];
+    }
+    return node;
 }
 
 const conceptTree = computed(() => {
-    return schemes.value.map((scheme: Scheme) => schemeAsNode(scheme));
+    return schemes.value.map((scheme: Scheme) => schemeAsNode(scheme, focusedNode.value));
 });
 
 const expandAll = () => {
@@ -117,6 +130,30 @@ const expandNode = (node: TreeNode) => {
     }
 };
 
+const iconForFocusToggle = (node: TreeNode) => {
+    return (
+        focusedNode.value.data?.id === node.data.id
+        ? 'fa fa-search-minus'
+        : 'fa fa-bullseye'
+    );
+};
+
+const labelForFocusToggle = (node: TreeNode) => {
+    return (
+        focusedNode.value.data?.id === node.data.id
+        ? UNFOCUS
+        : FOCUS
+    );
+};
+
+const toggleFocus = (node: TreeNode) => {
+    if (focusedNode.value.data?.id === node.data.id) {
+        focusedNode.value = {};
+    } else {
+        focusedNode.value = node;
+    }
+};
+
 const fetchSchemes = async () => {
     let errorText;
     const url = new URL("concept_trees/", DJANGO_HOST);
@@ -214,8 +251,16 @@ await fetchSchemes();
         @nodeSelect="onSelect"
     >
         <template #default="slotProps">
-            <span v-html="highlightedLabel(slotProps.node.label)">
-            </span>
+            <span v-html="highlightedLabel(slotProps.node.label)"></span>
+            <i
+                v-tooltip="labelForFocusToggle(slotProps.node)"
+                role="button"
+                :class="iconForFocusToggle(slotProps.node)"
+                :aria-label="labelForFocusToggle(slotProps.node)"
+                tabindex="0"
+                @click="toggleFocus(slotProps.node)"
+                @keyup.enter="toggleFocus(slotProps.node)"
+            />
         </template>
     </Tree>
     <ScrollTop/>
@@ -244,4 +289,9 @@ await fetchSchemes();
     font-weight: 200;
     text-wrap: nowrap;
 }
+
+i {
+    margin-left: 0.25rem;
+    padding: 0.5rem;
+}
 </style>
diff --git a/arches_rdm/src/components/HomePage.vue b/arches_rdm/src/components/HomePage.vue
@@ -27,10 +27,7 @@ const signOut = () => {
     <main>
         <div class="header">
             <h1>{{ $gettext('LINGO') }}</h1>
-            <Button
-                @click="signOut"
-                @keyup:enter="signOut"
-            >
+            <Button @click="signOut">
                 {{ $gettext('Sign out') }}
             </Button>
         </div>

diff --git a/arches_rdm/src/components/LoginPage.vue b/arches_rdm/src/components/LoginPage.vue
@@ -83,7 +83,6 @@ const submit = async () => {
             type="button"
             :label="$gettext('Sign in')"
             @click="submit"
-            @keyup:enter="submit"
         />
     </form>
 </template>

diff --git a/arches_rdm/src/main.ts b/arches_rdm/src/main.ts
@@ -5,6 +5,7 @@ import PrimeVue from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
 import DialogService from 'primevue/dialogservice';
 import ToastService from 'primevue/toastservice';
+import Tooltip from 'primevue/tooltip';
 
 import LingoApp from '@/App.vue';
 
@@ -31,5 +32,6 @@ fetch(new URL('/api/get_frontend_i18n_data', DJANGO_HOST)).then(resp => {
         .use(ConfirmationService)
         .use(DialogService)
         .use(ToastService)
+        .directive('tooltip', Tooltip)
         .mount('#app');
 });