WIP

NASA-AMMOS · Jan 29, 2025 · 79faa34 · 79faa34
1 parent c4d22a0
commit 79faa34
Show file tree

Hide file tree

Showing 67 changed files with 2,510 additions and 1,693 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,13 +41,13 @@
     "@fontsource/jetbrains-mono": "^5.0.19",
     "@nasa-jpl/aerie-ampcs": "^1.0.5",
     "@nasa-jpl/seq-json-schema": "^1.2.0",
-    "@nasa-jpl/stellar": "^1.1.18",
+    "@nasa-jpl/stellar": "^2.0.0-alpha.24",
+    "@nasa-jpl/stellar-svelte": "^2.0.0-alpha.24",
     "@streamparser/json": "^0.0.17",
     "@sveltejs/adapter-node": "5.0.1",
     "@sveltejs/kit": "^2.5.4",
     "ag-grid-community": "32.2.0",
     "ajv": "^8.12.0",
-    "bootstrap": "^5.3.0",
     "bootstrap-icons": "^1.11.0",
     "cookie": "^0.6.0",
     "d3-array": "^3.2.4",
@@ -66,7 +66,6 @@
     "jszip": "^3.10.1",
     "jwt-decode": "^4.0.0",
     "lodash-es": "^4.17.21",
-    "modern-css-reset": "^1.4.0",
     "monaco-editor": "0.47.0",
     "postgres-interval": "^4.0.0",
     "split-grid": "^1.0.11",

diff --git a/src/components/CollapsibleListControls.svelte b/src/components/CollapsibleListControls.svelte
@@ -19,7 +19,7 @@
 
 <div class="collapsible-list-controls">
   <div class="collapsible-list-controls-top">
-    <input autocomplete="off" bind:value class="st-input w-100" name="filter" {placeholder} on:input={onInput} />
+    <input autocomplete="off" bind:value class="st-input w-full" name="filter" {placeholder} on:input={onInput} />
     <slot name="right" />
   </div>
   <slot />

diff --git a/src/components/ResourceList.svelte b/src/components/ResourceList.svelte
@@ -77,7 +77,7 @@
     <Input layout="stacked">
       <label class="st-typography-body" for="file">Resource File</label>
       <input
-        class="w-100"
+        class="w-full"
         name="file"
         type="file"
         accept="application/json,.csv,.txt"

diff --git a/src/components/activity/ActivityAnchorForm.svelte b/src/components/activity/ActivityAnchorForm.svelte
@@ -213,7 +213,7 @@
           Offset
         </label>
         <input
-          class="st-input w-100"
+          class="st-input w-full"
           class:error={!!startOffsetError}
           {disabled}
           name="start-offset"

diff --git a/src/components/activity/ActivityDirectiveForm.svelte b/src/components/activity/ActivityDirectiveForm.svelte
@@ -472,7 +472,7 @@
             <input
               on:keyup={onActivityNameKeyup}
               autocomplete="off"
-              class="st-input w-100"
+              class="st-input w-full"
               name="activity-name"
               placeholder="Enter activity name"
             />
@@ -542,15 +542,15 @@
               <label use:tooltip={{ content: 'Activity Name', placement: 'top' }} for="activityName">
                 Activity Name
               </label>
-              <input class="st-input w-100" disabled name="activityName" value={activityDirective.name} />
+              <input class="st-input w-full" disabled name="activityName" value={activityDirective.name} />
             </Input>
           </Highlight>
         {/if}
 
         <Highlight highlight={highlightKeysMap.id}>
           <Input layout="inline">
             <label use:tooltip={{ content: 'Activity ID', placement: 'top' }} for="id"> ID</label>
-            <input class="st-input w-100" disabled name="id" value={activityDirective.id} />
+            <input class="st-input w-full" disabled name="id" value={activityDirective.id} />
           </Input>
         </Highlight>
 
@@ -559,7 +559,7 @@
             <label use:tooltip={{ content: 'Activity Type', placement: 'top' }} for="activity-type">
               Activity Type
             </label>
-            <input class="st-input w-100" disabled name="activity-type" value={activityDirective.type} />
+            <input class="st-input w-full" disabled name="activity-type" value={activityDirective.type} />
           </Input>
         </Highlight>
 
