add filter button to simulation list and plan snapshot list

add snapshot control bar to plan page

src/components/modals/CreatePlanSnapshotModal.svelte

@@ -101,6 +101,6 @@
 
 <style>
   .description {
-    padding: 0px 16px 0;
+    padding: 0px 16px;
   }
 </style>

src/components/modals/RestorePlanSnapshotModal.svelte

@@ -74,6 +74,7 @@
 <style>
   .message {
     font-weight: 500;
+    padding: 0px 16px;
   }
 
   input[type='checkbox'],

src/components/plan/PlanForm.svelte

@@ -3,18 +3,21 @@
 <script lang="ts">
   import { SearchParameters } from '../../enums/searchParameters';
   import { planSnapshotId, planSnapshotsWithSimulations } from '../../stores/planSnapshots';
+  import { simulationDataset, simulationDatasetId } from '../../stores/simulation';
   import type { User } from '../../types/app';
   import type { Plan } from '../../types/plan';
+  import type { PlanSnapshot as PlanSnapshotType } from '../../types/plan-snapshot';
   import type { PlanTagsInsertInput, Tag, TagsChangeEvent } from '../../types/tags';
   import effects from '../../utilities/effects';
-  import { setQueryParam } from '../../utilities/generic';
+  import { removeQueryParam, setQueryParam } from '../../utilities/generic';
   import { permissionHandler } from '../../utilities/permissionHandler';
   import { featurePermissions } from '../../utilities/permissions';
   import { getShortISOForDate } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
   import Collapse from '../Collapse.svelte';
   import Input from '../form/Input.svelte';
   import CardList from '../ui/CardList.svelte';
+  import FilterToggleButton from '../ui/FilterToggleButton.svelte';
   import TagsInput from '../ui/Tags/TagsInput.svelte';
   import PlanSnapshot from './PlanSnapshot.svelte';
 
@@ -24,6 +27,8 @@
   export let user: User | null;
 
   let hasPermission: boolean = false;
+  let filteredPlanSnapshots: PlanSnapshotType[] = [];
+  let isFilteredBySimulation: boolean = false;
   let permissionError = 'You do not have permission to edit this plan.';
 
   $: {
@@ -34,6 +39,14 @@
     }
   }
 
+  $: if (isFilteredBySimulation && $simulationDataset != null) {
+    filteredPlanSnapshots = $planSnapshotsWithSimulations.filter(
+      planSnapshot => planSnapshot.revision === $simulationDataset?.plan_revision,
+    );
+  } else {
+    filteredPlanSnapshots = $planSnapshotsWithSimulations;
+  }
+
   async function onTagsInputChange(event: TagsChangeEvent) {
     const {
       detail: { tag, type },
@@ -59,6 +72,10 @@
       effects.createPlanSnapshot(plan, user);
     }
   }
+
+  function onToggleFilter() {
+    isFilteredBySimulation = !isFilteredBySimulation;
+  }
 </script>
 
 <div class="plan-form">
@@ -153,19 +170,41 @@
     </fieldset>
     <fieldset>
       <Collapse title="Snapshots" padContent={false}>
