add ability to associate simulation dataset to external datasets

duranb · duranb · commit be76881409d5 · 2024-10-14T18:03:51.000-07:00
diff --git a/src/components/ResourceList.svelte b/src/components/ResourceList.svelte
@@ -1,20 +1,28 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
+  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
   import { plan } from '../stores/plan';
-  import { resourceTypes } from '../stores/simulation';
+  import { resourceTypes, simulationDatasetId } from '../stores/simulation';
   import type { User } from '../types/app';
   import type { ResourceType } from '../types/simulation';
   import type { TimelineItemType } from '../types/timeline';
   import effects from '../utilities/effects';
+  import { permissionHandler } from '../utilities/permissionHandler';
   import { featurePermissions } from '../utilities/permissions';
   import ResourceListPrefix from './ResourceListPrefix.svelte';
   import TimelineItemList from './TimelineItemList.svelte';
 
   export let user: User | null;
 
+  const uploadPermissionError: string = `You do not have permission to upload resources.`;
+
   let resourceDataTypes: string[] = [];
   let hasUploadPermission: boolean = false;
+  let isUploadVisible: boolean = false;
+  let useSelectedSimulation: boolean = false;
+  let uploadFiles: FileList | undefined;
+  let uploadFileInput: HTMLInputElement;
 
   $: resourceDataTypes = [...new Set($resourceTypes.map(t => t.schema.type))];
   $: if (user !== null && $plan !== null) {
@@ -25,10 +33,26 @@
     return (item as ResourceType).schema.type;
   }
 
