Cache project group name; use undefined total

Add sessionStorage caching for selected project group (stores {id,name}) and wire ProjectGroupPicker to read/write the cached name so the UI can show a name immediately even when the group isn't on page 1. Remove the separate nameModel/v-model:name usage in dashboard and consolidate storage to the single JSON key. Change getMyProjectGroups to use an optional total (undefined instead of null) and update callers accordingly. Other updates: persist cached name on selection, simplify input open logic, switch ProjectGroupPicker styles to SCSS and theme variables, clear the removed storage key from auth sign-out, and add dataset validation/error display in workspace/create/tdei.vue when dataset metadata is incomplete.

Author: shweta2101

components/ProjectGroupPicker.vue

@@ -18,7 +18,7 @@
     >
       <div class="pg-header">
         <span v-if="projectGroups.length > 0" class="pg-count">
-          <template v-if="totalCount !== null">
+          <template v-if="totalCount !== undefined">
             Showing first {{ projectGroups.length }} of {{ totalCount }} project groups
             <span v-if="hasMore && !loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
           </template>
@@ -60,6 +60,29 @@
   </div>
 </template>
 
+<script lang="ts">
+const STORAGE_KEY_PROJECT_GROUP = 'tdei-selected-project-group'
+
+function loadCachedName(id: string): string | undefined {
+  if (typeof window === 'undefined') return undefined
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP)
+    if (!raw) return undefined
+    const stored = JSON.parse(raw) as { id: string; name: string }
+    return stored.id === id ? stored.name : undefined
+  } catch {
+    return undefined
+  }
+}
+
+function persistCachedName(id: string, name: string) {
+  if (typeof window === 'undefined') return
+  try {
+    sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP, JSON.stringify({ id, name }))
+  } catch { /* silently fail */ }
+}
+</script>
+
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { tdeiUserClient } from '~/services/index'
@@ -69,13 +92,12 @@ const props = withDefaults(defineProps<{ disabled?: boolean }>(), {
 })
 
 const model = defineModel({ required: true })
-const nameModel = defineModel('name', { default: '' })
 const searchText = ref('')
 const isOpen = ref(false)
 const projectGroups = ref<{ id: string; name: string }[]>([])
 const selectedGroupName = ref('')
 const loading = ref(false)
-const totalCount = ref<number | null>(null)
+const totalCount = ref<number | undefined>(undefined)
 const pickerRef = ref<HTMLElement | null>(null)
 const listRef = ref<HTMLElement | null>(null)
 const activeIndex = ref(-1)
@@ -97,7 +119,7 @@ const loadGroups = async (reset = false) => {
     hasMore.value = true
     projectGroups.value = []
     activeIndex.value = -1
-    totalCount.value = null
+    totalCount.value = undefined
   }
   if (!hasMore.value) return
 
@@ -113,8 +135,10 @@ const loadGroups = async (reset = false) => {
     }
 
     const { items: newGroups, total } = await tdeiUserClient.getMyProjectGroups(pageNo, query, pageSize)
-    if (total !== null) totalCount.value = total
+    if (total !== undefined) totalCount.value = total
     projectGroups.value.push(...newGroups)