-        <button class="st-button secondary" slot="right" on:click={onCreatePlanSnapshot}>Take Snapshot</button>
+        <div class="buttons" slot="right">
+          {#if $simulationDatasetId >= 0}
+            <FilterToggleButton
+              label="Snapshot"
+              offTooltipContent="Filter snapshots by selected simulation"
+              onTooltipContent="Remove filter"
+              isOn={isFilteredBySimulation}
+              on:toggle={onToggleFilter}
+            />
+          {/if}
+          <button class="st-button secondary" on:click={onCreatePlanSnapshot}>Take Snapshot</button>
+        </div>
         <div style="margin-top: 8px">
           <CardList>
-            {#each $planSnapshotsWithSimulations as planSnapshot (planSnapshot.snapshot_id)}
+            {#each filteredPlanSnapshots as planSnapshot (planSnapshot.snapshot_id)}
               <PlanSnapshot
                 activePlanSnapshotId={$planSnapshotId}
                 {planSnapshot}
-                on:click={() => setQueryParam(SearchParameters.SNAPSHOT_ID, `${planSnapshot.snapshot_id}`, 'PUSH')}
+                on:click={() => {
+                  setQueryParam(SearchParameters.SNAPSHOT_ID, `${planSnapshot.snapshot_id}`, 'PUSH');
+                  $planSnapshotId = planSnapshot.snapshot_id;
+
+                  if (planSnapshot.simulation?.id != null) {
+                    setQueryParam(SearchParameters.SIMULATION_DATASET_ID, `${planSnapshot.simulation?.id}`, 'PUSH');
+                    $simulationDatasetId = planSnapshot.simulation?.id;
+                  } else {
+                    removeQueryParam(SearchParameters.SIMULATION_DATASET_ID);
+                    $simulationDatasetId = -1;
+                  }
+                }}
                 on:restore={() => effects.restorePlanSnapshot(planSnapshot, user)}
                 on:delete={() => effects.deletePlanSnapshot(planSnapshot, user)}
               />
             {/each}
-            {#if $planSnapshotsWithSimulations.length < 1}
+            {#if filteredPlanSnapshots.length < 1}
               <div class="st-typography-label">No Plan Snapshots Found</div>
             {/if}
           </CardList>
@@ -179,4 +218,9 @@
   .plan-form fieldset:last-child {
     padding-bottom: 16px;
   }
+
+  .buttons {
+    column-gap: 4px;
+    display: flex;
+  }
 </style>

src/components/plan/PlanSnapshotBar.svelte

@@ -0,0 +1,51 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { PlanSnapshot } from '../../types/plan-snapshot';
+
+  export let snapshot: PlanSnapshot;
+  export let numOfDirectives: number;
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<div class="snapshot-bar">
+  <div class="info">
+    <div>Preview of plan snapshot</div>
+    <div class="snapshot-name">{snapshot.snapshot_name}</div>
+    <div>{numOfDirectives} directive{numOfDirectives !== 1 ? 's' : ''}</div>
+  </div>
+
+  <div class="buttons">
+    <button class="st-button" on:click|stopPropagation={() => dispatch('restore', snapshot)}>Restore Snapshot</button>
+    <button class="st-button secondary" on:click={() => dispatch('close')}>Close Preview</button>
+  </div>
+</div>
+
+<style>
+  .snapshot-bar {
+    align-items: center;
+    background-color: var(--st-primary-10, #e6e6ff);
+    border-bottom: 1px solid var(--st-primary-30, #a1a4fc);
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 16px;
+  }
+
+  .snapshot-bar .info {
+    align-items: center;
+    color: var(--st-primary-90, #1a237e);
+    column-gap: 10px;
+    display: flex;
+    display: flex;
+    font-weight: 500;
+  }
+
+  .snapshot-bar .info .snapshot-name {
+    background-color: #fff;
+    border: 1px solid var(--st-primary-30, #a1a4fc);
+    border-radius: 16px;
+    padding: 4px 12px;
+  }
+</style>

src/components/simulation/SimulationPanel.svelte

@@ -39,6 +39,7 @@
   import GridMenu from '../menus/GridMenu.svelte';
   import Parameters from '../parameters/Parameters.svelte';
   import DatePickerActionButton from '../ui/DatePicker/DatePickerActionButton.svelte';
+  import FilterToggleButton from '../ui/FilterToggleButton.svelte';
   import Panel from '../ui/Panel.svelte';
   import PanelHeaderActionButton from '../ui/PanelHeaderActionButton.svelte';
   import PanelHeaderActions from '../ui/PanelHeaderActions.svelte';
@@ -55,6 +56,7 @@
   let formParameters: FormParameter[] = [];
   let hasRunPermission: boolean = false;
   let hasUpdatePermission: boolean = false;
+  let isFilteredBySnapshot: boolean = false;
   let numOfUserChanges: number = 0;
   let startTimeDoy: string;
   let startTimeDoyField: FieldStore<string>;
@@ -107,6 +109,16 @@
     });
   }
 
+  $: isFilteredBySnapshot = $planSnapshot !== null;
+
+  $: if (isFilteredBySnapshot) {
+    filteredSimulationDatasets = $simulationDatasetsPlan.filter(
+      simulationDataset => simulationDataset.plan_revision === $planSnapshot?.revision,
+    );
+  } else {
+    filteredSimulationDatasets = $simulationDatasetsPlan;
+  }
+
   $: if ($simulationDatasetsPlan?.length) {
     if ($planSnapshot) {
       filteredSimulationDatasets = $simulationDatasetsPlan.filter(
@@ -213,6 +225,10 @@
     }
   }
 
+  function onToggleFilter() {
+    isFilteredBySnapshot = !isFilteredBySnapshot;
+  }
+
   function updateStartTime(doyString: string) {
     if ($simulation !== null) {
       const newSimulation: Simulation = { ...$simulation, simulation_start_time: doyString };
@@ -369,6 +385,17 @@
 
     <fieldset>
       <Collapse title="Simulation History" padContent={false}>
+        <svelte:fragment slot="right">
+          {#if $planSnapshot}
+            <FilterToggleButton
+              label="Simulation"
+              offTooltipContent="Filter simulations by selected snapshot"
+              onTooltipContent="Remove filter"
+              isOn={isFilteredBySnapshot}
+              on:toggle={onToggleFilter}
+            />
+          {/if}
+        </svelte:fragment>
         <div class="simulation-history">
           {#if !filteredSimulationDatasets || !filteredSimulationDatasets.length}
             <div>No Simulation Datasets</div>

src/components/ui/FilterToggleButton.svelte

@@ -0,0 +1,73 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
+  import FilterIcon from '@nasa-jpl/stellar/icons/filter.svg?component';
+  import { createEventDispatcher } from 'svelte';
+  import { tooltip } from '../../utilities/tooltip';
+
+  export let isOn: boolean = false;
+  export let label: string = '';
+  export let offTooltipContent: string = '';
+  export let onTooltipContent: string = '';
+  export let tooltipPlacement: string = 'top';
+
+  const dispatch = createEventDispatcher();
+
+  function onClick() {
+    dispatch('toggle');
+  }
+</script>
+
+<button
+  class="st-button filter-button"
+  class:toggled={isOn}
+  on:click|stopPropagation={onClick}
+  use:tooltip={{ content: isOn ? onTooltipContent : offTooltipContent, placement: tooltipPlacement }}
+>
+  <div class="icons">
+    <FilterIcon />
+    <div class="hovered"><CloseIcon /></div>
+  </div>
+  <span>{label}</span>
+</button>
+
+<style>
+  .filter-button {
+    align-content: center;
+    background-color: var(--st-gray-15, #f1f2f3);
+    border-radius: 8px;
+    color: var(--st-gray-60, #545f64);
+    column-gap: 4px;
+    display: grid;
+    grid-template-columns: auto auto;
+    padding: 4px;
+    vertical-align: middle;
+  }
+
+  .filter-button .icons :global(*) {
+    align-self: center;
+    display: flex;
+  }
+
+  .filter-button .icons .hovered {
+    display: none;
+  }
+
+  .toggled {
+    background-color: var(--st-primary-10, #e6e6ff);
+    color: var(--st-primary-90, #1d0ebe);
+  }
+
+  .toggled:hover {
+    background-color: var(--st-primary-20, #c4c6ff);
+  }
+
+  .toggled:hover .icons > :global(svg) {
+    display: none;
+  }
+
+  .toggled:hover .icons .hovered {
+    display: inline;
+  }
+</style>

src/routes/plans/[id]/+page.svelte

@@ -19,12 +19,14 @@
   import ViewMenu from '../../../components/menus/ViewMenu.svelte';
   import PlanMergeRequestsStatusButton from '../../../components/plan/PlanMergeRequestsStatusButton.svelte';
   import PlanNavButton from '../../../components/plan/PlanNavButton.svelte';
+  import PlanSnapshotBar from '../../../components/plan/PlanSnapshotBar.svelte';
   import CssGrid from '../../../components/ui/CssGrid.svelte';
   import PlanGrid from '../../../components/ui/PlanGrid.svelte';
   import ProgressLinear from '../../../components/ui/ProgressLinear.svelte';
   import { SearchParameters } from '../../../enums/searchParameters';
   import {
     activityDirectives,
+    activityDirectivesList,
     activityDirectivesMap,
     resetActivityStores,
     selectActivity,
@@ -253,6 +255,18 @@
     clearSchedulingErrors();
   }
 
+  function onCloseSnapshotPreview() {
+    $planSnapshotId = null;
+    $simulationDatasetId = -1;
+    removeQueryParam(SearchParameters.SNAPSHOT_ID);
+    removeQueryParam(SearchParameters.SIMULATION_DATASET_ID, 'PUSH');
+  }
+
+  function onConsoleResize(event: CustomEvent<string>) {
+    const { detail } = event;
+    consoleHeightString = detail;
+  }
+
   function onKeydown(event: KeyboardEvent): void {
     if (isSaveEvent(event)) {
       event.preventDefault();
@@ -282,6 +296,11 @@
     }
   }
 
+  function onRestoreSnapshot(event: CustomEvent<PlanSnapshot>) {
+    const { detail: planSnapshot } = event;
+    effects.restorePlanSnapshot(planSnapshot, data.user);
+  }
+
   async function onSaveView(event: CustomEvent<ViewSaveEvent>) {
     const { detail } = event;
     const { definition, id, name } = detail;
@@ -460,7 +479,14 @@
       />
     </svelte:fragment>
   </Nav>
-
+  {#if $planSnapshot}
+    <PlanSnapshotBar
+      numOfDirectives={$activityDirectivesList.length}
+      snapshot={$planSnapshot}
+      on:close={onCloseSnapshotPreview}
+      on:restore={onRestoreSnapshot}
+    />
+  {/if}
   <PlanGrid
     {...$view?.definition.plan.grid}
     user={data.user}