Make schedulingConditionResponses and schedulingGoalResponses nullabl…

…e. Implement scheduling loading indication in relevant areas.
NASA-AMMOS · Jan 16, 2025 · e7eefdb · e7eefdb
1 parent ec734ef
commit e7eefdb
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 31 deletions.
diff --git a/src/components/model/ModelAssociations.svelte b/src/components/model/ModelAssociations.svelte
@@ -11,6 +11,7 @@
   import type { Model } from '../../types/model';
   import type { RadioButtonId } from '../../types/radio-buttons';
   import { permissionHandler } from '../../utilities/permissionHandler';
+  import Loading from '../Loading.svelte';
   import DefinitionEditor from '../ui/Association/DefinitionEditor.svelte';
   import CssGrid from '../ui/CssGrid.svelte';
   import CssGridGutter from '../ui/CssGridGutter.svelte';
@@ -22,6 +23,7 @@
   export let hasCreatePermission: boolean = false;
   export let hasEditSpecPermission: boolean = false;
   export let hasModelChanged: boolean = false;
+  export let loading: boolean = false;
   export let metadataList: Pick<BaseMetadata, 'id' | 'name' | 'public' | 'versions'>[] = [];
   export let model: Model | null = null;
   export let selectedAssociation: Association = 'constraint';
@@ -36,7 +38,7 @@
 
   let metadataMap: Record<number, BaseMetadata> = {};
   let numOfPrivateMetadata: number = 0;
-  let selectedAssociationId: Association = 'constraint';
+  let selectedAssociationId: Association = 'condition';
   let selectedAssociationTitle = 'Constraint';
   let selectedDefinition: string | null;
   let selectedViewId: RadioButtonId = 'model';
@@ -181,6 +183,7 @@
         <ModelSpecification
           {hasCreatePermission}
           {hasEditSpecPermission}
+          {loading}
           {metadataList}
           metadataType={selectedAssociation}
           {selectedSpecification}
@@ -192,7 +195,11 @@
         />
       {:else}
         <div class="association-items-container">
