Use gqlSubscribable .loading/.error stores across UI (#1885)

* Use gqlSubscribable .loading/.error stores across UI
* Replace null-check loading patterns and derived loading stores with the .loading sub-stores exposed by gqlSubscribable. 
* Add error handling via AsyncContentState to list-based panels (Constraints, Scheduling Goals/Conditions, PlanForm snapshots, Actions). 
* Remove T[] | null types from array stores in favor of T[] defaults. 
* Fix DataGrid to properly show no-rows overlay after loading completes. 
* Fix subscribable error handler to clear loading state on subscription errors.

Author: AaronPlave

e2e-tests/fixtures/Constraints.ts

@@ -10,7 +10,7 @@ export class Constraints {
   constraintDefinition: string = `export default function peelGreaterThanOrEqual3(): Constraint { return Real.Resource('/peel').greaterThanOrEqual(3); }`;
   constraintDescription: string = 'This is a constraint description.';
   constraintName: string;
-  emptyConstraintsLabel: Locator;
+
   inputConstraintDefinition: Locator;
   inputConstraintDescription: Locator;
   inputConstraintModel: Locator;
@@ -90,7 +90,7 @@ export class Constraints {
 
   async goto() {
     await this.page.goto('/constraints', { waitUntil: 'networkidle' });
-    await expect(this.table.or(this.emptyConstraintsLabel)).toBeVisible();
+    await expect(this.table).toBeVisible();
   }
 
   async gotoNew() {
@@ -101,7 +101,6 @@ export class Constraints {
     this.closeButton = page.locator(`button:has-text("Close")`);
     this.confirmModal = page.locator(`.modal:has-text("Delete Constraint")`);
     this.confirmModalDeleteButton = this.confirmModal.getByRole('button', { name: 'Delete' });
-    this.emptyConstraintsLabel = page.getByText('No Constraints Found');
     this.inputConstraintDefinition = page.locator('.monaco-editor >> textarea.inputarea');
     this.inputConstraintDescription = page.locator('textarea[name="metadata-description"]');
     this.inputConstraintModel = page.locator(this.inputConstraintModelSelector);

src/components/constraints/ConstraintForm.svelte

@@ -242,7 +242,7 @@
 <PageTitle subTitle={pageSubtitle} title={pageTitle} />
 
 <AssociationForm
-  allMetadata={$constraints || []}
+  allMetadata={$constraints}
   defaultDefinitionCode={`export default (): Constraint => {\n\n}\n`}
   definitionTypeConfigurations={{
     code: { label: 'EDSL' },

src/components/constraints/Constraints.svelte

@@ -93,15 +93,15 @@
   let hasPermission: boolean = false;
   let selectedConstraint: ConstraintMetadata | null = null;
 
-  $: filteredConstraints = ($constraints || []).filter(constraint => {
+  $: filteredConstraints = $constraints.filter(constraint => {
     const filterTextLowerCase = filterText.toLowerCase();
     const includesId = `${constraint.id}`.includes(filterTextLowerCase);
     const includesName = constraint.name.toLocaleLowerCase().includes(filterTextLowerCase);
     return includesId || includesName;
   });
   $: hasPermission = featurePermissions.constraints.canCreate(user);
   $: if (selectedConstraint !== null) {
-    const found = ($constraints || []).findIndex(constraint => constraint.id === selectedConstraint?.id);
+    const found = $constraints.findIndex(constraint => constraint.id === selectedConstraint?.id);
     if (found === -1) {
       selectedConstraint = null;
     }
@@ -165,14 +165,14 @@
 
   function deleteConstraintContext(event: CustomEvent<RowId[]>) {
     const id = event.detail[0] as number;
-    const constraint = ($constraints || []).find(c => c.id === id);
+    const constraint = $constraints.find(c => c.id === id);
     if (constraint) {
       deleteConstraint(constraint);
     }
   }
 
   function editConstraint({ id }: Pick<ConstraintMetadata, 'id'>) {
-    const constraint = ($constraints || []).find(c => c.id === id);
+    const constraint = $constraints.find(c => c.id === id);
     goto(`${base}/constraints/edit/${id}?${SearchParameters.REVISION}=${constraint?.versions[0].revision}`);
   }
 
@@ -235,24 +235,21 @@
     </svelte:fragment>
 
     <svelte:fragment slot="body">
-      {#if $initialConstraintsLoading || filteredConstraints.length}
-        <SingleActionDataGrid
-          showLoadingSkeleton
-          loading={$initialConstraintsLoading}
-          {columnDefs}
-          hasEdit={true}
-          {hasDeletePermission}
-          {hasEditPermission}
-          itemDisplayText="Constraint"
-          items={filteredConstraints}
-          {user}
-          on:deleteItem={deleteConstraintContext}
-          on:editItem={editConstraintContext}
-          on:rowSelected={toggleConstraint}
-        />
-      {:else}
-        <div class="p1 st-typography-label">No Constraints Found</div>
-      {/if}
+      <SingleActionDataGrid
+        showLoadingSkeleton
+        loading={$initialConstraintsLoading}
+        {columnDefs}
+        hasEdit={true}
+        {hasDeletePermission}
+        {hasEditPermission}
+        itemDisplayText="Constraint"
+        noRowsOverlayText="No Constraints Found"
+        items={filteredConstraints}
+        {user}
+        on:deleteItem={deleteConstraintContext}
+        on:editItem={editConstraintContext}
+        on:rowSelected={toggleConstraint}
+      />
     </svelte:fragment>
   </Panel>
 

src/components/constraints/ConstraintsPanel.svelte

@@ -19,6 +19,7 @@
     constraintResponseMap,
     constraintResponses,
     constraintVisibilityMap,
+    constraints,
     constraintsMap,
     constraintsStatus,
     getConstraintDefaultsKey,
@@ -51,14 +52,17 @@
   import { required } from '../../utilities/validators';
   import CollapsibleListControls from '../CollapsibleListControls.svelte';
   import DatePickerField from '../form/DatePickerField.svelte';
-  import Loading from '../Loading.svelte';
   import GridMenu from '../menus/GridMenu.svelte';
+  import AsyncContentState from '../ui/AsyncContentState.svelte';
   import DatePickerActionButton from '../ui/DatePicker/DatePickerActionButton.svelte';
   import Panel from '../ui/Panel.svelte';
   import PanelHeaderActionButton from '../ui/PanelHeaderActionButton.svelte';
   import PanelHeaderActions from '../ui/PanelHeaderActions.svelte';
   import ConstraintListItem from './ConstraintListItem.svelte';
 
+  const constraintPlanSpecsError = constraintPlanSpecs.error;
+  const constraintsError = constraints.error;
+
   export let gridSection: ViewGridSection;
   export let user: User | null;
 
@@ -138,7 +142,7 @@
     filterText,
     showConstraintsWithNoViolations,
   );
-  $: numOfPrivateConstraints = ($constraintPlanSpecs || []).length - $allowedConstraintPlanSpecs.length;
+  $: numOfPrivateConstraints = $constraintPlanSpecs.length - $allowedConstraintPlanSpecs.length;
 
   // Fetch effective arguments for JAR type constraints when specs and metadata are available
   // Need to depend on both $allowedConstraintPlanSpecs and $constraintsMap to avoid race condition
@@ -498,21 +502,29 @@
     </CollapsibleListControls>
 
     <div class="pt-2">
-      {#if $initialConstraintsLoading || $initialConstraintPlanSpecsLoading}
-        <div class="p-1">
-          <Loading />
-        </div>
-      {:else if !filteredConstraintPlanSpecifications.length}
-        <div class="st-typography-label filter-label-row pt-1">
-          <div class="filter-label">No constraints found</div>
-          <div class="private-label">
-            {#if numOfPrivateConstraints > 0}
-              {numOfPrivateConstraints} constraint{numOfPrivateConstraints !== 1 ? 's' : ''}
-              {numOfPrivateConstraints > 1 ? 'are' : 'is'} private and not shown
-            {/if}
+      <AsyncContentState
+        loading={$initialConstraintsLoading || $initialConstraintPlanSpecsLoading}
+        error={$constraintsError || $constraintPlanSpecsError || null}
+        errorMessage="Failed to load constraints"
+        showRetry
+        empty={!filteredConstraintPlanSpecifications.length}
+        on:retry={() => {
+          constraints.restartSocket();
+          constraintPlanSpecs.restartSocket();
+        }}
+      >
+        <svelte:fragment slot="empty">
+          <div class="st-typography-label filter-label-row pt-1">
+            <div class="filter-label">No constraints found</div>
+            <div class="private-label">
+              {#if numOfPrivateConstraints > 0}
+                {numOfPrivateConstraints} constraint{numOfPrivateConstraints !== 1 ? 's' : ''}
+                {numOfPrivateConstraints > 1 ? 'are' : 'is'} private and not shown
+              {/if}
+            </div>
           </div>
-        </div>
-      {:else}
+        </svelte:fragment>
+
         <div class="st-typography-label filter-label-row pt-1">
           <div class="filter-label">
             {#if $cachedConstraintsStatus}
@@ -572,7 +584,7 @@
             />
           {/if}
         {/each}
-      {/if}
+      </AsyncContentState>
     </div>
   </svelte:fragment>
 </Panel>

src/components/expansion/ExpansionPanel.svelte

@@ -64,7 +64,7 @@
     hasCreatePermissionSequenceFilter = featurePermissions.sequenceFilter.canCreate(user);
   }
 
-  $: relevantSimulationDatasetIds = $simulationDatasetsPlan?.map(dataset => dataset.id);
+  $: relevantSimulationDatasetIds = $simulationDatasetsPlan.map(dataset => dataset.id);
 
   $: relevantExpansionSequences = $expansionSequences.filter(sequence =>
     relevantSimulationDatasetIds?.includes(sequence.simulation_dataset_id),

src/components/expansion/ExpansionRules.svelte

@@ -31,6 +31,7 @@
   };
   type ExpansionRuleCellRendererParams = ICellRendererParams<ExpansionRule> & CellRendererParams;
 
+  const expansionRulesLoading = expansionRules.loading;
   const baseColumnDefs: DataGridColumnDef[] = [
     {
       field: 'id',
@@ -234,22 +235,21 @@
     </svelte:fragment>
 
     <svelte:fragment slot="body">
-      {#if filteredRules.length}
-        <SingleActionDataGrid
-          {columnDefs}
-          hasEdit={true}
-          {hasDeletePermission}
-          {hasEditPermission}
-          itemDisplayText="Rule"
-          items={filteredRules}
-          {user}
-          on:deleteItem={deleteRuleContext}
-          on:editItem={editRuleContext}
-          on:rowSelected={toggleRule}
-        />
-      {:else}
-        <div class="st-typography-label">No Rules Found</div>
-      {/if}
+      <SingleActionDataGrid
+        showLoadingSkeleton
+        loading={$expansionRulesLoading}
+        {columnDefs}
+        hasEdit={true}
+        {hasDeletePermission}
+        {hasEditPermission}
+        itemDisplayText="Rule"
+        noRowsOverlayText="No Rules Found"
+        items={filteredRules}
+        {user}
+        on:deleteItem={deleteRuleContext}
+        on:editItem={editRuleContext}
+        on:rowSelected={toggleRule}
+      />
     </svelte:fragment>
   </Panel>
 

src/components/expansion/ExpansionRuns.svelte

@@ -56,14 +56,14 @@
 
   $: convertOutputToSequence(selectedSequence);
   $: if (parcel) {
-    const unparsedChannelDictionary = $channelDictionaries?.find(
+    const unparsedChannelDictionary = $channelDictionaries.find(
       channelDictionaryMetadata => channelDictionaryMetadata.id === parcel?.channel_dictionary_id,
     );
-    const unparsedCommandDictionary = $commandDictionaries?.find(
+    const unparsedCommandDictionary = $commandDictionaries.find(
       commandDictionaryMetadata => commandDictionaryMetadata.id === parcel?.command_dictionary_id,
     );
-    const unparsedParameterDictionaries = ($parameterDictionariesStore || []).filter(parameterDictionaryMetadata => {
-      const parameterDictionary = $parcelToParameterDictionaries?.find(
+    const unparsedParameterDictionaries = $parameterDictionariesStore.filter(parameterDictionaryMetadata => {
+      const parameterDictionary = $parcelToParameterDictionaries.find(
         parcelToParameterDictionary =>
           parcelToParameterDictionary.parameter_dictionary_id === parameterDictionaryMetadata.id &&
           parcelToParameterDictionary.parcel_id === parcel?.id,

src/components/expansion/ExpansionSets.svelte

@@ -29,6 +29,8 @@
     editRule: (expansionRule: ExpansionRuleSlim) => void;
   };
 
+  const expansionSetsLoading = expansionSets.loading;
+
   const baseExpansionSetColumnDefs: DataGridColumnDef[] = [
     {
       field: 'id',
@@ -221,19 +223,18 @@
       </svelte:fragment>
 
       <svelte:fragment slot="body">
-        {#if $expansionSets.length}
-          <SingleActionDataGrid
-            columnDefs={expansionSetColumnDefs}
-            hasDeletePermission={hasDeleteExpansionSetPermission}
-            itemDisplayText="Expansion Set"
-            items={$expansionSets}
-            {user}
-            on:deleteItem={deleteSetContext}
-            on:rowSelected={toggleSet}
-          />
-        {:else}
-          No Expansion Sets Found
-        {/if}
+        <SingleActionDataGrid
+          showLoadingSkeleton
+          loading={$expansionSetsLoading}
+          columnDefs={expansionSetColumnDefs}
+          hasDeletePermission={hasDeleteExpansionSetPermission}
+          itemDisplayText="Expansion Set"
+          noRowsOverlayText="No Expansion Sets Found"
+          items={$expansionSets}
+          {user}
+          on:deleteItem={deleteSetContext}
+          on:rowSelected={toggleSet}
+        />
       </svelte:fragment>
     </Panel>
 

src/components/external-source/ExternalSourceManager.svelte

@@ -66,6 +66,8 @@
   };
   type SourceCellRendererParams = ICellRendererParams<ExternalSourceSlim> & CellRendererParams;
 
+  const externalSourcesLoading = externalSources.loading;
+
   // Permissions
   const deletePermissionError = 'You do not have permission to delete an external source.';
   const createPermissionError = 'You do not have permission to create an external source.';
@@ -522,7 +524,7 @@
                 {#each selectedSourceLinkedDerivationGroupsPlans as linkedPlanDerivationGroup}
                   <div class="st-typography-body collapse-important-text">
                     <a href="{base}/plans/{linkedPlanDerivationGroup.plan_id}">
-                      {($plans || []).find(plan => {
+                      {$plans.find(plan => {
                         return linkedPlanDerivationGroup.plan_id === plan.id;
                       })?.name}
                     </a>
@@ -648,26 +650,24 @@
         </slot>
       </svelte:fragment>
       <svelte:fragment slot="body">
-        {#if $externalSources.length}
-          <div id="external-sources-table" style:height="100%">
-            <BulkActionDataGrid
-              bind:dataGrid
-              {columnDefs}
-              hasDeletePermission={hasDeleteExternalSourcePermissionOnRow}
-              singleItemDisplayText="External Source"
-              pluralItemDisplayText="External Sources"
-              {filterExpression}
-              items={$externalSources}
-              {user}
-              getRowId={getExternalSourceSlimRowId}
-              on:rowClicked={({ detail }) => selectSource(detail.data)}
-              on:bulkDeleteItems={({ detail }) => onDeleteExternalSource(detail)}
-              bind:selectedItemId={selectedSourceId}
-            />
-          </div>
-        {:else}
-          <p>No external sources matching the selected external source type(s).</p>
-        {/if}
+        <div id="external-sources-table" style:height="100%">
+          <BulkActionDataGrid
+            bind:dataGrid
+            {columnDefs}
+            hasDeletePermission={hasDeleteExternalSourcePermissionOnRow}
+            singleItemDisplayText="External Source"
+            pluralItemDisplayText="External Sources"
+            {filterExpression}
+            items={$externalSources}
+            loading={$externalSourcesLoading}
+            noRowsOverlayText="No External Sources Found"
+            {user}
+            getRowId={getExternalSourceSlimRowId}
+            on:rowClicked={({ detail }) => selectSource(detail.data)}
+            on:bulkDeleteItems={({ detail }) => onDeleteExternalSource(detail)}
+            bind:selectedItemId={selectedSourceId}
+          />
+        </div>
       </svelte:fragment>
     </Panel>