+    const selected = newGroups.find(g => g.id === model.value)
+    if (selected) persistCachedName(selected.id, selected.name)
 
     if (newGroups.length < pageSize) {
       hasMore.value = false
@@ -146,9 +170,7 @@ const onInputClick = () => {
 }
 
 const onInput = () => {
-  if (!isOpen.value) {
-    isOpen.value = true
-  }
+  isOpen.value = true
   clearTimeout(timeoutId)
   timeoutId = setTimeout(() => {
     loadGroups(true)
@@ -160,7 +182,6 @@ watch(model, (newId) => {
   if (pg && !isOpen.value) {
     searchText.value = pg.name
     selectedGroupName.value = pg.name
-    nameModel.value = pg.name
   }
 })
 
@@ -178,7 +199,7 @@ const selectGroup = (id: string) => {
   if (pg) {
     searchText.value = pg.name
     selectedGroupName.value = pg.name
-    nameModel.value = pg.name
+    persistCachedName(pg.id, pg.name)
   }
 }
 
@@ -249,8 +270,9 @@ const onKeydown = (e: KeyboardEvent) => {
 }
 
 const applyCachedName = () => {
-  searchText.value = nameModel.value
-  selectedGroupName.value = nameModel.value
+  const cached = loadCachedName(model.value as string) ?? ''
+  searchText.value = cached
+  selectedGroupName.value = cached
 }
 
 const handleClickOutside = (event: MouseEvent) => {
@@ -269,7 +291,7 @@ onMounted(async () => {
   document.addEventListener('mousedown', handleClickOutside)
 
   // Show cached name immediately before the API call completes
-  if (model.value && nameModel.value) {
+  if (model.value && loadCachedName(model.value as string)) {
     applyCachedName()
   }
 
@@ -280,7 +302,7 @@ onMounted(async () => {
     if (selected) {
       searchText.value = selected.name
       selectedGroupName.value = selected.name
-    } else if (model.value && nameModel.value) {
+    } else if (model.value && loadCachedName(model.value as string)) {
       // Group is beyond page 1 — use the cached name for display
       applyCachedName()
     } else if (model.value) {
@@ -291,7 +313,6 @@ onMounted(async () => {
         if (found) {
           searchText.value = found.name
           selectedGroupName.value = found.name
-          nameModel.value = found.name
           break
         }
       }
@@ -300,7 +321,6 @@ onMounted(async () => {
       model.value = first.id
       searchText.value = first.name
       selectedGroupName.value = first.name
-      nameModel.value = first.name
     }
   }
 })
@@ -311,7 +331,9 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "assets/scss/theme.scss";
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -328,17 +350,17 @@ onUnmounted(() => {
   align-items: center;
   gap: 8px;
   padding: 5px 12px;
-  border-bottom: 1px solid #e9ecef;
-  background: #f8f9fa;
+  border-bottom: 1px solid $gray-200;
+  background: $gray-100;
   min-height: 30px;
 }
 .pg-count {
   font-size: 0.74rem;
-  color: #6c757d;
+  color: $gray-600;
   flex: 1;
 }
 .pg-scroll-hint {
-  color: #0d6efd;
+  color: $primary;
 }
 .pg-list-wrap {
   position: relative;

pages/dashboard.vue

@@ -4,7 +4,7 @@
         <h2 class="visually-hidden">My Workspaces</h2>
 
         <label for="ws_project_group_picker">Project Group</label>
-        <project-group-picker v-model="currentProjectGroup" v-model:name="currentProjectGroupName" id="ws_project_group_picker" />
+        <project-group-picker v-model="currentProjectGroup" id="ws_project_group_picker" />
 
         <nuxt-link class="btn btn-primary flex-shrink-0" to="/workspace/create">
           <app-icon variant="add" size="24" />
@@ -45,37 +45,19 @@
 
 <script lang="ts">
 const STORAGE_KEY_PROJECT_GROUP = 'tdei-selected-project-group';
-const STORAGE_KEY_PROJECT_GROUP_NAME = 'tdei-selected-project-group-name';
 const STORAGE_KEY_WORKSPACE = 'tdei-selected-workspace';
 
 function getLastProjectGroupId(): string | null {
   if (typeof window === 'undefined') return null;
   try {
-    return sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP);
+    const raw = sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP);
+    if (!raw) return null;
+    const stored = JSON.parse(raw) as { id: string; name: string };
+    return stored.id ?? null;
   } catch {
     return null;
   }
 }
-function setLastProjectGroupId(id: string) {
-  if (typeof window === 'undefined') return;
-  try {
-    sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP, id);
-  } catch { /* silently fail */ }
-}
-function getLastProjectGroupName(): string | null {
-  if (typeof window === 'undefined') return null;
-  try {
-    return sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP_NAME);
-  } catch {
-    return null;
-  }
-}
-function setLastProjectGroupName(name: string) {
-  if (typeof window === 'undefined') return;
-  try {
-    sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP_NAME, name);
-  } catch { /* silently fail */ }
-}
 function getLastWorkspaceId(): number | null {
   if (typeof window === 'undefined') return null;
   try {
@@ -103,7 +85,6 @@ const workspaces = (await workspacesClient.getMyWorkspaces()).sort(compareWorksp
 const workspacesByProjectGroup = Map.groupBy(workspaces, w => w.tdeiProjectGroupId);
 
 const currentProjectGroup = ref(getLastProjectGroupId());
-const currentProjectGroupName = ref(getLastProjectGroupName());
 const currentWorkspace = ref({});
 const currentWorkspaces = computed(() => workspacesByProjectGroup.get(currentProjectGroup.value));
 
@@ -115,8 +96,6 @@ for (const w of workspaces) {
 
 onMounted(() => {
   watch(currentWorkspace, (val) => { if (val?.id) setLastWorkspaceId(val.id) });
-  watch(currentProjectGroup, (val) => { if (val) setLastProjectGroupId(val) });
-  watch(currentProjectGroupName, (val) => { if (val) setLastProjectGroupName(val) });
   watch(currentWorkspaces, onCurrentWorkspacesChange);
 
   autoSelectPreferredView();
@@ -186,21 +165,19 @@ async function selectWorkspace(workspace) {
   }
 
   .project-group-picker {
-    width: auto;
-    min-width: 300px;
-    border-color: transparent;
-    border-left-color: $border-color;
-    margin-right: auto;
-
-    &:hover {
-      border-color: $border-color;
-    }
+    width: 100%;
+    border-color: $border-color;
+    margin-right: 1rem;
 
-    @include media-breakpoint-down(md) {
-      & {
-        width: 100%;
+    @include media-breakpoint-up(md) {
+      width: auto;
+      min-width: 300px;
+      border-color: transparent;
+      border-left-color: $border-color;
+      margin-right: auto;
+
+      &:hover {
         border-color: $border-color;
-        margin-right: 1rem;
       }
     }
   }

pages/workspace/create/tdei.vue

@@ -46,6 +46,9 @@
                 required
               />
             </label>
+            <div v-if="datasetError" class="alert alert-danger py-2" role="alert">
+              {{ datasetError }}
+            </div>
           </div><!-- .card-body -->
 
           <div class="card-footer">
@@ -162,16 +165,20 @@ const record = reactive<Record<string, any>>({})
 const map = ref<any>({})
 const workspaceTitle = ref('')
 const projectGroupId = ref<string | null>(null)
+const datasetError = ref<string | null>(null)
 
 watch(tdeiRecordId, val => getDatasetInfo(val))
 
 const complete = computed(() =>
   workspaceTitle.value.trim().length > 0
   && projectGroupId.value !== null
-  && tdeiRecordId.value !== null,
+  && tdeiRecordId.value !== null
+  && datasetError.value === null,
 )
 
 async function getDatasetInfo(id: string | null) {
+  datasetError.value = null
+
   if (id === null) {
     for (const prop in record) {
       record[prop] = ''
@@ -197,9 +204,14 @@ async function getDatasetInfo(id: string | null) {
 
   await nextTick()
 
+  if (!record.project_group?.tdei_project_group_id || !record.tdei_dataset_id) {
+    datasetError.value = 'The selected dataset returned incomplete data. Please try a different dataset or contact support.'
+    return
+  }
+
   workspaceTitle.value = record.metadata?.dataset_detail?.name ?? ''
-  projectGroupId.value = record.project_group?.tdei_project_group_id ?? null
-  tdeiRecordId.value = record.tdei_dataset_id ?? null
+  projectGroupId.value = record.project_group.tdei_project_group_id
+  tdeiRecordId.value = record.tdei_dataset_id
 
   initMap()
 }

services/tdei.ts

@@ -124,7 +124,6 @@ export class TdeiAuthStore {
 
     localStorage.removeItem(this._storageKey);
     sessionStorage.removeItem('tdei-selected-project-group');
-    sessionStorage.removeItem('tdei-selected-project-group-name');
     sessionStorage.removeItem('tdei-selected-workspace');
   }
 }
@@ -460,7 +459,7 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     return new TdeiClient(this._baseUrl, this.#auth, signal ?? this._abortSignal);
   }
 
-  async getMyProjectGroups(pageNo: number = 1, searchText: string = '', pageSize: number = 10, sortBy: 'name' | 'created_at' = 'name'): Promise<{ items: TdeiProjectGroup[], total: number | null }> {
+  async getMyProjectGroups(pageNo: number = 1, searchText: string = '', pageSize: number = 10, sortBy: 'name' | 'created_at' = 'name'): Promise<{ items: TdeiProjectGroup[], total?: number }> {
     let url = `project-group-roles/${this.#auth.subject}?page_size=${pageSize}&page_no=${pageNo}&sort_by=${sortBy}`;
     if (searchText) {
       url += `&searchText=${encodeURIComponent(searchText)}`;
@@ -471,12 +470,12 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     try {
       const totalHeader = response.headers.get('X-Total-Count');
       const totalParsed = totalHeader !== null ? parseInt(totalHeader, 10) : NaN;
-      const total = Number.isNaN(totalParsed) ? null : totalParsed;
+      const total = Number.isNaN(totalParsed) ? undefined : totalParsed;
       const items = (await response.json() as TdeiProjectGroupApiResponse[]) ?? [];
       return { items: items.map(p => ({ id: p.tdei_project_group_id, name: p.project_group_name })), total };
     } catch (e) {
       console.warn('getMyProjectGroups: failed to parse API response', e);
-      return { items: [], total: null };
+      return { items: [] };
     }
   }