Small plan export improvements (#1422)

* created CancellableProgressRadial component to make plan export more DRY * fix an issue where progress radial is being reset in plans table if row is changed to selected or unselected
NASA-AMMOS · Aug 15, 2024 · 1e2aeac · 1e2aeac
1 parent de382fc
commit 1e2aeac
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 103 deletions.
diff --git a/src/components/plan/PlanForm.svelte b/src/components/plan/PlanForm.svelte
@@ -1,7 +1,6 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
   import ExportIcon from '../../assets/export.svg?component';
   import { PlanStatusMessages } from '../../enums/planStatusMessages';
   import { SearchParameters } from '../../enums/searchParameters';
@@ -28,9 +27,9 @@
   import Collapse from '../Collapse.svelte';
   import Field from '../form/Field.svelte';
   import Input from '../form/Input.svelte';
+  import CancellableProgressRadial from '../ui/CancellableProgressRadial.svelte';
   import CardList from '../ui/CardList.svelte';
   import FilterToggleButton from '../ui/FilterToggleButton.svelte';
-  import ProgressRadial from '../ui/ProgressRadial.svelte';
   import PlanCollaboratorInput from '../ui/Tags/PlanCollaboratorInput.svelte';
   import TagsInput from '../ui/Tags/TagsInput.svelte';
   import PlanSnapshot from './PlanSnapshot.svelte';
@@ -189,15 +188,14 @@
         <svelte:fragment slot="right">
           {#if planExportProgress !== null}
             <button
-              class="cancel-button"
+              class="st-button icon cancel-button"
               on:click|stopPropagation={onCancelExportPlan}
               use:tooltip={{
                 content: 'Cancel Plan Export',
                 placement: 'top',
               }}
             >
-              <ProgressRadial progress={planExportProgress} size={16} strokeWidth={1} />
-              <div class="cancel"><CloseIcon /></div>
+              <CancellableProgressRadial progress={planExportProgress} />
             </button>
           {:else}
             <button
@@ -417,31 +415,8 @@
   }
 
   .cancel-button {
-    --progress-radial-background: var(--st-gray-20);
-    background: none;
     border: 0;
     border-radius: 50%;
-    position: relative;
     width: 28px;
   }
-
-  .cancel-button .cancel {
-    align-items: center;
-    cursor: pointer;
-    display: none;
-    height: 100%;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-
-  .cancel-button .cancel :global(svg) {
-    width: 10px;
-  }
-
-  .cancel-button:hover .cancel {
-    display: flex;
-  }
 </style>
diff --git a/src/components/ui/CancellableProgressRadial.svelte b/src/components/ui/CancellableProgressRadial.svelte
@@ -0,0 +1,44 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
+  import ProgressRadial from './ProgressRadial.svelte';
+
+  export { className as class };
+  export let progress: number = 0;
+  export let size: number = 16;
+
+  let className: string = '';
+</script>
+
+<div class:cancel-progress={true} class={className}>
+  <ProgressRadial {progress} {size} strokeWidth={1} />
+  <div class="cancel"><CloseIcon /></div>
+</div>
+
+<style>
+  .cancel-progress {
+    --progress-radial-background: var(--st-gray-20);
+    position: relative;
+  }
+
+  .cancel-progress .cancel {
+    align-items: center;
+    cursor: pointer;
+    display: none;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  .cancel-progress .cancel :global(svg) {
+    width: 65%;
+  }
+
+  .cancel-progress:hover .cancel {
+    display: flex;
+  }
+</style>
diff --git a/src/components/ui/DataGrid/DataGrid.svelte b/src/components/ui/DataGrid/DataGrid.svelte
@@ -56,7 +56,6 @@
   import { SvelteComponent, createEventDispatcher, onDestroy, onMount, type ComponentEvents } from 'svelte';
   import type { Dispatcher } from '../../../types/component';
   import type { DataGridRowDoubleClick, DataGridRowSelection, RowId, TRowData } from '../../../types/data-grid';
-  import { filterEmpty } from '../../../utilities/generic';
   import ContextMenu from '../../context-menu/ContextMenu.svelte';
   import ColumnResizeContextMenu from './column-menu/ColumnResizeContextMenu.svelte';
 
@@ -119,9 +118,17 @@
   };
   export let isRowSelectable: ((node: IRowNode<RowData>) => boolean) | undefined = undefined;
 
+  type RowIdRef = {
+    value: RowId | null;
+  };
+
+  const CURRENT_SELECTED_ROW_CLASS = 'ag-current-row-selected';
   const dispatch = createEventDispatcher<Dispatcher<$$Events>>();
 
   let contextMenu: ContextMenu;
+  // This is used so that the current instance of ag-grid always has a pointer to the latest current selected row id
+  // without having to call anything on the ag-grid instance that results in a full rerender
+  let currentSelectedRowIdRef: RowIdRef = { value: null };
   let gridOptions: GridOptions<RowData>;
   let gridApi: GridApi<RowData> | undefined;
   let gridDiv: HTMLDivElement;
@@ -199,13 +206,24 @@ This has been seen to result in unintended and often glitchy behavior, which oft
     currentSelectedRowId = selectedRowIds[0];
   }
 
+  $: currentSelectedRowIdRef.value = currentSelectedRowId;
+
+  /**
+   * Manually manipulate the old and newly selected row classes instead of invoking `redrawRows`
+   * in order to correctly mark what the current selected row is. Calling `redrawRows` caused cellrenders to
+   * lose their current state and be reinitialized. `refreshCells` is not enough to cause ag-grid to recompute
+   * all the row styles
+   */
   $: {
-    gridApi?.redrawRows({
-      rowNodes: [
-        gridApi?.getRowNode(`${currentSelectedRowId}`),
-        gridApi?.getRowNode(`${previousSelectedRowId}`),
-      ].filter(filterEmpty),
-    });
+    const previousSelectedRow = gridDiv?.querySelector(`[row-id="${previousSelectedRowId}"]`);
+    if (previousSelectedRow != null) {
+      previousSelectedRow.classList.remove(CURRENT_SELECTED_ROW_CLASS);
+    }
+    const currentSelectedRow = gridDiv?.querySelector(`[row-id="${currentSelectedRowId}"]`);
+    if (currentSelectedRow != null) {
+      currentSelectedRow.classList.add(CURRENT_SELECTED_ROW_CLASS);
+    }
+
     previousSelectedRowId = currentSelectedRowId;
   }
 
@@ -218,24 +236,6 @@ This has been seen to result in unintended and often glitchy behavior, which oft
     resizeObserver?.disconnect();
   });
 