@@ -605,7 +605,7 @@
             <label use:tooltip={{ content: 'Creation Time (UTC)', placement: 'top' }} for="creationTime">
               Creation Time (UTC)
             </label>
-            <input class="st-input w-100" disabled name="creationTime" value={activityDirective.created_at} />
+            <input class="st-input w-full" disabled name="creationTime" value={activityDirective.created_at} />
           </Input>
         </Highlight>
 
@@ -614,7 +614,12 @@
             <label use:tooltip={{ content: 'Last Modified Time (UTC)', placement: 'top' }} for="lastModifiedTime">
               Last Modified Time (UTC)
             </label>
-            <input class="st-input w-100" disabled name="lastModifiedTime" value={activityDirective.last_modified_at} />
+            <input
+              class="st-input w-full"
+              disabled
+              name="lastModifiedTime"
+              value={activityDirective.last_modified_at}
+            />
           </Input>
         </Highlight>
 
@@ -623,14 +628,14 @@
             <label use:tooltip={{ content: 'Last Modified By', placement: 'top' }} for="modifiedBy">
               Last Modified By
             </label>
-            <input class="st-input w-100" disabled name="modifiedBy" value={activityDirective.last_modified_by} />
+            <input class="st-input w-full" disabled name="modifiedBy" value={activityDirective.last_modified_by} />
           </Input>
         </Highlight>
 
         <Highlight highlight={highlightKeysMap.last_modified_by}>
           <Input layout="inline">
             <label use:tooltip={{ content: 'Created By', placement: 'top' }} for="createdBy"> Created By </label>
-            <input class="st-input w-100" disabled name="createdBy" value={activityDirective.created_by} />
+            <input class="st-input w-full" disabled name="createdBy" value={activityDirective.created_by} />
           </Input>
         </Highlight>
 
@@ -643,7 +648,7 @@
               Source Scheduling Goal ID
             </label>
             <input
-              class="st-input w-100"
+              class="st-input w-full"
               disabled
               name="sourceSchedulingGoalId"
               value={activityDirective.source_scheduling_goal_id ?? 'None'}

diff --git a/src/components/activity/ActivityPresetInput.svelte b/src/components/activity/ActivityPresetInput.svelte
@@ -103,7 +103,7 @@
 
 <Highlight highlight={highlightKeysMap.activity_preset}>
   <div class="activity-preset-input-container">
-    <div class="preset-input-container st-input w-100">
+    <div class="preset-input-container st-input w-full">
       <!-- svelte-ignore a11y-label-has-associated-control -->
       <label class="label" use:tooltip={{ content: 'Choose activity preset', placement: 'top' }}> Preset </label>
       <EditableDropdown

diff --git a/src/components/activity/ActivitySpanForm.svelte b/src/components/activity/ActivitySpanForm.svelte
@@ -137,30 +137,30 @@
     <Collapse title="Definition">
       <Input layout="inline">
         <label use:tooltip={{ content: 'ID', placement: 'top' }} for="id"> ID </label>
-        <input class="st-input w-100" disabled name="id" value={span.span_id} />
+        <input class="st-input w-full" disabled name="id" value={span.span_id} />
       </Input>
 
       <Input layout="inline">
         <label use:tooltip={{ content: 'Activity Type', placement: 'top' }} for="activityType"> Activity Type </label>
-        <input class="st-input w-100" disabled name="activityType" value={span.type} />
+        <input class="st-input w-full" disabled name="activityType" value={span.type} />
       </Input>
 
       <Input layout="inline">
         <label use:tooltip={{ content: 'Parent ID', placement: 'top' }} for="parentId">Parent ID</label>
-        <input class="st-input w-100" disabled name="parentId" value={span.parent_id ?? 'None (Root)'} />
+        <input class="st-input w-full" disabled name="parentId" value={span.parent_id ?? 'None (Root)'} />
       </Input>
 
       <Input layout="inline">
         <label use:tooltip={{ content: 'Duration', placement: 'top' }} for="duration">Duration</label>
-        <input class="st-input w-100" disabled name="duration" value={span.duration ?? 'None'} />
+        <input class="st-input w-full" disabled name="duration" value={span.duration ?? 'None'} />
       </Input>
 
       <Input layout="inline">
         <label use:tooltip={{ content: 'Simulation Status', placement: 'top' }} for="simulationStatus">
           Simulation Status
         </label>
         <input
