Feature/svelte stellar tailwind

.vscode/extensions.json

@@ -8,6 +8,7 @@
     "GraphQL.vscode-graphql",
     "christian-kohler.path-intellisense",
     "streetsidesoftware.code-spell-checker",
-    "spmeesseman.vscode-taskexplorer"
+    "spmeesseman.vscode-taskexplorer",
+    "bradlc.vscode-tailwindcss"
   ]
 }

.vscode/settings.json

@@ -26,5 +26,8 @@
   },
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
+  "files.associations": {
+    "*.css": "tailwindcss"
   }
 }

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.0.20",
-    "@nasa-jpl/stellar": "^1.1.18",
+    "@nasa-jpl/stellar": "^2.0.0-alpha.30",
+    "@nasa-jpl/stellar-svelte": "^2.0.0-alpha.30",
     "@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",
@@ -111,6 +110,7 @@
     "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@vitest/coverage-v8": "^1.4.0",
     "@vitest/ui": "^1.4.0",
+    "autoprefixer": "^10.4.20",
     "cloc": "2.0.0-cloc",
     "codemirror": "^6.0.1",
     "d3-format": "^3.1.0",
@@ -122,6 +122,7 @@
     "jsdom": "^24.0.0",
     "picocolors": "^1.0.0",
     "picomatch": "^4.0.1",
+    "postcss": "^8.4.47",
     "postcss-html": "^1.5.0",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
@@ -130,6 +131,7 @@
     "stylelint-config-html": "^1.1.0",
     "stylelint-order": "^6.0.4",
     "svelte-check": "^3.4.4",
+    "tailwindcss": "^3.4.14",
     "tslib": "^2.6.0",
     "typescript": "5.0.4",
     "unique-names-generator": "^4.7.1",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    autoprefixer: {},
+    tailwindcss: {},
+  },
+};

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 />

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"

src/components/activity/ActivityAnchorForm.svelte

@@ -212,7 +212,7 @@
           Offset
         </label>
         <input
-          class="st-input w-100"
+          class="st-input w-full"
           class:error={!!startOffsetError}
           {disabled}
           name="start-offset"

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'}

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

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}

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>

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 })}
   >

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

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 })}

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 })}

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 })}

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}