-  function getRowClass(params: RowClassParams<RowData>) {
-    const rowClass: string[] = [];
-
-    if (isRowSelectable) {
-      if (isRowSelectable(params.node)) {
-        rowClass.push('ag-selectable-row');
-      }
-    } else if (rowSelection !== undefined) {
-      rowClass.push('ag-selectable-row');
-    }
-
-    if (params.data && currentSelectedRowId === getRowId(params.data)) {
-      rowClass.push('ag-current-row-selected');
-    }
-
-    return rowClass.join(' ');
-  }
-
   function onAutoSizeContent() {
     gridApi?.autoSizeAllColumns();
   }
@@ -274,7 +274,6 @@ This has been seen to result in unintended and often glitchy behavior, which oft
       columnDefs,
       doesExternalFilterPass,
       excludeHiddenColumnsFromQuickFilter: false,
-      getRowClass,
       ...(shouldAutoGenerateId ? {} : { getRowId: (params: { data: RowData }) => `${getRowId(params.data)}` }),
       isExternalFilterPresent,
       isRowSelectable,
@@ -392,6 +391,21 @@ This has been seen to result in unintended and often glitchy behavior, which oft
         onColumnStateChangeDebounced();
       },
       preventDefaultOnContextMenu: useCustomContextMenu,
+      rowClassRules: {
+        CURRENT_SELECTED_ROW_CLASS: (params: RowClassParams<RowData>) => {
+          return !!params.data && currentSelectedRowIdRef.value === getRowId(params.data);
+        },
+        'ag-selectable-row': (params: RowClassParams<RowData>) => {
+          if (isRowSelectable) {
+            if (isRowSelectable(params.node)) {
+              return true;
+            }
+          } else if (rowSelection !== undefined) {
+            return true;
+          }
+          return false;
+        },
+      },
       rowData,
       rowHeight,
       rowSelection,