-          class="st-input w-100"
+          class="st-input w-full"
           disabled
           name="simulationStatus"
           value={span.duration === null ? 'Unfinished' : span.duration ? 'Finished' : 'None'}
@@ -171,14 +171,14 @@
         <label use:tooltip={{ content: 'Start Time', placement: 'top' }} for="startTime">
           Start Time ({$plugins.time.primary.label})
         </label>
-        <input class="st-input w-100" disabled name="startTime" value={startTime} />
+        <input class="st-input w-full" disabled name="startTime" value={startTime} />
       </Input>
 
       <Input layout="inline">
         <label use:tooltip={{ content: 'End Time', placement: 'top' }} for="endTime">
           End Time ({$plugins.time.primary.label})
         </label>
-        <input class="st-input w-100" disabled name="endTime" value={endTime ?? 'None'} />
+        <input class="st-input w-full" disabled name="endTime" value={endTime ?? 'None'} />
       </Input>
     </Collapse>
   </fieldset>
@@ -227,14 +227,14 @@
         <label use:tooltip={{ content: 'Simulation Dataset ID', placement: 'top' }} for="simulationDatasetId">
           Simulation Dataset ID
         </label>
-        <input class="st-input w-100" disabled name="simulationDatasetId" value={simulationDatasetId ?? 'None'} />
+        <input class="st-input w-full" disabled name="simulationDatasetId" value={simulationDatasetId ?? 'None'} />
       </Input>
 
       <Input layout="inline">
         <label use:tooltip={{ content: 'Sequence ID', placement: 'top' }} for="expansionSet">Sequence ID</label>
         <select
           bind:value={seqId}
-          class="st-select w-100"
+          class="st-select w-full"
           name="sequences"
           disabled={!filteredExpansionSequences.length}
           on:change={updateExpansionSequenceToActivity}

diff --git a/src/components/activity/ActivityTableMenu.svelte b/src/components/activity/ActivityTableMenu.svelte
@@ -80,7 +80,7 @@
     <MenuHeader title="Columns" showBorder={false} />
     <div class="search-field">
       <Input>
-        <input class="st-input w-100" value={searchFilter} on:input={onSearchFilterChange} />
+        <input class="st-input w-full" value={searchFilter} on:input={onSearchFilterChange} />
         <div class="search-icon" slot="left"><SearchIcon /></div>
       </Input>
     </div>

diff --git a/src/components/activityMetadata/ActivityMetadataBaseEnum.svelte b/src/components/activityMetadata/ActivityMetadataBaseEnum.svelte
@@ -26,7 +26,7 @@
   <ActivityMetadataName {key} />
   <select
     bind:value={enumValue}
-    class="st-select w-100"
+    class="st-select w-full"
     {disabled}
     on:change={() => dispatch('change', { key, value: enumValue })}
   >

diff --git a/src/components/activityMetadata/ActivityMetadataBaseEnumMultiselect.svelte b/src/components/activityMetadata/ActivityMetadataBaseEnumMultiselect.svelte
@@ -31,7 +31,7 @@
   <select
     bind:value={enumValues}
     multiple
