implment header table loading separation for runsperSimulationPassOverviewpAGE

Author: GuustMetz

lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js

@@ -71,56 +71,61 @@ export const RunsPerSimulationPassOverviewPage = ({
 
     const commonTitle = h('h2', 'Runs per MC');
 
-    return h(
-        '.intermediate-flex-column',
-        mergeRemoteData([remoteSimulationPass, remoteRuns, remoteDetectors, remoteQcSummary]).match({
-            NotAsked: () => null,
-            Failure: (errors) => errorAlert(errors),
-            Success: ([simulationPass, runs, detectors, qcSummary]) => {
-                const activeColumns = {
-                    ...runsActiveColumns,
-                    ...getInelasticInteractionRateColumns(pdpBeamTypes),
-                    ...createRunDetectorsAsyncQcActiveColumns(
-                        perSimulationPassOverviewModel.runDetectorsSelectionModel,
-                        detectors,
-                        remoteDplDetectorsUserHasAccessTo,
-                        { simulationPass },
-                        {
-                            profile: 'runsPerSimulationPass',
-                            qcSummary,
-                        },
-                    ),
-                };
+    const fullPageData = mergeRemoteData([remoteRuns, remoteSimulationPass, remoteDetectors, remoteQcSummary]);
+    const simulationPass = remoteSimulationPass.match({ Other: () => null, Success: (data) => data });
+    const detectors = remoteDetectors.match({ Other: () => null, Success: (data) => data });
+    const qcSummary = remoteQcSummary.match({ Other: () => null, Success: (data) => data });
 
-                return [
-                    h('.flex-row.justify-between.items-center.g2', [
-                        filtersPanelPopover(perSimulationPassOverviewModel, activeColumns, { profile: 'runsPerSimulationPass' }),
-                        h('.pl2#runOverviewFilter', runNumbersFilter(perSimulationPassOverviewModel.filteringModel.get('runNumbers'))),
-                        h(
-                            '.flex-row.g1.items-center',
-                            breadcrumbs([commonTitle, h('h2#breadcrumb-simulation-pass-name', simulationPass.name)]),
-                        ),
-                        mcReproducibleAsNotBadToggle(
-                            mcReproducibleAsNotBad,
-                            () => perSimulationPassOverviewModel.setMcReproducibleAsNotBad(!mcReproducibleAsNotBad),
-                        ),
-                        h('.mlauto', qcSummaryLegendTooltip()),
-                        exportTriggerAndModal(perSimulationPassOverviewModel.exportModel, modalModel, { autoMarginLeft: false }),
-                        frontLink(
-                            h(
-                                'button.btn.btn-primary.w-100.h2}#set-qc-flags-trigger',
-                                {
-                                    disabled: perSimulationPassOverviewModel.runDetectorsSelectionModel.selectedQueryString.length < 1,
-                                },
-                                'Set QC Flags',
-                            ),
-                            'qc-flag-creation-for-simulation-pass',
-                            {
-                                runNumberDetectorsMap: perSimulationPassOverviewModel.runDetectorsSelectionModel.selectedQueryString,
-                                simulationPassId,
-                            },
-                        ),
-                    ]),
+    const activeColumns = {
+        ...runsActiveColumns,
+        ...getInelasticInteractionRateColumns(pdpBeamTypes),
+        ...detectors && qcSummary && createRunDetectorsAsyncQcActiveColumns(
+            perSimulationPassOverviewModel.runDetectorsSelectionModel,
+            detectors,
+            remoteDplDetectorsUserHasAccessTo,
+            { simulationPass },
+            {
+                profile: 'runsPerSimulationPass',
+                qcSummary,
+            },
+        ),
+    };
+
+    return [
+        h('.flex-row.justify-between.items-center.g2', [
+            filtersPanelPopover(perSimulationPassOverviewModel, activeColumns, { profile: 'runsPerSimulationPass' }),
+            h('.pl2#runOverviewFilter', runNumbersFilter(perSimulationPassOverviewModel.filteringModel.get('runNumbers'))),
+            h(
+                '.flex-row.g1.items-center',
+                breadcrumbs([commonTitle, h('h2#breadcrumb-simulation-pass-name', simulationPass?.name)]),
+            ),
+            mcReproducibleAsNotBadToggle(
+                mcReproducibleAsNotBad,
+                () => perSimulationPassOverviewModel.setMcReproducibleAsNotBad(!mcReproducibleAsNotBad),
+            ),
+            h('.mlauto', qcSummaryLegendTooltip()),
+            exportTriggerAndModal(perSimulationPassOverviewModel.exportModel, modalModel, { autoMarginLeft: false }),
+            frontLink(
+                h(
+                    'button.btn.btn-primary.w-100.h2}#set-qc-flags-trigger',
+                    {
+                        disabled: perSimulationPassOverviewModel.runDetectorsSelectionModel.selectedQueryString.length < 1,
+                    },
+                    'Set QC Flags',
+                ),
+                'qc-flag-creation-for-simulation-pass',
+                {
+                    runNumberDetectorsMap: perSimulationPassOverviewModel.runDetectorsSelectionModel.selectedQueryString,
+                    simulationPassId,
+                },
+            ),
+        ]),
+        h(
+            '.intermediate-flex-column',
+            fullPageData.match({
+                NotAsked: () => null,
+                Failure: (errors) => errorAlert(errors),
+                Success: ([runs]) => [
                     table(
                         runs,
                         activeColumns,
@@ -132,9 +137,9 @@ export const RunsPerSimulationPassOverviewPage = ({
                         { sort: sortModel },
                     ),
                     paginationComponent(perSimulationPassOverviewModel.pagination),
-                ];
-            },
-            Loading: () => spinner(),
-        }),
-    );
+                ],
+                Loading: () => spinner(),
+            }),
+        ),
+    ];
 };