-          {#if model !== null && selectedSpecificationsList.length > 0}
+          {#if loading}
+            <div class="message">
+              <Loading />
+            </div>
+          {:else if model !== null && selectedSpecificationsList.length > 0}
             <div class="private-label">
               {#if numOfPrivateMetadata > 0}
                 {numOfPrivateMetadata}
@@ -232,7 +239,7 @@
               {/if}
             {/each}
           {:else}
-            <div class="empty-associations">
+            <div class="message st-typography-body">
               No {selectedAssociationTitle.toLowerCase()}s associated with this model yet.
             </div>
           {/if}
@@ -307,7 +314,7 @@
     padding-bottom: 1rem;
   }
 
-  .empty-associations {
+  .message {
     padding: 0 1rem;
   }
 

diff --git a/src/components/model/ModelForm.svelte b/src/components/model/ModelForm.svelte
@@ -27,8 +27,8 @@
   export let modelId: number | undefined;
   export let createdAt: string | undefined;
   export let user: User | null;
-  export let users: UserId[] = [];
-  export let views: ViewSlim[] = [];
+  export let users: UserId[] | null = null;
+  export let views: ViewSlim[] | null = null;
 
   const dispatch = createEventDispatcher<{
     createPlan: number;
@@ -182,8 +182,10 @@
       <label for="owner">Owner</label>
       <UserInput
         allowMultiple={false}
-        {users}
+        users={users || []}
         {user}
+        disabled={!users}
+        placeholder={!users ? 'Loading' : 'Search users'}
         selectedUsers={owner ? [owner] : []}
         use={[
           [
@@ -200,11 +202,15 @@
     </Input>
     <Input layout="inline">
       <label for="view">Default View</label>
-      <select name="view" class="st-select w-100" bind:value={viewId}>
-        <option value={null}>None</option>
-        {#each views as viewOption}
-          <option value={viewOption.id}>{viewOption.name} (ID: {viewOption.id})</option>
-        {/each}
+      <select name="view" class="st-select w-100" bind:value={viewId} disabled={!views}>
+        {#if !views}
+          <option>Loading</option>
+        {:else}
+          <option value={null}>None</option>
+          {#each views as viewOption}
+            <option value={viewOption.id}>{viewOption.name} (ID: {viewOption.id})</option>
+          {/each}
+        {/if}
       </select>
     </Input>
     {#if createdAt}

diff --git a/src/components/model/ModelSpecification.svelte b/src/components/model/ModelSpecification.svelte
@@ -13,6 +13,7 @@
 
   export let hasCreatePermission: boolean = false;
   export let hasEditSpecPermission: boolean = false;
+  export let loading: boolean = false;
   export let metadataList: Pick<BaseMetadata, 'id' | 'name' | 'public' | 'versions'>[] = [];
   export let metadataType: Association = 'constraint';
   export let selectedSpecifications: AssociationSpecificationMap = {};
@@ -73,7 +74,7 @@
       suppressAutoSize: true,
       suppressSizeToFit: true,
       valueGetter: (params: ValueGetterParams<BaseMetadata>) => {
-        return params?.data?.versions[0].revision;
+        return params?.data?.versions[0]?.revision;
       },
       width: 80,
     },
@@ -87,7 +88,6 @@
       resizable: true,
       sortable: false,
       width: 220,
-      wrapText: true,
     },
   ];
   const permissionError = `You do not have permission to add this ${metadataType}.`;
@@ -214,10 +214,11 @@
   </div>
   <hr />
   <div class="metadata-table-container">
-    {#if filteredMetadata.length}
+    {#if loading || filteredMetadata.length}
       <DataGrid
         bind:this={dataGrid}
         {columnDefs}
+        {loading}
         rowData={filteredMetadata}
         rowSelection="single"
         selectedRowIds={selectedSpecification ? [selectedSpecification.id] : []}

diff --git a/src/components/scheduling/Scheduling.svelte b/src/components/scheduling/Scheduling.svelte
@@ -138,6 +138,7 @@
     <SchedulingGoals
       {selectedGoal}
       schedulingGoals={allowedSchedulingGoals}
+      loading={!$schedulingGoalResponses}
       {user}
       on:deleteGoal={deleteGoalContext}
       on:rowSelected={toggleGoal}
@@ -146,6 +147,7 @@
     <SchedulingConditions
       {selectedCondition}
       schedulingConditions={allowedSchedulingConditions}
+      loading={!$schedulingConditionResponses}
       {user}
       on:deleteCondition={deleteConditionContext}
       on:rowSelected={toggleCondition}

diff --git a/src/components/scheduling/conditions/SchedulingConditions.svelte b/src/components/scheduling/conditions/SchedulingConditions.svelte
@@ -17,6 +17,7 @@
   import Panel from '../../ui/Panel.svelte';
   import SectionTitle from '../../ui/SectionTitle.svelte';
 
+  export let loading: boolean = false;
   export let schedulingConditions: SchedulingConditionMetadata[] = [];
   export let selectedCondition: SchedulingConditionMetadata | null | undefined = null;
   export let user: User | null;
@@ -84,7 +85,6 @@
       resizable: true,
       sortable: false,
       width: 220,
-      wrapText: true,
     },
   ];
 
@@ -204,9 +204,11 @@
   </svelte:fragment>
 
   <svelte:fragment slot="body">
-    {#if filteredConditions.length}
+    {#if loading || filteredConditions.length}
       <SingleActionDataGrid
         {columnDefs}
+        {loading}
+        showLoadingSkeleton
         hasEdit={true}
         itemDisplayText="Condition"
         items={filteredConditions}

diff --git a/src/components/scheduling/goals/SchedulingGoals.svelte b/src/components/scheduling/goals/SchedulingGoals.svelte
@@ -18,6 +18,7 @@
   import Panel from '../../ui/Panel.svelte';
   import SectionTitle from '../../ui/SectionTitle.svelte';
 
+  export let loading: boolean = false;
   export let schedulingGoals: SchedulingGoalMetadata[] = [];
   export let selectedGoal: SchedulingGoalMetadata | null | undefined = null;
   export let user: User | null;
@@ -85,7 +86,6 @@
       resizable: true,
       sortable: false,
       width: 220,
-      wrapText: true,
     },
   ];
 
@@ -206,9 +206,11 @@
   </svelte:fragment>
 
   <svelte:fragment slot="body">
-    {#if filteredGoals.length}
+    {#if loading || filteredGoals.length}
       <SingleActionDataGrid
         {columnDefs}
+        {loading}
+        showLoadingSkeleton
         hasEdit={true}
         itemDisplayText="Goal"
         items={filteredGoals}

diff --git a/src/components/ui/MonacoEditor.svelte b/src/components/ui/MonacoEditor.svelte
@@ -15,6 +15,7 @@
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import type { Monaco } from '../../types/monaco';
   import { ShouldRetryError, promiseRetry } from '../../utilities/generic';
+  import Loading from '../Loading.svelte';
   export { className as class };
   export { styleName as style };
   export let automaticLayout: boolean | undefined = undefined;
@@ -169,7 +170,9 @@
 
 {#if !editor}
   <slot name="loading">
-    <div style:padding="0.5rem">Loading Editor...</div>
+    <div class="loading">
+      <Loading>Loading Editor...</Loading>
+    </div>
   </slot>
 {/if}
 
@@ -179,4 +182,8 @@
   .monaco-editor {
     height: 100%;
   }
+
+  .loading {
+    padding: 1px 32px;
+  }
 </style>
diff --git a/src/components/ui/Tags/TagsInput.svelte b/src/components/ui/Tags/TagsInput.svelte
@@ -33,6 +33,7 @@
   export let minWidth: number = 82;
   export let name: string = '';
   export let placeholder: string = 'Enter a tag...';
+  export let showPlaceholderIfDisabled: boolean = false;
   export let selected: Tag[] = [];
   export let tagDisplayName: string = 'tag';
   export let suggestionsLimit: number = 8;
@@ -245,7 +246,7 @@
           {id}
           {name}
           {disabled}
-          placeholder={disabled ? '' : placeholder}
+          placeholder={disabled && !showPlaceholderIfDisabled ? '' : placeholder}
           class="st-input"
           style:min-width={`${minWidth}px`}
           on:mouseup={openSuggestions}

diff --git a/src/components/ui/Tags/UserInput.svelte b/src/components/ui/Tags/UserInput.svelte
@@ -9,6 +9,7 @@
   import UserInputRow from './UserInputRow.svelte';
 
   export let allowMultiple: boolean = true;
+  export let disabled: boolean = false;
   export let placeholder: string = 'Search users';
   export let selectedUsers: UserId[] = [];
   export let tagDisplayName = 'user';
@@ -133,6 +134,8 @@
   bind:this={inputRef}
   {addTag}
   {allowMultiple}
+  {disabled}
+  showPlaceholderIfDisabled
   ignoreCase={false}
   {placeholder}
   creatable={false}

diff --git a/src/routes/models/[id]/+page.svelte b/src/routes/models/[id]/+page.svelte
@@ -88,7 +88,12 @@
   import { SearchParameters } from '../../../enums/searchParameters';
   import { constraints } from '../../../stores/constraints';
   import { initialModel, model, resetModelStores } from '../../../stores/model';
-  import { schedulingConditions, schedulingGoals } from '../../../stores/scheduling';
+  import {
+    schedulingConditionResponses,
+    schedulingConditions,
+    schedulingGoalResponses,
+    schedulingGoals,
+  } from '../../../stores/scheduling';
   import { users } from '../../../stores/user';
   import { views } from '../../../stores/views';
   import type { User, UserId } from '../../../types/app';
@@ -117,6 +122,7 @@
   let hasCreatePermission: boolean = false;
   let hasEditSpecPermission: boolean = false;
   let hasModelChanged: boolean = false;
+  let loading: boolean = true;
   let metadataList: Pick<BaseMetadata, 'id' | 'name' | 'public' | 'versions'>[] = [];
   let modelMetadata: {
     default_view_id: number | null;
@@ -201,6 +207,7 @@
     // goals require special logic because of priority management
     // goals must have consecutive priorities starting at 0
     case 'goal': {
+      loading = !$schedulingGoalResponses;
       hasCreatePermission = featurePermissions.schedulingGoals.canCreate(user);
       hasEditSpecPermission = featurePermissions.schedulingGoalsModelSpec.canUpdate(user);
       metadataList = getMetadata($schedulingGoals, $model, 'scheduling_specification_goals').filter(goalMetadata =>
@@ -257,6 +264,7 @@
       break;
     }
     case 'condition':
+      loading = !$schedulingConditionResponses;
       hasCreatePermission = featurePermissions.schedulingConditions.canCreate(user);
       hasEditSpecPermission = featurePermissions.schedulingConditionsModelSpec.canUpdate(user);
       metadataList = getMetadata($schedulingConditions, $model, 'scheduling_specification_conditions').filter(
@@ -266,9 +274,10 @@
       break;
     case 'constraint':
     default:
+      loading = !$constraints;
       hasCreatePermission = featurePermissions.constraints.canCreate(user);
       hasEditSpecPermission = featurePermissions.constraintsModelSpec.canUpdate(user);
-      metadataList = getMetadata($constraints, $model, 'constraint_specification');
+      metadataList = getMetadata($constraints || [], $model, 'constraint_specification');
       selectedSpecifications = selectedConstraintModelSpecifications;
   }
   $: hasModelChanged =
@@ -680,8 +689,8 @@
         modelId={$model?.id}
         createdAt={$model?.created_at}
         user={data.user}
-        users={$users ?? []}
-        views={$views ?? []}
+        users={$users}
+        views={$views}
         on:createPlan={onCreatePlanWithModel}
         on:deleteModel={onDeleteModel}
         on:hasModelChanged={onModelMetadataChange}
@@ -695,6 +704,7 @@
     {hasCreatePermission}
     {hasEditSpecPermission}
     {hasModelChanged}
+    {loading}
     {metadataList}
     model={$model}
     {selectedAssociation}

diff --git a/src/stores/scheduling.ts b/src/stores/scheduling.ts
@@ -42,17 +42,17 @@ export const schedulingRequests = gqlSubscribable<SchedulingRequest[]>(
   null,
 );
 
-export const schedulingConditionResponses = gqlSubscribable<SchedulingConditionMetadataResponse[]>(
+export const schedulingConditionResponses = gqlSubscribable<SchedulingConditionMetadataResponse[] | null>(
   gql.SUB_SCHEDULING_CONDITIONS,
   {},
-  [],
+  null,
   null,
 );
 
-export const schedulingGoalResponses = gqlSubscribable<SchedulingGoalMetadataResponse[]>(
+export const schedulingGoalResponses = gqlSubscribable<SchedulingGoalMetadataResponse[] | null>(
   gql.SUB_SCHEDULING_GOALS,
   {},
-  [],
+  null,
   null,
 );
 
@@ -81,7 +81,7 @@ export const schedulingPlanSpecification = gqlSubscribable<SchedulingPlanSpecifi
 export const schedulingConditions = derivedDeeply(
   [schedulingConditionResponses, tags],
   ([$schedulingConditionResponses, $tags]) => {
-    return $schedulingConditionResponses.map(schedulingConditionResponse =>
+    return ($schedulingConditionResponses || []).map(schedulingConditionResponse =>
       convertResponseToMetadata<SchedulingConditionMetadata, SchedulingConditionDefinition>(
         schedulingConditionResponse,
         $tags,
@@ -91,7 +91,7 @@ export const schedulingConditions = derivedDeeply(
 );
 
 export const schedulingGoals = derivedDeeply([schedulingGoalResponses, tags], ([$schedulingGoalResponses, $tags]) => {
-  return $schedulingGoalResponses.map(schedulingGoalResponse =>
+  return ($schedulingGoalResponses || []).map(schedulingGoalResponse =>
     convertResponseToMetadata<SchedulingGoalMetadata, SchedulingGoalDefinition>(schedulingGoalResponse, $tags),
   );
 });