-    class="st-select w-100"
+    class="st-select w-full"
     {disabled}
     on:change={() => {
       // Filter out the empty value

diff --git a/src/components/activityMetadata/ActivityMetadataBaseLongString.svelte b/src/components/activityMetadata/ActivityMetadataBaseLongString.svelte
@@ -25,7 +25,7 @@
   <ActivityMetadataName {key} />
   <Input>
     <textarea
-      class="st-input w-100"
+      class="st-input w-full"
       bind:value={stringValue}
       {disabled}
       on:change={() => dispatch('change', { key, value: stringValue })}

diff --git a/src/components/activityMetadata/ActivityMetadataBaseNumber.svelte b/src/components/activityMetadata/ActivityMetadataBaseNumber.svelte
@@ -25,7 +25,7 @@
   <Input>
     <input
       bind:value={numberValue}
-      class="st-input w-100"
+      class="st-input w-full"
       {disabled}
       type="number"
       on:change={() => dispatch('change', { key, value: numberValue })}

diff --git a/src/components/activityMetadata/ActivityMetadataBaseString.svelte b/src/components/activityMetadata/ActivityMetadataBaseString.svelte
@@ -25,7 +25,7 @@
   <ActivityMetadataName {key} />
   <Input>
     <input
-      class="st-input w-100"
+      class="st-input w-full"
       bind:value={stringValue}
       {disabled}
       on:change={() => dispatch('change', { key, value: stringValue })}

diff --git a/src/components/app/Nav.svelte b/src/components/app/Nav.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { Button, Popover } from '@nasa-jpl/stellar-svelte';
+
   import AppMenu from '../../components/menus/AppMenu.svelte';
   import type { User, UserRole } from '../../types/app';
   import { getTarget } from '../../utilities/generic';
@@ -22,6 +24,11 @@
 <div class="nav">
   <div class="left">
     <AppMenu {user} />
+    <Button>Help</Button>
+    <Popover.Root>
+      <Popover.Trigger><Button on:click={() => console.log(1)}>Popover</Button></Popover.Trigger>
+      <Popover.Content>Place content for the popover here.</Popover.Content>
+    </Popover.Root>
     <div class="divider" />
     <div class="title st-typography-medium">
       <slot name="title" />

diff --git a/src/components/expansion/ExpansionPanel.svelte b/src/components/expansion/ExpansionPanel.svelte
@@ -173,7 +173,7 @@
         </label>
         <select
           bind:value={$selectedExpansionSetId}
-          class="st-select w-100"
+          class="st-select w-full"
           disabled={!$expansionSets.length}
           name="expansionSet"
         >
@@ -236,7 +236,7 @@
         <Collapse className="details-container" title="Sequences">
           <Input>
             <label for="simulationDatasetId">Simulation Dataset ID</label>
-            <input class="st-input w-100" disabled name="simulationDatasetId" value={$simulationDatasetId ?? 'None'} />
+            <input class="st-input w-full" disabled name="simulationDatasetId" value={$simulationDatasetId ?? 'None'} />
           </Input>
 
           {#if $simulationDatasetId === null}

diff --git a/src/components/expansion/ExpansionRuleForm.svelte b/src/components/expansion/ExpansionRuleForm.svelte
@@ -240,25 +240,25 @@
       {#if mode === 'edit'}
         <fieldset>
           <label for="ruleId">Rule ID</label>
-          <input class="st-input w-100" disabled name="ruleId" value={ruleId} />
+          <input class="st-input w-full" disabled name="ruleId" value={ruleId} />
         </fieldset>
 
         <fieldset>
           <label for="createdAt">Created At</label>
-          <input class="st-input w-100" disabled name="createdAt" value={ruleCreatedAt} />
+          <input class="st-input w-full" disabled name="createdAt" value={ruleCreatedAt} />
         </fieldset>
 
         <fieldset>
           <label for="updatedAt">Updated At</label>
-          <input class="st-input w-100" disabled name="updatedAt" value={ruleUpdatedAt} />
+          <input class="st-input w-full" disabled name="updatedAt" value={ruleUpdatedAt} />
         </fieldset>
       {/if}
 
       <fieldset>
         <label for="parcel">Parcel</label>
         <select
           bind:value={parcelId}
-          class="st-select w-100"
+          class="st-select w-full"
           name="parcel"
           use:permissionHandler={{
             hasPermission: hasAuthoringPermission,
@@ -278,7 +278,7 @@
         <label for="modelId">Model</label>
         <select
           bind:value={ruleModelId}
-          class="st-select w-100"
+          class="st-select w-full"
           name="modelId"
           on:change={() => (ruleActivityType = null)}
           use:permissionHandler={{
@@ -300,7 +300,7 @@
         <label for="activityType">Activity Type</label>
         <select
           bind:value={ruleActivityType}
-          class="st-select w-100"
+          class="st-select w-full"
           name="activityType"
           use:permissionHandler={{
             hasPermission: hasAuthoringPermission,
@@ -321,7 +321,7 @@
         <input
           autocomplete="off"
           bind:value={ruleName}
-          class="st-input w-100"
+          class="st-input w-full"
           name="name"
           placeholder="Enter a rule name (required)"
           required
@@ -337,7 +337,7 @@
         <textarea
           bind:value={ruleDescription}
           autocomplete="off"
-          class="st-input w-100"
+          class="st-input w-full"
           name="description"
           placeholder="Enter a rule description (optional)"
           required