From 2d21d425be008267ac709124e361c18af9794bb9 Mon Sep 17 00:00:00 2001
From: Brandon Davis <brandon.davis@kitware.com>
Date: Fri, 19 Mar 2021 16:36:05 -0400
Subject: [PATCH 1/4] Work in progress on adding import dialog

---
 client/platform/desktop/backend/ipcService.ts |  16 +-
 .../desktop/backend/native/common.spec.ts     |  44 +++---
 .../platform/desktop/backend/native/common.ts |  40 +++--
 client/platform/desktop/constants.ts          |   5 +
 client/platform/desktop/frontend/api.ts       |  12 +-
 .../frontend/components/ImportDialog.vue      | 148 ++++++++++++++++++
 .../desktop/frontend/components/Recent.vue    |  67 ++++++--
 .../desktop/frontend/store/dataset.ts         |   8 +
 8 files changed, 281 insertions(+), 59 deletions(-)
 create mode 100644 client/platform/desktop/frontend/components/ImportDialog.vue

diff --git a/client/platform/desktop/backend/ipcService.ts b/client/platform/desktop/backend/ipcService.ts
index 99182c109..db7c1a9d2 100644
--- a/client/platform/desktop/backend/ipcService.ts
+++ b/client/platform/desktop/backend/ipcService.ts
@@ -3,7 +3,7 @@ import http from 'http';
 import { ipcMain } from 'electron';
 
 import {
-  DesktopJobUpdate, RunPipeline, RunTraining, Settings, ExportDatasetArgs,
+  DesktopJobUpdate, RunPipeline, RunTraining, Settings, ExportDatasetArgs, MediaImportPayload,
 } from 'platform/desktop/constants';
 
 import linux from './native/linux';
@@ -59,13 +59,19 @@ export default function register() {
   });
 
   ipcMain.handle('import-media', async (event, { path }: { path: string }) => {
+    const ret = await common.beginMediaImport(
+      settings.get(), path, currentPlatform.checkMedia,
+    );
+    return ret;
+  });
+
+  ipcMain.handle('finalize-import', async (event, args: MediaImportPayload) => {
     const updater = (update: DesktopJobUpdate) => {
       event.sender.send('job-update', update);
     };
-    const ret = await common.importMedia(settings.get(), path, updater, {
-      checkMedia: currentPlatform.checkMedia,
-      convertMedia: currentPlatform.convertMedia,
-    });
+    const ret = await common.finalizeMediaImport(
+      settings.get(), args, updater, currentPlatform.convertMedia,
+    );
     return ret;
   });
 
