Added fix for providing React flow flex dimensions

Signed-off-by: Jason Porter <jason@union.ai>
flyteorg · Sep 24, 2021 · e9f283c · e9f283c
1 parent 338ab1f
commit e9f283c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/src/components/Workflow/StaticGraphContainer.tsx b/src/components/Workflow/StaticGraphContainer.tsx
@@ -42,11 +42,12 @@ export interface StaticGraphContainerProps {
 export const StaticGraphContainer: React.FC<StaticGraphContainerProps> = ({
  workflowId
 }) => {
- const containerStyle = {
- width: '100%',
- height: '30%',
- maxHeight: '400px',
- minHeight: '220px'
+ const containerStyle: React.CSSProperties = {
+ display: 'flex',
+ flexDirection: 'column',
+ flex: `1 1 100%`,
+ minHeight: 300,
+ padding: '1rem 0'
  };
  const workflowQuery = useQuery<Workflow, Error>(
  makeWorkflowQuery(useQueryClient(), workflowId)

diff --git a/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx b/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx
@@ -25,11 +25,20 @@ const ReactFlowGraphComponent = props => {
  rfGraphJson: rfGraphJson,
  type: RFGraphTypes.main
  };
+
+ const containerStyle: React.CSSProperties = {
+ display: 'flex',
+ flex: `1 1 100%`,
+ flexDirection: 'column',
+ minHeight: '100px',
+ minWidth: '200px'
+ };
+
  return (
- <>
+ <div style={containerStyle}>
  <Legend />
  <ReactFlowWrapper {...ReactFlowProps} />
- </>
+ </div>
  );
 };
 

diff --git a/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx
@@ -134,7 +134,9 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
  * React Flow's min height to make it render
  */
  const reactFlowStyle: React.CSSProperties = {
- minHeight: 220
+ display: 'flex',
+ flex: `1 1 100%`,
+ flexDirection: 'column'
  };
 
  return (