[dagit] Fix right Asset Graph panel missing if saved "explorer" state…

… is absent (#7013)

js_modules/dagit/packages/core/src/runs/RunStatusPez.stories.tsx

@@ -4,10 +4,10 @@ import faker from 'faker';
 import * as React from 'react';
 
 import {StorybookProvider} from '../testing/StorybookProvider';
+import {generateRunMocks} from '../testing/generateRunMocks';
 import {RunStatus} from '../types/globalTypes';
 
 import {RunStatusPez, RunStatusPezList} from './RunStatusPez';
-import {generateRuns} from './RunTimeline.stories';
 import {RunTimeFragment} from './types/RunTimeFragment';
 
 // eslint-disable-next-line import/no-default-export
@@ -65,12 +65,12 @@ export const List = () => {
         <RunStatusPezList
           repoAddress={fakeRepo}
           fade
-          runs={wrapToFragment(generateRuns(10, [tenDaysAgo, now]))}
+          runs={wrapToFragment(generateRunMocks(10, [tenDaysAgo, now]))}
         />
         <RunStatusPezList
           repoAddress={fakeRepo}
           fade
-          runs={wrapToFragment(generateRuns(9, [tenDaysAgo, now])).map((f) => ({
+          runs={wrapToFragment(generateRunMocks(9, [tenDaysAgo, now])).map((f) => ({
             ...f,
             status: RunStatus.STARTED,
           }))}
@@ -79,7 +79,7 @@ export const List = () => {
           repoAddress={fakeRepo}
           fade
           runs={[
-            ...wrapToFragment(generateRuns(7, [tenDaysAgo, now])),
+            ...wrapToFragment(generateRunMocks(7, [tenDaysAgo, now])),
             ...[...new Array(3)]
               .map((_, idx) => {
                 const id = fakeId();

js_modules/dagit/packages/core/src/runs/RunTimeline.stories.tsx

@@ -3,6 +3,7 @@ import faker from 'faker';
 import * as React from 'react';
 
 import {RunTimeline} from '../runs/RunTimeline';
+import {generateRunMocks} from '../testing/generateRunMocks';
 import {RunStatus} from '../types/globalTypes';
 
 // eslint-disable-next-line import/no-default-export
@@ -11,35 +12,19 @@ export default {
   component: RunTimeline,
 } as Meta;
 
-export const generateRuns = (runCount: number, range: [number, number]) => {
-  const [start, end] = range;
-  const now = Date.now();
-  return [...new Array(6)]
-    .map(() => faker.date.between(new Date(start), new Date(end)))
-    .map((startDate) => {
-      const endTime = Math.min(startDate.getTime() + faker.datatype.number() * 10, now);
-      const status =
-        endTime === now
-          ? RunStatus.STARTED
-          : faker.random.arrayElement([RunStatus.SUCCESS, RunStatus.FAILURE]);
-
-      return {
-        id: faker.datatype.uuid(),
-        status,
-        startTime: startDate.getTime(),
-        endTime,
-      };
-    });
-};
-
 export const OneRow = () => {
   const twoHoursAgo = React.useMemo(() => Date.now() - 6 * 60 * 60 * 1000, []);
   const now = React.useMemo(() => Date.now(), []);
 
   const jobs = React.useMemo(() => {
     const jobKey = faker.random.words(2).split(' ').join('-').toLowerCase();
     return [
-      {key: jobKey, jobName: jobKey, path: `/${jobKey}`, runs: generateRuns(6, [twoHoursAgo, now])},
+      {
+        key: jobKey,
+        jobName: jobKey,
+        path: `/${jobKey}`,
+        runs: generateRunMocks(6, [twoHoursAgo, now]),
+      },
     ];
   }, [twoHoursAgo, now]);
 
@@ -52,7 +37,7 @@ export const RowWithOverlappingRuns = () => {
 
   const jobs = React.useMemo(() => {
     const jobKey = faker.random.words(2).split(' ').join('-').toLowerCase();
-    const [first, second, third] = generateRuns(3, [twoHoursAgo, now]);
+    const [first, second, third] = generateRunMocks(3, [twoHoursAgo, now]);
     return [
       {
         key: jobKey,
@@ -79,7 +64,7 @@ export const ManyRows = () => {
           key: jobKey,
           jobName: jobKey,
           path: `/${jobKey}`,
-          runs: generateRuns(6, [twoHoursAgo, now]),
+          runs: generateRunMocks(6, [twoHoursAgo, now]),
         },
       ];
     }, []);

js_modules/dagit/packages/core/src/testing/generateRunMocks.ts

@@ -0,0 +1,24 @@
+import faker from 'faker';
+
+import {RunStatus} from '../types/globalTypes';
+
+export const generateRunMocks = (runCount: number, range: [number, number]) => {
+  const [start, end] = range;
+  const now = Date.now();
+  return [...new Array(6)]
+    .map(() => faker.date.between(new Date(start), new Date(end)))
+    .map((startDate) => {
+      const endTime = Math.min(startDate.getTime() + faker.datatype.number() * 10, now);
+      const status =
+        endTime === now
+          ? RunStatus.STARTED
+          : faker.random.arrayElement([RunStatus.SUCCESS, RunStatus.FAILURE]);
+
+      return {
+        id: faker.datatype.uuid(),
+        status,
+        startTime: startDate.getTime(),
+        endTime,
+      };
+    });
+};

js_modules/dagit/packages/core/src/workspace/asset-graph/AssetGraphExplorer.tsx

@@ -1,7 +1,7 @@
 import {gql, useQuery} from '@apollo/client';
 import {Box, Checkbox, NonIdealState, SplitPanelContainer} from '@dagster-io/ui';
 import _, {flatMap, uniq, uniqBy, without} from 'lodash';
-import React, {useRef} from 'react';
+import React from 'react';
 import {useHistory} from 'react-router-dom';
 import styled from 'styled-components/macro';
 
@@ -213,7 +213,6 @@ const AssetGraphExplorerWithData: React.FC<
   } = props;
 
   const history = useHistory();
-  const splitpanelRef = useRef<SplitPanelContainer>(null);
   const findAssetInWorkspace = useFindAssetInWorkspace();
 
   const selectedAssetValues = explorerPath.opNames[explorerPath.opNames.length - 1].split(',');
@@ -295,9 +294,8 @@ const AssetGraphExplorerWithData: React.FC<
   return (
     <SplitPanelContainer
       identifier="explorer"
-      ref={splitpanelRef}
-      firstInitialPercent={100}
-      firstMinSize={600}
+      firstInitialPercent={70}
+      firstMinSize={400}
       first={
         <>
           {graphQueryItems.length === 0 ? (