diff --git a/src/components/ui/DataGrid/DataGridActions.svelte b/src/components/ui/DataGrid/DataGridActions.svelte
@@ -3,7 +3,6 @@
 <script lang="ts">
   import { permissionHandler } from '../../../utilities/permissionHandler';
 
-  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
   import DownloadIcon from '@nasa-jpl/stellar/icons/download.svg?component';
   import ExpandIcon from '@nasa-jpl/stellar/icons/expand.svg?component';
   import PenIcon from '@nasa-jpl/stellar/icons/pen.svg?component';
@@ -12,7 +11,7 @@
   import ExportIcon from '../../../assets/export.svg?component';
   import type { TRowData } from '../../../types/data-grid';
   import { tooltip } from '../../../utilities/tooltip';
-  import ProgressRadial from '../ProgressRadial.svelte';
+  import CancellableProgressRadial from '../CancellableProgressRadial.svelte';
 
   type RowData = $$Generic<TRowData>;
 
@@ -119,8 +118,7 @@
       on:click|stopPropagation={onCancelDownload}
       use:tooltip={{ ...downloadTooltip, content: `Cancel ${downloadTooltip?.content}` }}
     >
-      <ProgressRadial progress={downloadProgress} size={16} strokeWidth={1} />
-      <div class="cancel"><CloseIcon /></div>
+      <CancellableProgressRadial progress={downloadProgress} />
     </button>
   {/if}
 {/if}
@@ -170,24 +168,4 @@
     border-radius: 50%;
     position: relative;
   }
-
-  .downloading .cancel {
-    align-items: center;
-    cursor: pointer;
-    display: none;
-    height: 100%;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-
-  .downloading .cancel :global(svg) {
-    width: 10px;
-  }
-
-  .downloading:hover .cancel {
-    display: flex;
-  }
 </style>
diff --git a/src/routes/plans/+page.svelte b/src/routes/plans/+page.svelte
@@ -19,13 +19,13 @@
   import Input from '../../components/form/Input.svelte';
   import ModelStatusRollup from '../../components/model/ModelStatusRollup.svelte';
   import AlertError from '../../components/ui/AlertError.svelte';
+  import CancellableProgressRadial from '../../components/ui/CancellableProgressRadial.svelte';
   import CssGrid from '../../components/ui/CssGrid.svelte';
   import DataGridActions from '../../components/ui/DataGrid/DataGridActions.svelte';
   import { tagsCellRenderer, tagsFilterValueGetter } from '../../components/ui/DataGrid/DataGridTags';
   import SingleActionDataGrid from '../../components/ui/DataGrid/SingleActionDataGrid.svelte';
   import IconCellRenderer from '../../components/ui/IconCellRenderer.svelte';
   import Panel from '../../components/ui/Panel.svelte';
-  import ProgressRadial from '../../components/ui/ProgressRadial.svelte';
   import SectionTitle from '../../components/ui/SectionTitle.svelte';
   import TagsInput from '../../components/ui/Tags/TagsInput.svelte';
   import { InvalidDate } from '../../constants/time';
@@ -677,8 +677,7 @@
                     placement: 'top',
                   }}
                 >
-                  <ProgressRadial progress={planExportProgress} size={16} strokeWidth={1} />
-                  <div class="cancel"><CloseIcon /></div>
+                  <CancellableProgressRadial progress={planExportProgress} />
                 </button>
               {/if}
               <button
@@ -1009,30 +1008,8 @@
   }
 
   .cancel-button {
-    --progress-radial-background: var(--st-gray-20);
     background: none;
     border: 0;
-    position: relative;
-  }
-
-  .cancel-button .cancel {
-    align-items: center;
-    cursor: pointer;
-    display: none;
-    height: 100%;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-
-  .cancel-button .cancel :global(svg) {
-    width: 10px;
-  }
-
-  .cancel-button:hover .cancel {
-    display: flex;
   }
 
   .import-input-container {