[ENG-1354, 1415] Fixes bottom sidesheet and ReactFlow alignment issues (

#267)

src/ui/app/package.json

@@ -10,7 +10,7 @@
     "lint:fix": "eslint '*/**/*.{js,ts,tsx}' --format table --fix"
   },
   "dependencies": {
-    "@aqueducthq/common": "^0.0.11",
+    "@aqueducthq/common": "^0.0.11-rc10",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",

src/ui/common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aqueducthq/common",
   "author": "Aqueduct <[email protected]",
-  "version": "0.0.11",
+  "version": "0.0.11-rc0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "alias": {

src/ui/common/src/components/layouts/sidebar/AqueductSidebar.tsx

@@ -151,9 +151,8 @@ export const AqueductSidebar: React.FC<Props> = ({
     // open bottom to top
     bottomAligned: {
       position: 'absolute',
-      right: bottomSideSheetOffset,
+      left: MenuSidebarOffset,
       bottom: 0,
-      mx: `${BottomSidebarMarginInPx}px`,
       transition: AllTransition,
       width: bottomSideSheetWidth,
       height: `${BottomSidebarHeightInPx}px`,

src/ui/common/src/components/pages/workflow/id/index.tsx

@@ -300,13 +300,13 @@ const WorkflowPage: React.FC<WorkflowPageProps> = ({
             mt: 2,
             p: 3,
             mb: contentBottomOffsetInPx,
+            width: '100%',
+            boxSizing: 'border-box',
             backgroundColor: 'gray.50',
           }}
         >
           <ReactFlowProvider>
             <ReactFlowCanvas
-              nodes={dagPosition.result?.nodes}
-              edges={dagPosition.result?.edges}
               switchSideSheet={switchSideSheet}
               onPaneClicked={onPaneClicked}
             />

src/ui/common/src/components/workflows/ReactFlowCanvas.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import ReactFlow, {
-  Edge,
   Node as ReactFlowNode,
   useReactFlow,
 } from 'react-flow-renderer';
@@ -19,23 +18,23 @@ type ReactFlowCanvasProps = {
     event: React.MouseEvent,
     element: ReactFlowNode<ReactFlowNodeData>
   ) => void;
-  nodes: ReactFlowNode<ReactFlowNodeData>[];
-  edges: Edge[];
 };
 
 const ReactFlowCanvas: React.FC<ReactFlowCanvasProps> = ({
   onPaneClicked,
   switchSideSheet,
-  nodes,
-  edges,
 }) => {
   const openSideSheetState = useSelector(
     (state: RootState) => state.openSideSheetReducer
   );
-  const { fitView } = useReactFlow();
+  const dagPositionState = useSelector(
+    (state: RootState) => state.workflowReducer.selectedDagPosition
+  );
+
+  const { fitView, viewportInitialized } = useReactFlow();
   useEffect(() => {
     fitView();
-  }, []);
+  }, [dagPositionState]);
 
   useEffect(() => {
     // NOTE(vikram): There's a timeout here because there seems to be a
@@ -48,8 +47,8 @@ const ReactFlowCanvas: React.FC<ReactFlowCanvasProps> = ({
   return (
     <ReactFlow
       onPaneClick={onPaneClicked}
-      nodes={nodes}
-      edges={edges}
+      nodes={dagPositionState.result?.nodes}
+      edges={dagPositionState.result?.edges}
       onNodeClick={switchSideSheet}
       nodeTypes={nodeTypes}
       connectionLineStyle={connectionLineStyle}