From d7057d064247c237f74277be3d1eeb3e6dc57ee7 Mon Sep 17 00:00:00 2001
From: Brandon Davis <brandon.davis@kitware.com>
Date: Mon, 22 Feb 2021 18:33:16 -0500
Subject: [PATCH 1/2] Add Button to expand recents.  Simplify localStorage.

---
 .../desktop/frontend/components/Recent.vue    | 68 +++++++++++++++++--
 .../desktop/frontend/store/dataset.ts         | 21 ++++--
 .../platform/desktop/frontend/store/index.ts  |  8 +--
 3 files changed, 81 insertions(+), 16 deletions(-)

diff --git a/client/platform/desktop/frontend/components/Recent.vue b/client/platform/desktop/frontend/components/Recent.vue
index e47f5d3b3..f3a063776 100644
--- a/client/platform/desktop/frontend/components/Recent.vue
+++ b/client/platform/desktop/frontend/components/Recent.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { join } from 'path';
-import { defineComponent, ref } from '@vue/composition-api';
+import { computed, defineComponent, ref } from '@vue/composition-api';
 
 import { DatasetType } from 'dive-common/apispec';
 
@@ -17,6 +17,8 @@ export default defineComponent({
   },
   setup(_, { root }) {
     const snackbar = ref(false);
+    const pageSize = 12; // Default 12 looks good on default width/height of window
+    const limit = ref(pageSize);
     const errorText = ref('');
     async function open(dstype: DatasetType) {
       const ret = await openFromDisk(dstype);
@@ -40,11 +42,28 @@ export default defineComponent({
       }
     }
 
+    const paginatedRecents = computed(() => recents.value.slice(0, limit.value));
+    const totalRecents = computed(() => recents.value.length);
+
+    function toggleMore() {
+      if (limit.value < recents.value.length) {
+        limit.value = recents.value.length;
+      } else {
+        limit.value = pageSize;
+      }
+    }
+
     return {
+      // methods
       open,
-      recents,
       join,
       setOrGetConversionJob,
+      toggleMore,
+      // state
+      pageSize,
+      limit,
+      paginatedRecents,
+      totalRecents,
       snackbar,
       errorText,
     };
@@ -125,11 +144,20 @@ export default defineComponent({
             class="px-4 py-2 my-4"
             min-width="100%"
           >
-            <h2 class="text-h4 font-weight-light mb-2">
+            <h2
+              v-if="totalRecents > 0"
+              class="text-h4 font-weight-light mb-2"
+            >
               Recent
             </h2>
+            <h2
+              v-else
+              class="text-h4 font-weight-light mb-2"
+            >
+              Open images or video to get started
+            </h2>
             <div
-              v-for="recent in recents"
+              v-for="recent in paginatedRecents"
               :key="recent.id"
               class="pa-1"
             >
@@ -141,9 +169,7 @@ export default defineComponent({
                   {{
                     (recent.type === 'video')
                       ? 'mdi-file-video'
-                      : (recent.originalImageFiles.length > 1)
-                        ? 'mdi-image-multiple'
-                        : 'mdi-image'
+                      : 'mdi-image-multiple'
                   }}
                 </v-icon>
                 <span v-if="setOrGetConversionJob(recent.id)">
@@ -169,6 +195,34 @@ export default defineComponent({
                 </span>
               </h3>
             </div>
+            <div
+              v-if="pageSize < totalRecents"
+              class="mx-1"
+            >
+              <v-divider class="my-2" />
+              <h3
+                class="text-body-1"
+                style="cursor: pointer;"
+                @click="toggleMore"
+              >
+                <v-icon
+                  class="pr-2"
+                  color="primary lighten-3"
+                >
+                  {{ (limit === totalRecents) ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+                </v-icon>
+                <span
+                  class="primary--text text--lighten-3"
+                >
+                  <span v-if="limit < totalRecents">
+                    Show {{ totalRecents - pageSize }} more
+                  </span>
+                  <span v-else>
+                    Show less
+                  </span>
+                </span>
+              </h3>
+            </div>
           </v-card>
         </v-row>
       </v-col>
diff --git a/client/platform/desktop/frontend/store/dataset.ts b/client/platform/desktop/frontend/store/dataset.ts
index 68246587e..9139dba5d 100644
--- a/client/platform/desktop/frontend/store/dataset.ts
+++ b/client/platform/desktop/frontend/store/dataset.ts
@@ -11,13 +11,16 @@ const datasets = ref({} as Record<string, JsonMeta>);
 
 const recents = computed(() => {
   const list = Object.values(datasets.value)
-    .sort((a, b) => Date.parse(a.createdAt) - Date.parse(b.createdAt))
-    .slice(0, 20);
+    .sort((a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt));
   return list;
 });
 
 /**
- * Load recent datasets from localstorage
+ * Load recent datasets from localstorage.
+ *
+ * Note that the localStorage copy is just a cache and not a source of truth.
+ * The real dataset JsonMeta must be loaded from disk through the
+ * loadMetadata() backend method.
  */
 function load(): JsonMeta[] {
   try {
@@ -42,7 +45,17 @@ function load(): JsonMeta[] {
  * @param id dataset id path
  */
 function setRecents(meta: JsonMeta) {
-  Vue.set(datasets.value, meta.id, meta);
+  Vue.set(datasets.value, meta.id, {
+    ...meta,
+    /**
+     * Erase image lists from meta object stored in recents.
+     * Saves space and serialization cost since these parts of
+     * the recents object aren't used in this way.
+     */
+    imageData: [],
+    originalImageFiles: [],
+    transcodedImageFiles: [],
+  });
   const values = Object.values(datasets.value);
   window.localStorage.setItem(RecentsKey, JSON.stringify(values));
 }
diff --git a/client/platform/desktop/frontend/store/index.ts b/client/platform/desktop/frontend/store/index.ts
index ab75051e1..0c039ade2 100644
--- a/client/platform/desktop/frontend/store/index.ts
+++ b/client/platform/desktop/frontend/store/index.ts
@@ -5,14 +5,12 @@ import * as api from 'platform/desktop/frontend/api';
 import * as common from 'platform/desktop/backend/native/common';
 
 import { settings } from './settings';
-import { load, setRecents, clearRecents } from './dataset';
+import { load, setRecents } from './dataset';
 
 /* Run forward migrations on any client-side data stores */
 export async function migrate() {
-  const datasets = await load();
-  if (datasets.length && typeof datasets[0] === 'string') {
-    clearRecents();
-  }
+  /* No migrations yet */
+  await load();
 }
 
 /**

From 2755f104a1f01a11f41f7390760322f8b04ef3f0 Mon Sep 17 00:00:00 2001
From: Brandon Davis <brandon.davis@kitware.com>
Date: Mon, 1 Mar 2021 14:54:16 -0500
Subject: [PATCH 2/2] Use special interface for localStorage cache

---
 .../desktop/frontend/store/dataset.ts         | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/client/platform/desktop/frontend/store/dataset.ts b/client/platform/desktop/frontend/store/dataset.ts
index 9139dba5d..c99a448ac 100644
--- a/client/platform/desktop/frontend/store/dataset.ts
+++ b/client/platform/desktop/frontend/store/dataset.ts
@@ -1,13 +1,29 @@
 import Vue from 'vue';
 import Install, { ref, computed } from '@vue/composition-api';
 import { JsonMeta } from 'platform/desktop/constants';
+import { DatasetType } from 'dive-common/apispec';
 
 const RecentsKey = 'desktop.recent';
 
 // TODO remove this: this won't be necessary in Vue 3
 Vue.use(Install);
 
-const datasets = ref({} as Record<string, JsonMeta>);
+/**
+ * JsonMetaCache is a subset of JsonMeta
+ * cached in localStorage for quickly listing
+ * known datasets
+ */
+interface JsonMetaCache {
+  version: number;
+  type: DatasetType;
+  id: string;
+  fps: number;
+  name: string;
+  createdAt: string;
+  originalBasePath: string;
+}
+
+const datasets = ref({} as Record<string, JsonMetaCache>);
 
 const recents = computed(() => {
   const list = Object.values(datasets.value)
@@ -22,13 +38,13 @@ const recents = computed(() => {
  * The real dataset JsonMeta must be loaded from disk through the
  * loadMetadata() backend method.
  */
-function load(): JsonMeta[] {
+function load(): JsonMetaCache[] {
   try {
     const arr = window.localStorage.getItem(RecentsKey);
     if (arr) {
       const maybeArr = JSON.parse(arr);
       if (maybeArr.length) {
-        maybeArr.forEach((meta: JsonMeta) => (
+        maybeArr.forEach((meta: JsonMetaCache) => (
           Vue.set(datasets.value, meta.id, meta)
         ));
         return maybeArr;
@@ -46,15 +62,13 @@ function load(): JsonMeta[] {
  */
 function setRecents(meta: JsonMeta) {
   Vue.set(datasets.value, meta.id, {
-    ...meta,
-    /**
-     * Erase image lists from meta object stored in recents.
-     * Saves space and serialization cost since these parts of
-     * the recents object aren't used in this way.
-     */
-    imageData: [],
-    originalImageFiles: [],
-    transcodedImageFiles: [],
+    version: meta.version,
+    type: meta.type,
+    id: meta.id,
+    fps: meta.fps,
+    name: meta.name,
+    createdAt: meta.createdAt,
+    originalBasePath: meta.originalBasePath,
   });
   const values = Object.values(datasets.value);
   window.localStorage.setItem(RecentsKey, JSON.stringify(values));