-  async function onUploadFile(event: CustomEvent<FileList>) {
-    const { detail: uploadFiles } = event;
-    if ($plan && uploadFiles?.length) {
-      await effects.uploadExternalDataset($plan, uploadFiles, user);
+  function onShowUpload() {
+    isUploadVisible = true;
+  }
+
+  function onHideUpload() {
+    isUploadVisible = false;
+  }
+
+  async function onUpload() {
+    if (uploadFiles !== undefined) {
+      if ($plan && uploadFiles?.length) {
+        await effects.uploadExternalDataset(
+          $plan,
+          uploadFiles,
+          user,
+          useSelectedSimulation ? $simulationDatasetId : undefined,
+        );
+      }
+      uploadFileInput.value = '';
+      uploadFiles = undefined;
     }
   }
 </script>
@@ -40,11 +64,110 @@
   typeNamePlural="Resources"
   filterOptions={resourceDataTypes.map(t => ({ label: t, value: t }))}
   filterName="Data Type"
-  shouldShowUploadOption
-  {hasUploadPermission}
   {getFilterValueFromItem}
   let:prop={item}
-  on:upload={onUploadFile}
 >
+  <div slot="header" class="upload-container" hidden={!isUploadVisible}>
+    <button class="close-upload" type="button" on:click={onHideUpload}>
+      <CloseIcon />
+    </button>
+    <div class="upload-rows">
+      <label for="file">Resources File</label>
+      <input
+        class="w-100"
+        name="file"
+        type="file"
+        accept="application/json,.csv,.txt"
+        bind:files={uploadFiles}
+        bind:this={uploadFileInput}
+        use:permissionHandler={{
+          hasPermission: hasUploadPermission,
+          permissionError: uploadPermissionError,
+        }}
+      />
+      <label class="st-typography-body timeline-item-list-filter-option-label" for="simulation-association">
+        Associate selected simulation
+      </label>
+      <input
+        bind:checked={useSelectedSimulation}
+        class="simulation-checkbox"
+        type="checkbox"
+        name="simulation-association"
+      />
+    </div>
+    <div class="upload-button-container">
+      <button
+        class="st-button secondary"
+        disabled={!uploadFiles?.length}
+        on:click={onUpload}
+        use:permissionHandler={{
+          hasPermission: hasUploadPermission,
+          permissionError: uploadPermissionError,
+        }}
+      >
+        Upload
+      </button>
+    </div>
+  </div>
+  <div slot="button">
+    <button
+      class="st-button secondary"
+      on:click={onShowUpload}
+      use:permissionHandler={{
+        hasPermission: hasUploadPermission,
+        permissionError: uploadPermissionError,
+      }}
+    >
+      Upload Resources
+    </button>
+  </div>
   <ResourceListPrefix {item} />
 </TimelineItemList>
+
+<style>
+  .upload-container {
+    background: var(--st-gray-15);
+    border-radius: 5px;
+    margin: 5px;
+    padding: 8px 11px 8px;
+    position: relative;
+  }
+
+  .upload-container[hidden] {
+    display: none;
+  }
+
+  .upload-container :global(.upload-rows) {
+    display: grid;
+    grid-template-columns: max-content auto;
+    justify-content: space-between;
+    row-gap: 8px;
+  }
+
+  .st-button {
+    gap: 4px;
+    height: 20px;
+  }
+
+  .upload-container :global(.simulation-checkbox) {
+    justify-self: left;
+    margin: 0;
+  }
+
+  .upload-container :global(.upload-button-container) {
+    display: flex;
+    flex-flow: row-reverse;
+    margin-top: 8px;
+  }
+
+  .upload-container :global(.close-upload) {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    height: 1.3rem;
+    padding: 0;
+    position: absolute;
+    right: 3px;
+    top: 3px;
+  }
+</style>
diff --git a/src/components/TimelineItemList.svelte b/src/components/TimelineItemList.svelte
@@ -2,10 +2,9 @@
 
 <script lang="ts">
   import ChevronDownIcon from '@nasa-jpl/stellar/icons/chevron_down.svg?component';
-  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
+
   import GripVerticalIcon from 'bootstrap-icons/icons/grip-vertical.svg?component';
   import { capitalize } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import PlusCircledIcon from '../assets/plus-circled.svg?component';
   import { view, viewAddFilterToRow } from '../stores/views';
   import type {
@@ -16,7 +15,6 @@
     TimelineItemListFilterOption,
     TimelineItemType,
   } from '../types/timeline';
-  import { permissionHandler } from '../utilities/permissionHandler';
   import { tooltip } from '../utilities/tooltip';
   import Input from './form/Input.svelte';
   import LayerPicker from './LayerPicker.svelte';
@@ -30,15 +28,8 @@
   export let items: TimelineItemType[] = [];
   export let filterOptions: TimelineItemListFilterOption[] = [];
   export let filterName: string = 'Filter';
-  export let shouldShowUploadOption: boolean = false;
-  export let hasUploadPermission: boolean = false;
   export let getFilterValueFromItem: (item: TimelineItemType) => string;
 
-  const dispatch = createEventDispatcher<{
-    upload: FileList;
-  }>();
-  const uploadPermissionError: string = `You do not have permission to upload ${typeNamePlural}`;
-
   let menu: Menu;
   let filteredItems: TimelineItemType[] = [];
   let textFilters: string[] = [];
@@ -47,9 +38,6 @@
   let layerPicker: LayerPicker;
   let layerPickerIndividual: LayerPicker;
   let timelines: Timeline[] = [];
-  let isUploadVisible: boolean = false;
-  let uploadFiles: FileList | undefined;
-  let uploadFileInput: HTMLInputElement;
 
   $: filteredItems = filterItems(items, filterText ? textFilters.concat(filterText) : textFilters, selectedFilters);
   $: timelines = $view?.definition.plan.timelines || [];
@@ -146,22 +134,6 @@
     e.stopPropagation();
     layerPickerIndividual.toggle(e, item);
   }
-
-  function onShowUpload() {
-    isUploadVisible = true;
-  }
-
-  function onHideUpload() {
-    isUploadVisible = false;
-  }
-
-  function onUpload() {
-    if (uploadFiles !== undefined) {
-      dispatch('upload', uploadFiles);
-      uploadFileInput.value = '';
-      uploadFiles = undefined;
-    }
-  }
 </script>
 
 <div class="timeline-item-list">
@@ -216,57 +188,16 @@
       </Menu>
     </div>
   </div>
-  {#if isUploadVisible}
-    <fieldset class="upload-container" hidden={!isUploadVisible}>
-      <button class="close-upload" type="button" on:click={onHideUpload}>
-        <CloseIcon />
-      </button>
-      <label for="file">{typeName.charAt(0).toUpperCase() + typeName.slice(1)} File</label>
-      <div class="upload-input-container">
-        <input
-          class="w-100"
-          name="file"
-          type="file"
-          accept="application/json"
-          bind:files={uploadFiles}
-          bind:this={uploadFileInput}
-          use:permissionHandler={{
-            hasPermission: hasUploadPermission,
-            permissionError: uploadPermissionError,
-          }}
-        />
-        <button
-          class="st-button secondary"
-          on:click={onUpload}
-          disabled={!uploadFiles?.length}
-          use:permissionHandler={{
-            hasPermission: hasUploadPermission,
-            permissionError: uploadPermissionError,
-          }}
-        >
-          Upload
-        </button>
-      </div>
-    </fieldset>
-  {/if}
 
   <div class="controls">
+    <slot name="header" />
     <div class="controls-header st-typography-medium">
       <div>{typeNamePlural} ({filteredItems.length})</div>
       <div>
-        {#if shouldShowUploadOption}
-          <button
-            class="st-button secondary"
-            on:click={onShowUpload}
-            use:permissionHandler={{
-              hasPermission: hasUploadPermission,
-              permissionError: uploadPermissionError,
-            }}
-          >
-            Upload {typeNamePlural}
-          </button>
-        {/if}
-        <button class="st-button secondary" on:click={onBulkAddToRow}> Add Filter to Row </button>
+        <div class="buttons">
+          <slot name="button" />
+          <button class="st-button secondary" on:click={onBulkAddToRow}> Add Filter to Row </button>
+        </div>
         <LayerPicker
           bind:this={layerPicker}
           rows={timelines[0]?.rows || []}
@@ -371,36 +302,6 @@
     flex: 1;
   }
 
-  .upload-container {
-    background: var(--st-gray-15);
-    border-radius: 5px;
-    margin: 5px;
-    padding: 8px 11px 8px;
-    position: relative;
-  }
-
-  .upload-container[hidden] {
-    display: none;
-  }
-
-  .upload-input-container {
-    align-items: center;
-    column-gap: 0.5rem;
-    display: grid;
-    grid-template-columns: auto min-content;
-  }
-
-  .close-upload {
-    background: none;
-    border: 0;
-    cursor: pointer;
-    height: 1.3rem;
-    padding: 0;
-    position: absolute;
-    right: 3px;
-    top: 3px;
-  }
-
   .filters {
     display: flex;
     gap: 8px;
@@ -498,7 +399,12 @@
     flex: 1;
   }
 
-  .controls-header .st-button {
+  .controls-header .buttons {
+    display: flex;
+    gap: 4px;
+  }
+
+  .controls-header .buttons .st-button {
     gap: 4px;
     height: 20px;
   }
diff --git a/src/utilities/effects.ts b/src/utilities/effects.ts
@@ -5726,7 +5726,12 @@ const effects = {
     }
   },
 
-  async uploadExternalDataset(plan: Plan, files: FileList, user: User | null): Promise<PlanDataset | null> {
+  async uploadExternalDataset(
+    plan: Plan,
+    files: FileList,
+    user: User | null,
+    simulationDatasetId?: number,
+  ): Promise<number | null> {
     try {
       if (!gatewayPermissions.ADD_EXTERNAL_DATASET(user, plan)) {
         throwPermissionError('add external datasets');
@@ -5736,12 +5741,13 @@ const effects = {
 
       const body = new FormData();
       body.append('plan_id', `${plan.id}`);
-      body.append('file', file, file.name);
+      body.append('simulation_dataset_id', `${simulationDatasetId}`);
+      body.append('external_dataset', file, file.name);
 
-      const uploadedDataset = await reqGateway<PlanDataset | null>('/uploadDataset', 'POST', body, user, true);
+      const uploadedDatasetId = await reqGateway<number | null>('/uploadDataset', 'POST', body, user, true);
 
-      if (uploadedDataset != null) {
-        return uploadedDataset;
+      if (uploadedDatasetId != null) {
+        return uploadedDatasetId;
       }
 
       return null;