diff --git a/client/platform/desktop/backend/native/common.spec.ts b/client/platform/desktop/backend/native/common.spec.ts
index 382e68edf..b8fa43461 100644
--- a/client/platform/desktop/backend/native/common.spec.ts
+++ b/client/platform/desktop/backend/native/common.spec.ts
@@ -308,44 +308,48 @@ describe('native.common', () => {
   });
 
   it('importMedia image sequence success', async () => {
-    const meta = await common.importMedia(settings, '/home/user/data/imageSuccess', updater, { checkMedia, convertMedia });
-    expect(meta.name).toBe('imageSuccess');
-    expect(meta.originalImageFiles.length).toBe(2);
-    expect(meta.originalVideoFile).toBe('');
-    expect(meta.originalBasePath).toBe('/home/user/data/imageSuccess');
+    const payload = await common.beginMediaImport(settings, '/home/user/data/imageSuccess', checkMedia);
+    expect(payload.jsonMeta.name).toBe('imageSuccess');
+    expect(payload.jsonMeta.originalImageFiles.length).toBe(2);
+    expect(payload.jsonMeta.originalVideoFile).toBe('');
+    expect(payload.jsonMeta.originalBasePath).toBe('/home/user/data/imageSuccess');
   });
 
   it('importMedia video success', async () => {
-    const meta = await common.importMedia(settings, '/home/user/data/videoSuccess/video1.mp4', updater, { checkMedia, convertMedia });
-    expect(meta.name).toBe('video1');
-    expect(meta.originalImageFiles.length).toBe(0);
-    expect(meta.originalVideoFile).toBe('video1.mp4');
-    expect(meta.originalBasePath).toBe('/home/user/data/videoSuccess');
+    const payload = await common.beginMediaImport(settings, '/home/user/data/videoSuccess/video1.mp4', checkMedia);
+    expect(payload.jsonMeta.name).toBe('video1');
+    expect(payload.jsonMeta.originalImageFiles.length).toBe(0);
+    expect(payload.jsonMeta.originalVideoFile).toBe('video1.mp4');
+    expect(payload.jsonMeta.originalBasePath).toBe('/home/user/data/videoSuccess');
   });
 
   it('importMedia empty json file success', async () => {
-    const meta = await common.importMedia(settings, '/home/user/data/annotationEmptySuccess/video1.mp4', updater, { checkMedia, convertMedia });
-    const tracks = await common.loadDetections(settings, meta.id);
+    const payload = await common.beginMediaImport(settings, '/home/user/data/annotationEmptySuccess/video1.mp4', checkMedia);
+    await common.finalizeMediaImport(settings, payload, updater, convertMedia);
+    const tracks = await common.loadDetections(settings, payload.jsonMeta.id);
     expect(tracks).toEqual({});
   });
 
   it('importMedia various failure modes', async () => {
-    await expect(common.importMedia(settings, '/fake/path', updater, { checkMedia, convertMedia }))
+    await expect(common.beginMediaImport(settings, '/fake/path', checkMedia))
       .rejects.toThrow('file or directory not found');
-    await expect(common.importMedia(settings, '/home/user/data/imageSuccess/foo.png', updater, { checkMedia, convertMedia }))
+    await expect(common.beginMediaImport(settings, '/home/user/data/imageSuccess/foo.png', checkMedia))
       .rejects.toThrow('chose image file for video import option');
-    await expect(common.importMedia(settings, '/home/user/data/videoSuccess/otherfile.txt', updater, { checkMedia, convertMedia }))
+    await expect(common.beginMediaImport(settings, '/home/user/data/videoSuccess/otherfile.txt', checkMedia))
       .rejects.toThrow('unsupported MIME type');
-    await expect(common.importMedia(settings, '/home/user/data/videoSuccess/nomime', updater, { checkMedia, convertMedia }))
+    await expect(common.beginMediaImport(settings, '/home/user/data/videoSuccess/nomime', checkMedia))
       .rejects.toThrow('could not determine video MIME');
-    await expect(common.importMedia(settings, '/home/user/data/annotationFail/video1.mp4', updater, { checkMedia, convertMedia }))
+
+    const payload = await common.beginMediaImport(settings, '/home/user/data/annotationFail/video1.mp4', checkMedia);
+    await expect(common.finalizeMediaImport(settings, payload, updater, convertMedia))
       .rejects.toThrow('too many CSV');
   });
 
   it('importMedia video, start conversion', async () => {
-    const meta = await common.importMedia(settings, '/home/user/data/videoSuccess/video1.avi', updater, { checkMedia, convertMedia });
-    expect(meta.transcodingJobKey).toBe('jobKey');
-    expect(meta.type).toBe('video');
+    const payload = await common.beginMediaImport(settings, '/home/user/data/videoSuccess/video1.avi', checkMedia);
+    await common.finalizeMediaImport(settings, payload, updater, convertMedia);
+    expect(payload.jsonMeta.transcodingJobKey).toBe('jobKey');
+    expect(payload.jsonMeta.type).toBe('video');
   });
 
   it('processing good Trained Pipeline folder', async () => {
diff --git a/client/platform/desktop/backend/native/common.ts b/client/platform/desktop/backend/native/common.ts
index 124bea038..cd1f562e7 100644
--- a/client/platform/desktop/backend/native/common.ts
+++ b/client/platform/desktop/backend/native/common.ts
@@ -17,7 +17,7 @@ import * as viameSerializers from 'platform/desktop/backend/serializers/viame';
 import {
   websafeImageTypes, websafeVideoTypes, otherImageTypes, otherVideoTypes,
   JsonMeta, Settings, JsonMetaCurrentVersion, DesktopMetadata, DesktopJobUpdater,
-  ConvertMedia, RunTraining, ExportDatasetArgs,
+  ConvertMedia, RunTraining, ExportDatasetArgs, MediaImportPayload,
 } from 'platform/desktop/constants';
 import { Attribute, Attributes } from 'vue-media-annotator/use/useAttributes';
 import processTrackAttributes from './attributeProcessor';
@@ -501,21 +501,13 @@ async function _initializeProjectDir(settings: Settings, jsonMeta: JsonMeta): Pr
 }
 
 /**
- * importMedia locates as much information as possible
- * about a dataset using only the directory structure.
- * @param settings user settings
- * @param path path to import dir/file
- * @returns datasetId
+ * Begin a dataset import.
  */
-async function importMedia(
+async function beginMediaImport(
   settings: Settings,
   path: string,
-  updater: DesktopJobUpdater,
-  { checkMedia, convertMedia }: {
-  checkMedia: (settings: Settings, path: string) => Promise<boolean>;
-  convertMedia: ConvertMedia;
-},
-): Promise<JsonMeta> {
+  checkMedia: (settings: Settings, path: string) => Promise<boolean>,
+): Promise<MediaImportPayload> {
   let datasetType: DatasetType;
 
   const exists = fs.existsSync(path);
@@ -604,6 +596,25 @@ async function importMedia(
     throw new Error('only video and image-sequence types are supported');
   }
 
+  return {
+    jsonMeta,
+    mediaConvertList,
+  };
+}
+
+/**
+ * Finalize a dataset import.
+ */
+async function finalizeMediaImport(
+  settings: Settings,
+  args: MediaImportPayload,
+  updater: DesktopJobUpdater,
+  convertMedia: ConvertMedia,
+) {
+  const { jsonMeta, mediaConvertList } = args;
+  const { type: datasetType, id: dsId } = jsonMeta;
+
+  const contents = await fs.readdir(jsonMeta.originalBasePath);
   const projectDirAbsPath = await _initializeProjectDir(settings, jsonMeta);
 
   //Now we will kick off any conversions that are necessary
@@ -712,13 +723,14 @@ async function exportDataset(
 export {
   ProjectsFolderName,
   JobsFolderName,
+  beginMediaImport,
   createKwiverRunWorkingDir,
   exportDataset,
+  finalizeMediaImport,
   getPipelineList,
   getTrainingConfigs,
   getProjectDir,
   getValidatedProjectDir,
-  importMedia,
   loadMetadata,
   loadJsonMetadata,
   loadJsonTracks,
diff --git a/client/platform/desktop/constants.ts b/client/platform/desktop/constants.ts
index e6f1fcf9c..90ce6e57d 100644
--- a/client/platform/desktop/constants.ts
+++ b/client/platform/desktop/constants.ts
@@ -186,6 +186,11 @@ export interface DesktopJob {
   endTime?: Date;
 }
 
+export interface MediaImportPayload {
+  jsonMeta: JsonMeta;
+  mediaConvertList: string[];
+}
+
 export interface DesktopJobUpdate extends DesktopJob {
   // body contents of update payload
   body: string[];
diff --git a/client/platform/desktop/frontend/api.ts b/client/platform/desktop/frontend/api.ts
index 872448b18..bca29b614 100644
--- a/client/platform/desktop/frontend/api.ts
+++ b/client/platform/desktop/frontend/api.ts
@@ -11,7 +11,7 @@ import type {
 
 import {
   DesktopJob, DesktopMetadata, JsonMeta, NvidiaSmiReply,
-  RunPipeline, RunTraining, fileVideoTypes, ExportDatasetArgs,
+  RunPipeline, RunTraining, fileVideoTypes, ExportDatasetArgs, MediaImportPayload,
 } from 'platform/desktop/constants';
 
 /**
@@ -72,9 +72,12 @@ async function runTraining(
   return ipcRenderer.invoke('run-training', args);
 }
 
-async function importMedia(path: string): Promise<JsonMeta> {
-  const data: JsonMeta = await ipcRenderer.invoke('import-media', { path });
-  return data;
+function importMedia(path: string): Promise<MediaImportPayload> {
+  return ipcRenderer.invoke('import-media', { path });
+}
+
+function finalizeImport(args: MediaImportPayload): Promise<JsonMeta> {
+  return ipcRenderer.invoke('finalize-import', args);
 }
 
 async function exportDataset(id: string, exclude: boolean): Promise<string> {
@@ -143,6 +146,7 @@ export {
   saveAttributes,
   /* Nonstandard APIs */
   exportDataset,
+  finalizeImport,
   importMedia,
   openFromDisk,
   openLink,
diff --git a/client/platform/desktop/frontend/components/ImportDialog.vue b/client/platform/desktop/frontend/components/ImportDialog.vue
new file mode 100644
index 000000000..2e85226b2
--- /dev/null
+++ b/client/platform/desktop/frontend/components/ImportDialog.vue
@@ -0,0 +1,148 @@
+<script lang="ts">
+import { cloneDeep } from 'lodash';
+import {
+  defineComponent, watch, toRef, ref, PropType,
+} from '@vue/composition-api';
+import { MediaImportPayload } from 'platform/desktop/constants';
+
+import { locateDuplicates } from 'platform/desktop/frontend/store/dataset';
+import { settings } from 'platform/desktop/frontend/store/settings';
+
+export default defineComponent({
+  name: 'ImportDialog',
+  props: {
+    importData: {
+      type: Object as PropType<MediaImportPayload>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const argCopy = ref(cloneDeep(props.importData));
+    const duplicates = ref(locateDuplicates(props.importData.jsonMeta));
+
+    watch(toRef(props, 'importData'), (val) => {
+      duplicates.value = locateDuplicates(val.jsonMeta);
+      argCopy.value = cloneDeep(val);
+    });
+
+    return {
+      argCopy,
+      duplicates,
+      settings,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card
+    outlined
+    class="import-card"
+  >
+    <v-card-title>
+      Importing new {{ argCopy.jsonMeta.type }}
+    </v-card-title>
+    <v-card-text>
+      <v-alert
+        v-if="duplicates.length"
+        type="warning"
+        outlined
+        class="mb-4"
+      >
+        <b>Found {{ duplicates.length }} possible duplicates</b>
+        <p
+          v-for="(duplicate, i) in duplicates"
+          :key="duplicate.id"
+          class="my-0 duplicate-list"
+        >
+          {{ i + 1 }}: {{ duplicate.name }} @ <pre>{{ duplicate.id }}</pre>
+        </p>
+        <br><b>Abort</b>
+        to return to the recents list.
+        <br><b>Continue</b>
+        to ignore warning.
+      </v-alert>
+      <v-alert
+        v-if="argCopy.mediaConvertList.length"
+        type="info"
+        outlined
+        class="mb-v"
+      >
+        Found {{ argCopy.mediaConvertList.length }}
+        item(s) in this dataset that require transcoding.  Dataset will not be
+        available until transcoding is complete.
+      </v-alert>
+      <v-text-field
+        v-model="argCopy.jsonMeta.name"
+        label="Name"
+        placeholder="Name for this dataset"
+        hide-details
+        outlined
+      />
+      <table class="mt-5">
+        <tr>
+          <td>New ID</td>
+          <td>
+            <pre>{{ argCopy.jsonMeta.id }}</pre>
+          </td>
+        </tr>
+        <tr>
+          <td>Data Path</td>
+          <td>
+            <pre>{{ settings.dataPath }}</pre>
+          </td>
+        </tr>
+        <tr>
+          <td>Source</td>
+          <td>
+            <pre>{{ argCopy.jsonMeta.originalBasePath }}</pre>
+          </td>
+        </tr>
+        <tr>
+          <td>FPS</td>
+          <td>{{ argCopy.jsonMeta.fps }}</td>
+        </tr>
+        <tr v-if="argCopy.jsonMeta.type == 'image-sequence'">
+          <td>Image Count</td>
+          <td>{{ argCopy.jsonMeta.originalImageFiles.length }}</td>
+        </tr>
+      </table>
+      <v-spacer />
+      <div class="d-flex flex-row my-4">
+        <v-btn
+          text
+          class="grow mr-3"
+          outlined
+          @click="$emit('abort')"
+        >
+          Abort
+        </v-btn>
+        <v-btn
+          color="primary"
+          class="grow ml-3"
+          @click="$emit('finalize-import', argCopy)"
+        >
+          Proceed
+        </v-btn>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style lang="scss">
+.import-card {
+  overflow-x: hidden;
+}
+.duplicate-list {
+  font-size: 12px;
+  pre {
+    display: inline-block;
+  }
+}
+td, th {
+  text-align: left;
+}
+td {
+  padding-right: 20px;
+}
+</style>
diff --git a/client/platform/desktop/frontend/components/Recent.vue b/client/platform/desktop/frontend/components/Recent.vue
index f3a063776..e19bd7b96 100644
--- a/client/platform/desktop/frontend/components/Recent.vue
+++ b/client/platform/desktop/frontend/components/Recent.vue
@@ -1,40 +1,38 @@
 <script lang="ts">
 import { join } from 'path';
-import { computed, defineComponent, ref } from '@vue/composition-api';
+import {
+  computed, defineComponent, ref, Ref,
+} from '@vue/composition-api';
 
-import { DatasetType } from 'dive-common/apispec';
+import type { DatasetType } from 'dive-common/apispec';
+import type { MediaImportPayload } from 'platform/desktop/constants';
 
-import { openFromDisk, importMedia, loadMetadata } from '../api';
+import * as api from '../api';
 import { recents, setRecents } from '../store/dataset';
+import { setOrGetConversionJob } from '../store/jobs';
 import BrowserLink from './BrowserLink.vue';
 import NavigationBar from './NavigationBar.vue';
-import { setOrGetConversionJob } from '../store/jobs';
+import ImportDialog from './ImportDialog.vue';
 
 export default defineComponent({
   components: {
     BrowserLink,
+    ImportDialog,
     NavigationBar,
   },
+
   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('');
+    const pendingImportPayload: Ref<MediaImportPayload | null> = ref(null);
+
     async function open(dstype: DatasetType) {
-      const ret = await openFromDisk(dstype);
+      const ret = await api.openFromDisk(dstype);
       if (!ret.canceled) {
         try {
-          const meta = await importMedia(ret.filePaths[0]);
-          if (!meta.transcodingJobKey) {
-            root.$router.push({
-              name: 'viewer',
-              params: { id: meta.id },
-            });
-          } else {
-            // Display new data and await transcoding to complete
-            const recentsMeta = await loadMetadata(meta.id);
-            setRecents(recentsMeta);
-          }
+          pendingImportPayload.value = await api.importMedia(ret.filePaths[0]);
         } catch (err) {
           snackbar.value = true;
           errorText.value = err.message;
@@ -42,6 +40,27 @@ export default defineComponent({
       }
     }
 
+    /** Accept args from the dialog, as it may have modified some parts */
+    async function finalizeImport(args: MediaImportPayload) {
+      try {
+        const jsonMeta = await api.finalizeImport(args);
+        pendingImportPayload.value = null; // close dialog
+        if (!jsonMeta.transcodingJobKey) {
+          root.$router.push({
+            name: 'viewer',
+            params: { id: jsonMeta.id },
+          });
+        } else {
+          // Display new data and await transcoding to complete
+          const recentsMeta = await api.loadMetadata(jsonMeta.id);
+          setRecents(recentsMeta);
+        }
+      } catch (err) {
+        snackbar.value = true;
+        errorText.value = err.message;
+      }
+    }
+
     const paginatedRecents = computed(() => recents.value.slice(0, limit.value));
     const totalRecents = computed(() => recents.value.length);
 
@@ -56,6 +75,7 @@ export default defineComponent({
     return {
       // methods
       open,
+      finalizeImport,
       join,
       setOrGetConversionJob,
       toggleMore,
@@ -63,6 +83,7 @@ export default defineComponent({
       pageSize,
       limit,
       paginatedRecents,
+      pendingImportPayload,
       totalRecents,
       snackbar,
       errorText,
@@ -73,6 +94,20 @@ export default defineComponent({
 
 <template>
   <v-main>
+    <v-dialog
+      :value="pendingImportPayload !== null"
+      persistent
+      width="800"
+      overlay-opacity="0.95"
+      max-width="80%"
+    >
+      <ImportDialog
+        v-if="pendingImportPayload !== null"
+        :import-data="pendingImportPayload"
+        @finalize-import="finalizeImport($event)"
+        @abort="pendingImportPayload = null"
+      />
+    </v-dialog>
     <navigation-bar />
     <v-container>
       <v-col>
diff --git a/client/platform/desktop/frontend/store/dataset.ts b/client/platform/desktop/frontend/store/dataset.ts
index c99a448ac..bb79e5ded 100644
--- a/client/platform/desktop/frontend/store/dataset.ts
+++ b/client/platform/desktop/frontend/store/dataset.ts
@@ -56,6 +56,13 @@ function load(): JsonMetaCache[] {
   }
 }
 
+function locateDuplicates(meta: JsonMeta) {
+  return recents.value.filter((candidate) => (
+    candidate.originalBasePath === meta.originalBasePath
+    && candidate.name === meta.name
+  ));
+}
+
 /**
  * Add ID to recent datasets
  * @param id dataset id path
@@ -83,6 +90,7 @@ export {
   datasets,
   recents,
   load,
+  locateDuplicates,
   setRecents,
   clearRecents,
 };

From 1114e3b451241e7478ede4dd37b168b339fb05bc Mon Sep 17 00:00:00 2001
From: Brandon Davis <brandon.davis@kitware.com>
Date: Sat, 20 Mar 2021 16:13:00 -0400
Subject: [PATCH 2/4] Wip Globbing

---
 client/package.json                           |   2 +
 .../platform/desktop/backend/native/common.ts |   3 +-
 .../platform/desktop/backend/native/utils.ts  |  20 --
 .../platform/desktop/backend/native/viame.ts  |   3 +-
 client/platform/desktop/constants.ts          |   1 +
 .../frontend/components/ImportDialog.vue      | 204 +++++++++++++-----
 .../desktop/frontend/store/dataset.ts         |  26 ++-
 client/platform/desktop/sharedUtils.ts        |  30 +++
 client/yarn.lock                              |  10 +
 9 files changed, 217 insertions(+), 82 deletions(-)
 create mode 100644 client/platform/desktop/sharedUtils.ts

diff --git a/client/package.json b/client/package.json
index b97e6afff..b1e3baf0a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -47,6 +47,7 @@
     "csv-stringify": "^5.6.0",
     "d3": "^5.12.0",
     "geojs": "^0.20.0",
+    "glob-to-regexp": "^0.4.1",
     "lodash": "^4.17.19",
     "moment": "^2.29.1",
     "mousetrap": "^1.6.5",
@@ -65,6 +66,7 @@
     "@types/electron-devtools-installer": "^2.2.0",
     "@types/express": "^4.17.9",
     "@types/geojson": "^7946.0.7",
+    "@types/glob-to-regexp": "^0.4.0",
     "@types/jest": "^25.2.3",
     "@types/lodash": "^4.14.151",
     "@types/mime-types": "^2.1.0",
diff --git a/client/platform/desktop/backend/native/common.ts b/client/platform/desktop/backend/native/common.ts
index cd1f562e7..18b380588 100644
--- a/client/platform/desktop/backend/native/common.ts
+++ b/client/platform/desktop/backend/native/common.ts
@@ -19,9 +19,9 @@ import {
   JsonMeta, Settings, JsonMetaCurrentVersion, DesktopMetadata, DesktopJobUpdater,
   ConvertMedia, RunTraining, ExportDatasetArgs, MediaImportPayload,
 } from 'platform/desktop/constants';
+import { cleanString, makeid } from 'platform/desktop/sharedUtils';
 import { Attribute, Attributes } from 'vue-media-annotator/use/useAttributes';
 import processTrackAttributes from './attributeProcessor';
-import { cleanString, makeid } from './utils';
 
 const ProjectsFolderName = 'DIVE_Projects';
 const JobsFolderName = 'DIVE_Jobs';
@@ -598,6 +598,7 @@ async function beginMediaImport(
 
   return {
     jsonMeta,
+    globPattern: '',
     mediaConvertList,
   };
 }
diff --git a/client/platform/desktop/backend/native/utils.ts b/client/platform/desktop/backend/native/utils.ts
index 058ccabe5..36c5a1db4 100644
--- a/client/platform/desktop/backend/native/utils.ts
+++ b/client/platform/desktop/backend/native/utils.ts
@@ -3,24 +3,6 @@ import fs from 'fs-extra';
 import { observeChild } from 'platform/desktop/backend/native/processManager';
 import { DesktopJob, DesktopJobUpdater } from 'platform/desktop/constants';
 
-/**
- * Get a nice safe string
- */
-function cleanString(dirty: string) {
-  return dirty.replace(/[^a-z0-9]/gi, '_').toLowerCase();
-}
-
-// https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript
-function makeid(length: number): string {
-  let result = '';
-  const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
-  const charactersLength = characters.length;
-  for (let i = 0; i < length; i += 1) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-}
-
 const processChunk = (chunk: Buffer) => chunk
   .toString('utf-8')
   .split('\n')
@@ -81,8 +63,6 @@ Promise<{ output: null | string; exitCode: number | null; error: string}> {
 }
 
 export {
-  cleanString,
-  makeid,
   jobFileEchoMiddleware,
   spawnResult,
 };
diff --git a/client/platform/desktop/backend/native/viame.ts b/client/platform/desktop/backend/native/viame.ts
index f6d531c16..06096fede 100644
--- a/client/platform/desktop/backend/native/viame.ts
+++ b/client/platform/desktop/backend/native/viame.ts
@@ -7,11 +7,12 @@ import {
   ConversionArgs,
   DesktopJobUpdater,
 } from 'platform/desktop/constants';
+import { cleanString } from 'platform/desktop/sharedUtils';
 import { serialize } from 'platform/desktop/backend/serializers/viame';
 import { observeChild } from 'platform/desktop/backend/native/processManager';
 
 import * as common from './common';
-import { cleanString, jobFileEchoMiddleware, spawnResult } from './utils';
+import { jobFileEchoMiddleware, spawnResult } from './utils';
 
 
 const PipelineRelativeDir = 'configs/pipelines';
diff --git a/client/platform/desktop/constants.ts b/client/platform/desktop/constants.ts
index 90ce6e57d..73b597750 100644
--- a/client/platform/desktop/constants.ts
+++ b/client/platform/desktop/constants.ts
@@ -188,6 +188,7 @@ export interface DesktopJob {
 
 export interface MediaImportPayload {
   jsonMeta: JsonMeta;
+  globPattern: string;
   mediaConvertList: string[];
 }
 
diff --git a/client/platform/desktop/frontend/components/ImportDialog.vue b/client/platform/desktop/frontend/components/ImportDialog.vue
index 2e85226b2..2b5dc2aff 100644
--- a/client/platform/desktop/frontend/components/ImportDialog.vue
+++ b/client/platform/desktop/frontend/components/ImportDialog.vue
@@ -1,13 +1,16 @@
 <script lang="ts">
 import { cloneDeep } from 'lodash';
 import {
-  defineComponent, watch, toRef, ref, PropType,
+  computed, defineComponent, watch, toRef, ref, PropType,
 } from '@vue/composition-api';
-import { MediaImportPayload } from 'platform/desktop/constants';
+import { MediaTypes } from 'dive-common/constants';
 
+import { filterByGlob } from 'platform/desktop/sharedUtils';
+import { MediaImportPayload } from 'platform/desktop/constants';
 import { locateDuplicates } from 'platform/desktop/frontend/store/dataset';
 import { settings } from 'platform/desktop/frontend/store/settings';
 
+
 export default defineComponent({
   name: 'ImportDialog',
   props: {
@@ -19,16 +22,25 @@ export default defineComponent({
   setup(props) {
     const argCopy = ref(cloneDeep(props.importData));
     const duplicates = ref(locateDuplicates(props.importData.jsonMeta));
+    const showAdvanced = ref(false);
 
     watch(toRef(props, 'importData'), (val) => {
       duplicates.value = locateDuplicates(val.jsonMeta);
       argCopy.value = cloneDeep(val);
     });
 
+    const filteredImages = computed(() => filterByGlob(
+      argCopy.value.globPattern,
+      argCopy.value.jsonMeta.originalImageFiles,
+    ));
+
     return {
       argCopy,
       duplicates,
+      filteredImages,
       settings,
+      showAdvanced,
+      MediaTypes,
     };
   },
 });
@@ -39,110 +51,188 @@ export default defineComponent({
     outlined
     class="import-card"
   >
-    <v-card-title>
-      Importing new {{ argCopy.jsonMeta.type }}
+    <v-card-title class="text-h5">
+      Import new {{ MediaTypes[argCopy.jsonMeta.type] }}
     </v-card-title>
     <v-card-text>
       <v-alert
         v-if="duplicates.length"
         type="warning"
         outlined
-        class="mb-4"
+        dense
       >
         <b>Found {{ duplicates.length }} possible duplicates</b>
         <p
           v-for="(duplicate, i) in duplicates"
           :key="duplicate.id"
-          class="my-0 duplicate-list"
+          class="duplicate-list my-0"
         >
-          {{ i + 1 }}: {{ duplicate.name }} @ <pre>{{ duplicate.id }}</pre>
+          {{ i + 1 }}: {{ duplicate.name }}, created on
+          {{ (new Date(duplicate.createdAt)).toLocaleString() }}
         </p>
-        <br><b>Abort</b>
+        <b>Cancel</b>
         to return to the recents list.
-        <br><b>Continue</b>
-        to ignore warning.
+        <br><b>Finish Import</b>
+        to ignore the warning and create a new dataset.
       </v-alert>
       <v-alert
         v-if="argCopy.mediaConvertList.length"
         type="info"
         outlined
-        class="mb-v"
+        dense
       >
         Found {{ argCopy.mediaConvertList.length }}
-        item(s) in this dataset that require transcoding.  Dataset will not be
-        available until transcoding is complete.
+        item(s) in this dataset that will be automatically transcoded on import.
+        Dataset will not be available until transcoding is complete.
       </v-alert>
       <v-text-field
         v-model="argCopy.jsonMeta.name"
         label="Name"
         placeholder="Name for this dataset"
-        hide-details
+        hint="Changing the name does not modify the data source directory."
+        persistent-hint
         outlined
+        dense
+        class="my-2 mt-7"
       />
-      <table class="mt-5">
-        <tr>
-          <td>New ID</td>
-          <td>
-            <pre>{{ argCopy.jsonMeta.id }}</pre>
-          </td>
-        </tr>
-        <tr>
-          <td>Data Path</td>
-          <td>
-            <pre>{{ settings.dataPath }}</pre>
-          </td>
-        </tr>
-        <tr>
-          <td>Source</td>
-          <td>
-            <pre>{{ argCopy.jsonMeta.originalBasePath }}</pre>
-          </td>
-        </tr>
-        <tr>
-          <td>FPS</td>
-          <td>{{ argCopy.jsonMeta.fps }}</td>
-        </tr>
-        <tr v-if="argCopy.jsonMeta.type == 'image-sequence'">
-          <td>Image Count</td>
-          <td>{{ argCopy.jsonMeta.originalImageFiles.length }}</td>
-        </tr>
-      </table>
-      <v-spacer />
-      <div class="d-flex flex-row my-4">
+      <p class="mb-5">
+        <span
+          class="text-body-1"
+          style="cursor: pointer;"
+          @click="showAdvanced = !showAdvanced"
+        >
+          <v-icon
+            class="pr-1"
+            color="primary lighten-3"
+          >
+            {{ showAdvanced ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+          </v-icon>
+          <span
+            class="primary--text text--lighten-3"
+          >
+            <span v-if="!showAdvanced">
+              Show advanced options
+            </span>
+            <span v-else>
+              Hide advanced options
+            </span>
+          </span>
+        </span>
+      </p>
+      <div v-if="showAdvanced">
+        <v-text-field
+          v-if="argCopy.jsonMeta.type === 'image-sequence'"
+          v-model="argCopy.globPattern"
+          label="Glob Filter Pattern"
+          placeholder="Leave blank to use all images. example: *png"
+          hint="
+            Used to filter input images. Multiple patterns should be separated with semicolon.
+          "
+          persistent-hint
+          outlined
+          dense
+          class="mb-0"
+        />
+        <v-chip
+          v-if="argCopy.globPattern"
+          :color="filteredImages.length ? 'success' : 'error'"
+          outlined
+          class="ml-3"
+        >
+          Current pattern "{{ argCopy.globPattern }}" matches {{ filteredImages.length }}
+          out of {{ argCopy.jsonMeta.originalImageFiles.length }} images
+        </v-chip>
+        <p class="my-3">
+          New Dataset Properties
+        </p>
+        <table>
+          <tr>
+            <td>New ID</td>
+            <td>
+              <pre>{{ argCopy.jsonMeta.id }}</pre>
+            </td>
+          </tr>
+          <tr v-if="argCopy.jsonMeta.type == 'video'">
+            <td>Video</td>
+            <td>{{ argCopy.jsonMeta.originalVideoFile }}</td>
+          </tr>
+          <tr>
+            <td>Source Dir</td>
+            <td>
+              <pre>{{ argCopy.jsonMeta.originalBasePath }}</pre>
+            </td>
+          </tr>
+          <tr>
+            <td>Annotation FPS</td>
+            <td>
+              {{ argCopy.jsonMeta.fps }}
+              <span
+                v-if="argCopy.jsonMeta.type === 'video'"
+                class="pl-2"
+              >
+                <b>Note</b> video downsampled annotation framerate is different than raw video FPS
+              </span>
+            </td>
+          </tr>
+          <tr v-if="argCopy.jsonMeta.type == 'image-sequence'">
+            <td>Image Count</td>
+            <td>{{ argCopy.jsonMeta.originalImageFiles.length }}</td>
+          </tr>
+        </table>
+      </div>
+      <div class="d-flex flex-row mt-4">
+        <v-spacer />
         <v-btn
           text
-          class="grow mr-3"
           outlined
+          class="mr-5"
           @click="$emit('abort')"
         >
-          Abort
+          Cancel
         </v-btn>
         <v-btn
           color="primary"
-          class="grow ml-3"
           @click="$emit('finalize-import', argCopy)"
         >
-          Proceed
+          Finish Import
         </v-btn>
       </div>
     </v-card-text>
   </v-card>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 .import-card {
   overflow-x: hidden;
 }
 .duplicate-list {
   font-size: 12px;
-  pre {
-    display: inline-block;
-  }
-}
-td, th {
-  text-align: left;
 }
-td {
-  padding-right: 20px;
+table {
+  border-collapse: collapse;
+  width: 100%;
+
+  td {
+    font-size: 14px;
+    border-bottom: 1px solid #444444;
+    padding: 2px 0;
+    padding-right: 10px;
+
+    &:first-child {
+      width: 140px;
+      min-width: 140px;
+      font-weight: bold;
+      padding-left: 12px;
+    }
+    &:last-child {
+      font-size: 12px;
+      padding-right: 10px;
+    }
+  }
+
+  tr:last-child td {
+    border-bottom: 0;
+  }
 }
+
 </style>
diff --git a/client/platform/desktop/frontend/store/dataset.ts b/client/platform/desktop/frontend/store/dataset.ts
index bb79e5ded..0a1b94dba 100644
--- a/client/platform/desktop/frontend/store/dataset.ts
+++ b/client/platform/desktop/frontend/store/dataset.ts
@@ -21,6 +21,20 @@ interface JsonMetaCache {
   name: string;
   createdAt: string;
   originalBasePath: string;
+  originalVideoFile: string;
+  transcodedVideoFile?: string;
+}
+
+/**
+ * Handle migration for changes in JsonMetaCache schema
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function hydrateJsonMetaCacheValue(input: any): JsonMetaCache {
+  return {
+    originalVideoFile: '',
+    transcodedVideoFile: '',
+    ...input,
+  };
 }
 
 const datasets = ref({} as Record<string, JsonMetaCache>);
@@ -45,7 +59,7 @@ function load(): JsonMetaCache[] {
       const maybeArr = JSON.parse(arr);
       if (maybeArr.length) {
         maybeArr.forEach((meta: JsonMetaCache) => (
-          Vue.set(datasets.value, meta.id, meta)
+          Vue.set(datasets.value, meta.id, hydrateJsonMetaCacheValue(meta))
         ));
         return maybeArr;
       }
@@ -59,7 +73,11 @@ function load(): JsonMetaCache[] {
 function locateDuplicates(meta: JsonMeta) {
   return recents.value.filter((candidate) => (
     candidate.originalBasePath === meta.originalBasePath
-    && candidate.name === meta.name
+    && (
+      meta.type === 'video'
+        ? meta.originalVideoFile === candidate.originalVideoFile
+        : true
+    )
   ));
 }
 
@@ -76,7 +94,9 @@ function setRecents(meta: JsonMeta) {
     name: meta.name,
     createdAt: meta.createdAt,
     originalBasePath: meta.originalBasePath,
-  });
+    originalVideoFile: meta.originalVideoFile,
+    transcodedVideoFile: meta.transcodedVideoFile,
+  } as JsonMetaCache);
   const values = Object.values(datasets.value);
   window.localStorage.setItem(RecentsKey, JSON.stringify(values));
 }
diff --git a/client/platform/desktop/sharedUtils.ts b/client/platform/desktop/sharedUtils.ts
new file mode 100644
index 000000000..c4bde1d3d
--- /dev/null
+++ b/client/platform/desktop/sharedUtils.ts
@@ -0,0 +1,30 @@
+/**
+ * utilities shared between renderer and main threads.
+ */
+import globToRegexp from 'glob-to-regexp';
+
+function cleanString(dirty: string) {
+  return dirty.replace(/[^a-z0-9]/gi, '_').toLowerCase();
+}
+
+// https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript
+function makeid(length: number): string {
+  let result = '';
+  const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i += 1) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+
+function filterByGlob(pattern: string, files: string[]) {
+  const patterns = pattern.split(';').map((p) => globToRegexp(p, { flags: 'i' }));
+  return files.filter((val) => patterns.some((re) => re.test(val)));
+}
+
+export {
+  cleanString,
+  filterByGlob,
+  makeid,
+};
diff --git a/client/yarn.lock b/client/yarn.lock
index 0aa549f6a..0897891e7 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2251,6 +2251,11 @@
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.7.tgz#c8fa532b60a0042219cdf173ca21a975ef0666ad"
   integrity sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==
 
+"@types/glob-to-regexp@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@types/glob-to-regexp/-/glob-to-regexp-0.4.0.tgz#a295047724f4554be8192b4c779c5e44920a2fdc"
+  integrity sha512-unszpTzAknG612PxqtoNUkLM0T3rIAXT8oE9Dyhhbl4eew91jLqcgJZOu5j7GztHg09R8LWCMocRU1ohDFY7Pw==
+
 "@types/glob@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
@@ -8051,6 +8056,11 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
+glob-to-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
+  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+
 glob@7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.4.tgz#3b44afa0943bdc31b2037b934791e2e084bcb7f6"

From ac2f06ed8a8aaa9beb366777a82575247e641999 Mon Sep 17 00:00:00 2001
From: Brandon Davis <brandon.davis@kitware.com>
Date: Mon, 22 Mar 2021 09:27:06 -0400
Subject: [PATCH 3/4] Finish globbing

---
 .../platform/desktop/backend/native/common.ts | 14 ++++--
 .../frontend/components/ImportDialog.vue      | 41 ++---------------
 .../desktop/frontend/components/Jobs.vue      | 46 ++++++++++---------
 .../components/styles/KeyValueTable.scss      | 26 +++++++++++
 4 files changed, 66 insertions(+), 61 deletions(-)
 create mode 100644 client/platform/desktop/frontend/components/styles/KeyValueTable.scss

diff --git a/client/platform/desktop/backend/native/common.ts b/client/platform/desktop/backend/native/common.ts
index 18b380588..9dc83e445 100644
--- a/client/platform/desktop/backend/native/common.ts
+++ b/client/platform/desktop/backend/native/common.ts
@@ -19,7 +19,7 @@ import {
   JsonMeta, Settings, JsonMetaCurrentVersion, DesktopMetadata, DesktopJobUpdater,
   ConvertMedia, RunTraining, ExportDatasetArgs, MediaImportPayload,
 } from 'platform/desktop/constants';
-import { cleanString, makeid } from 'platform/desktop/sharedUtils';
+import { cleanString, filterByGlob, makeid } from 'platform/desktop/sharedUtils';
 import { Attribute, Attributes } from 'vue-media-annotator/use/useAttributes';
 import processTrackAttributes from './attributeProcessor';
 
@@ -612,12 +612,18 @@ async function finalizeMediaImport(
   updater: DesktopJobUpdater,
   convertMedia: ConvertMedia,
 ) {
-  const { jsonMeta, mediaConvertList } = args;
+  const { jsonMeta, globPattern } = args;
+  let { mediaConvertList } = args;
   const { type: datasetType, id: dsId } = jsonMeta;
 
-  const contents = await fs.readdir(jsonMeta.originalBasePath);
   const projectDirAbsPath = await _initializeProjectDir(settings, jsonMeta);
 
+  // Filter all parts of the input based on glob pattern
+  if (globPattern && jsonMeta.type === 'image-sequence') {
+    jsonMeta.originalImageFiles = filterByGlob(globPattern, jsonMeta.originalImageFiles);
+    mediaConvertList = filterByGlob(globPattern, mediaConvertList);
+  }
+
   //Now we will kick off any conversions that are necessary
   let jobBase = null;
   if (mediaConvertList.length) {
@@ -647,7 +653,6 @@ async function finalizeMediaImport(
     jsonMeta.transcodingJobKey = jobBase.key;
   }
 
-
   let foundDetections = false;
 
   /* Look for JSON track file as first priority */
@@ -666,6 +671,7 @@ async function finalizeMediaImport(
   }
   /* Look for other types of annotation files as a second priority */
   if (!foundDetections) {
+    const contents = await fs.readdir(jsonMeta.originalBasePath);
     const csvFileCandidates = contents
       .filter((v) => CsvFileName.test(v))
       .map((filename) => npath.join(jsonMeta.originalBasePath, filename));
diff --git a/client/platform/desktop/frontend/components/ImportDialog.vue b/client/platform/desktop/frontend/components/ImportDialog.vue
index 2b5dc2aff..e4c1c104e 100644
--- a/client/platform/desktop/frontend/components/ImportDialog.vue
+++ b/client/platform/desktop/frontend/components/ImportDialog.vue
@@ -50,6 +50,7 @@ export default defineComponent({
   <v-card
     outlined
     class="import-card"
+    style="overflow-x: hidden;"
   >
     <v-card-title class="text-h5">
       Import new {{ MediaTypes[argCopy.jsonMeta.type] }}
@@ -65,7 +66,7 @@ export default defineComponent({
         <p
           v-for="(duplicate, i) in duplicates"
           :key="duplicate.id"
-          class="duplicate-list my-0"
+          class="text-caption my-0"
         >
           {{ i + 1 }}: {{ duplicate.name }}, created on
           {{ (new Date(duplicate.createdAt)).toLocaleString() }}
@@ -139,13 +140,13 @@ export default defineComponent({
           outlined
           class="ml-3"
         >
-          Current pattern "{{ argCopy.globPattern }}" matches {{ filteredImages.length }}
+          "{{ argCopy.globPattern }}" matches {{ filteredImages.length }}
           out of {{ argCopy.jsonMeta.originalImageFiles.length }} images
         </v-chip>
         <p class="my-3">
           New Dataset Properties
         </p>
-        <table>
+        <table class="key-value-table">
           <tr>
             <td>New ID</td>
             <td>
@@ -202,37 +203,5 @@ export default defineComponent({
 </template>
 
 <style scoped lang="scss">
-.import-card {
-  overflow-x: hidden;
-}
-.duplicate-list {
-  font-size: 12px;
-}
-table {
-  border-collapse: collapse;
-  width: 100%;
-
-  td {
-    font-size: 14px;
-    border-bottom: 1px solid #444444;
-    padding: 2px 0;
-    padding-right: 10px;
-
-    &:first-child {
-      width: 140px;
-      min-width: 140px;
-      font-weight: bold;
-      padding-left: 12px;
-    }
-    &:last-child {
-      font-size: 12px;
-      padding-right: 10px;
-    }
-  }
-
-  tr:last-child td {
-    border-bottom: 0;
-  }
-}
-
+@import './styles/KeyValueTable.scss';
 </style>
diff --git a/client/platform/desktop/frontend/components/Jobs.vue b/client/platform/desktop/frontend/components/Jobs.vue
index dd2b5667d..ee6466d4a 100644
--- a/client/platform/desktop/frontend/components/Jobs.vue
+++ b/client/platform/desktop/frontend/components/Jobs.vue
@@ -107,7 +107,7 @@ export default defineComponent({
                     {{ job.job.jobType }}: {{ datasets[job.job.datasetIds[0]].name }}
                   </v-card-title>
                   <v-card-subtitle>
-                    <table cell-spacing="10px">
+                    <table class="key-value-table">
                       <tr v-if="'pipeline' in job.job.args">
                         <td>Pipe</td>
                         <td>{{ job.job.args.pipeline.pipe }}</td>
@@ -124,17 +124,19 @@ export default defineComponent({
                       </tr>
                       <tr>
                         <td>work dir</td>
-                        <td
-                          class="selectable"
-                          @click="openPath(job.job)"
-                        >
-                          <span class="text-decoration-underline">show in file manager</span>
-                          <v-icon
-                            small
-                            class="mx-2"
+                        <td>
+                          <span
+                            class="selectable"
+                            @click="openPath(job.job)"
                           >
-                            mdi-folder-open
-                          </v-icon>
+                            <span class="text-decoration-underline">show in file manager</span>
+                            <v-icon
+                              small
+                              class="mx-2"
+                            >
+                              mdi-folder-open
+                            </v-icon>
+                          </span>
                         </td>
                       </tr>
                     </table>
@@ -220,21 +222,23 @@ export default defineComponent({
   </v-main>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+@import './styles/KeyValueTable.scss';
+
 .terminal {
   font-family: monospace;
   font-size: 12px;
+
+  &.terminal-meta {
+    opacity: 0.7;
+  }
 }
-.terminal-meta {
-  opacity: 0.7;
-}
-td {
-  padding-right: 20px;
-}
+
 .selectable {
   cursor: pointer;
-}
-.selectable:hover {
-  opacity: 0.8;
+
+  &:hover {
+    opacity: 0.8;
+  }
 }
 </style>
diff --git a/client/platform/desktop/frontend/components/styles/KeyValueTable.scss b/client/platform/desktop/frontend/components/styles/KeyValueTable.scss
new file mode 100644
index 000000000..42703b1e4
--- /dev/null
+++ b/client/platform/desktop/frontend/components/styles/KeyValueTable.scss
@@ -0,0 +1,26 @@
+table.key-value-table {
+  border-collapse: collapse;
+  width: 100%;
+
+  td {
+    font-size: 14px;
+    border-bottom: 1px solid #444444;
+    padding: 2px 0;
+    padding-right: 10px;
+
+    &:first-child {
+      width: 140px;
+      min-width: 140px;
+      font-weight: bold;
+      padding-left: 12px;
+    }
+    &:last-child {
+      font-size: 12px;
+      padding-right: 10px;
+    }
+  }
+
+  tr:last-child td {
+    border-bottom: 0;
+  }
+}

From d1f224d18bccddd950acf213ed29bec6877844c1 Mon Sep 17 00:00:00 2001
From: Brandon Davis <brandon.davis@kitware.com>
Date: Mon, 22 Mar 2021 17:56:03 -0400
Subject: [PATCH 4/4] Respond to comments

---
 .../platform/desktop/backend/native/common.ts | 63 ++++++++++++-------
 .../frontend/components/ImportDialog.vue      | 11 +++-
 2 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/client/platform/desktop/backend/native/common.ts b/client/platform/desktop/backend/native/common.ts
index 9dc83e445..534f75357 100644
--- a/client/platform/desktop/backend/native/common.ts
+++ b/client/platform/desktop/backend/native/common.ts
@@ -33,6 +33,34 @@ const JsonTrackFileName = /^result(_.*)?\.json$/;
 const JsonMetaFileName = 'meta.json';
 const CsvFileName = /^.*\.csv$/;
 
+async function findImagesInFolder(path: string, glob?: string) {
+  const images: string[] = [];
+  let requiresTranscoding = false;
+  const contents = await fs.readdir(path);
+
+  contents.forEach((filename) => {
+    const abspath = npath.join(path, filename);
+    const mimetype = mime.lookup(abspath);
+    if (glob === undefined || filterByGlob(glob, [filename]).length === 1) {
+      if (
+        mimetype && (websafeImageTypes.includes(mimetype)
+          || otherImageTypes.includes(mimetype))
+      ) {
+        images.push(filename);
+        if (otherImageTypes.includes(mimetype)) {
+          requiresTranscoding = true;
+        }
+      }
+    }
+  });
+  return {
+    images,
+    mediaConvetList: requiresTranscoding
+      ? images.map((filename) => npath.join(path, filename))
+      : [],
+  };
+}
+
 async function _acquireLock(dir: string, resource: string, lockname: 'meta' | 'tracks') {
   const release = await lockfile.lock(resource, {
     stale: 5000, // 5 seconds
@@ -548,8 +576,7 @@ async function beginMediaImport(
     jsonMeta.originalBasePath = npath.dirname(path);
   }
 
-  const contents = await fs.readdir(jsonMeta.originalBasePath);
-
+  /* mediaConvertList is a list of absolute paths of media to convert */
   let mediaConvertList: string[] = [];
   /* Extract and validate media from import path */
   if (jsonMeta.type === 'video') {
@@ -570,28 +597,12 @@ async function beginMediaImport(
       throw new Error(`could not determine video MIME type for ${path}`);
     }
   } else if (datasetType === 'image-sequence') {
-    const tempConvertList: string[] = [];
-    let convertAny = false; //If we have to convert one image we convert all for organization
-    contents.forEach((filename) => {
-      const abspath = npath.join(jsonMeta.originalBasePath, filename);
-      const mimetype = mime.lookup(abspath);
-      if (
-        mimetype && (websafeImageTypes.includes(mimetype)
-        || otherImageTypes.includes(mimetype))
-      ) {
-        jsonMeta.originalImageFiles.push(filename);
-        tempConvertList.push(abspath);
-        if (otherImageTypes.includes(mimetype)) {
-          convertAny = true;
-        }
-      }
-    });
-    if (jsonMeta.originalImageFiles.length === 0) {
+    const found = await findImagesInFolder(jsonMeta.originalBasePath);
+    if (found.images.length === 0) {
       throw new Error(`no images found in ${path}`);
     }
-    if (convertAny) {
-      mediaConvertList = tempConvertList;
-    }
+    jsonMeta.originalImageFiles = found.images;
+    mediaConvertList = found.mediaConvetList;
   } else {
     throw new Error('only video and image-sequence types are supported');
   }
@@ -620,8 +631,12 @@ async function finalizeMediaImport(
 
   // Filter all parts of the input based on glob pattern
   if (globPattern && jsonMeta.type === 'image-sequence') {
-    jsonMeta.originalImageFiles = filterByGlob(globPattern, jsonMeta.originalImageFiles);
-    mediaConvertList = filterByGlob(globPattern, mediaConvertList);
+    const found = await findImagesInFolder(jsonMeta.originalBasePath, globPattern);
+    if (found.images.length === 0) {
+      throw new Error(`no images in ${jsonMeta.originalBasePath} matched pattern ${globPattern}`);
+    }
+    jsonMeta.originalImageFiles = found.images;
+    mediaConvertList = found.mediaConvetList;
   }
 
   //Now we will kick off any conversions that are necessary
diff --git a/client/platform/desktop/frontend/components/ImportDialog.vue b/client/platform/desktop/frontend/components/ImportDialog.vue
index e4c1c104e..23faa1566 100644
--- a/client/platform/desktop/frontend/components/ImportDialog.vue
+++ b/client/platform/desktop/frontend/components/ImportDialog.vue
@@ -34,10 +34,18 @@ export default defineComponent({
       argCopy.value.jsonMeta.originalImageFiles,
     ));
 
+    const ready = computed(() => {
+      if (argCopy.value.globPattern) {
+        return filteredImages.value.length > 0;
+      }
+      return true;
+    });
+
     return {
       argCopy,
       duplicates,
       filteredImages,
+      ready,
       settings,
       showAdvanced,
       MediaTypes,
@@ -125,7 +133,7 @@ export default defineComponent({
           v-if="argCopy.jsonMeta.type === 'image-sequence'"
           v-model="argCopy.globPattern"
           label="Glob Filter Pattern"
-          placeholder="Leave blank to use all images. example: *png"
+          placeholder="Leave blank to use all images. example: *.png"
           hint="
             Used to filter input images. Multiple patterns should be separated with semicolon.
           "
@@ -193,6 +201,7 @@ export default defineComponent({
         </v-btn>
         <v-btn
           color="primary"
+          :disabled="!ready"
           @click="$emit('finalize-import', argCopy)"
         >
           Finish Import