fix: polish workflow details page (#215)

* fix: polish workflow details page Signed-off-by: csirius <85753828+csirius@users.noreply.github.com> Signed-off-by: Jason Porter <jason@union.ai> * fix: react flow not being displayed in version view Signed-off-by: csirius <85753828+csirius@users.noreply.github.com> Signed-off-by: Jason Porter <jason@union.ai> * Added fix for providing React flow flex dimensions Signed-off-by: Jason Porter <jason@union.ai> * Removed flex container for static graph to prevent bad first renders Signed-off-by: Jason Porter <jason@union.ai> Co-authored-by: Jason Porter <jason@union.ai>
flyteorg · Sep 24, 2021 · dba3df1 · dba3df1
1 parent 6c21263
commit dba3df1
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 21 deletions.
diff --git a/src/components/Entities/EntityDetails.tsx b/src/components/Entities/EntityDetails.tsx
@@ -33,12 +33,11 @@ const useStyles = makeStyles((theme: Theme) => ({
         flex: '1 1 auto',
         flexDirection: 'column',
         margin: `0 -${theme.spacing(contentMarginGridUnits)}px`,
-        minHeight: theme.spacing(55)
+        flexBasis: theme.spacing(80)
     },
     versionsContainer: {
         display: 'flex',
-        flexDirection: 'column',
-        height: theme.spacing(53)
+        flexDirection: 'column'
     },
     versionView: {
         flex: '1 1 auto'

diff --git a/src/components/Entities/EntityVersions.tsx b/src/components/Entities/EntityVersions.tsx
@@ -1,6 +1,5 @@
 import Typography from '@material-ui/core/Typography';
 import { makeStyles, Theme } from '@material-ui/core/styles';
-import { contentMarginGridUnits } from 'common/layout';
 import { WaitForData } from 'components/common/WaitForData';
 import { useWorkflowExecutionFiltersState } from 'components/Executions/filters/useExecutionFiltersState';
 import { WorkflowVersionsTable } from 'components/Executions/Tables/WorkflowVersionsTable';
@@ -20,8 +19,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     headerContainer: {
         display: 'flex',
         justifyContent: 'space-between',
-        marginLeft: theme.spacing(contentMarginGridUnits),
-        marginRight: theme.spacing(contentMarginGridUnits)
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1)
     },
     header: {
         marginBottom: theme.spacing(1)

diff --git a/src/components/Executions/Tables/WorkflowVersionsTable.tsx b/src/components/Executions/Tables/WorkflowVersionsTable.tsx
@@ -60,6 +60,7 @@ export const WorkflowVersionsTable: React.FC<WorkflowVersionsTableProps> = props
             versionView={versionView}
             onClick={versionView ? handleClickRow(row.id) : undefined}
             isChecked={workflowVersion === row.id.version}
+            key={`workflow-version-row-${row.id.version}`}
         />
     );
 
@@ -77,6 +78,7 @@ export const WorkflowVersionsTable: React.FC<WorkflowVersionsTableProps> = props
                 totalRows={workflows.length}
                 showRadioButton={versionView}
                 noDataString={noWorkflowVersionsFoundString}
+                fillEmptyRows={false}
             />
         </div>
     );

diff --git a/src/components/Tables/PaginatedDataList.tsx b/src/components/Tables/PaginatedDataList.tsx
@@ -36,6 +36,7 @@ interface PaginatedDataListProps<T> {
     data: T[];
     rowRenderer: (row: T) => void;
     noDataString: string;
+    fillEmptyRows?: boolean;
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -164,6 +165,7 @@ const PaginatedDataList = <T,>({
     rowRenderer,
     totalRows,
     showRadioButton,
+    fillEmptyRows = true,
     noDataString
 }: PropsWithChildren<PaginatedDataListProps<T>>) => {
     const classes = useStyles();
@@ -211,13 +213,17 @@ const PaginatedDataList = <T,>({
                             {data.map((row, index) => {
                                 return rowRenderer(row);
                             })}
-                            {!showRadioButton && emptyRows > 0 && (
-                                <TableRow
-                                    style={{ height: `${4 * emptyRows}rem` }}
-                                >
-                                    <TableCell colSpan={6} />
-                                </TableRow>
-                            )}
+                            {fillEmptyRows &&
+                                !showRadioButton &&
+                                emptyRows > 0 && (
+                                    <TableRow
+                                        style={{
+                                            height: `${4 * emptyRows}rem`
+                                        }}
+                                    >
+                                        <TableCell colSpan={6} />
+                                    </TableRow>
+                                )}
                         </TableBody>
                     </Table>
                 </TableContainer>

diff --git a/src/components/Workflow/StaticGraphContainer.tsx b/src/components/Workflow/StaticGraphContainer.tsx
@@ -42,11 +42,10 @@ export interface StaticGraphContainerProps {
 export const StaticGraphContainer: React.FC<StaticGraphContainerProps> = ({
     workflowId
 }) => {
-    const containerStyle = {
-        width: '100%',
-        height: '30%',
-        maxHeight: '400px',
-        minHeight: '220px'
+    const containerStyle: React.CSSProperties = {
+        height: 300,
+        minHeight: 300,
+        padding: '1rem 0'
     };
     const workflowQuery = useQuery<Workflow, Error>(
         makeWorkflowQuery(useQueryClient(), workflowId)

diff --git a/src/components/common/ContentContainer.tsx b/src/components/common/ContentContainer.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) => {
         root: {
             display: 'flex',
             flexDirection: 'column',
-            height: '100vh',
+            minHeight: '100vh',
             padding: `${spacerHeight} ${contentMargin} 0 ${contentMargin}`,
             [`&.${ContainerClasses.NoMargin}`]: {
                 margin: 0,

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
@@ -130,12 +130,22 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
      *  - Append that to the rf nodes {data} object.
      */
 
+    /**
+     * React Flow's min height to make it render
+     */
+    const reactFlowStyle: React.CSSProperties = {
+        display: 'flex',
+        flex: `1 1 100%`,
+        flexDirection: 'column'
+    };
+
     return (
         <ReactFlowProvider>
             <ReactFlow
                 elements={elements}
                 onLoad={onLoad}
                 nodeTypes={CustomNodeTypes}
+                style={reactFlowStyle}
             >
                 <Background
                     style={backgroundStyle.background}