Merge pull request #144 from biggraph/darabos-fix-viz

Fix visualizations after cedd3c4

lynxkite-app/web/src/index.css

@@ -82,6 +82,15 @@ body {
     box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
     border-radius: 4px;
     background: white;
+    display: flex;
+    flex-direction: column;
+
+    .node-content {
+      flex: 1;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   .expanded .lynxkite-node {

lynxkite-app/web/src/workspace/nodes/LynxKiteNode.tsx

@@ -83,7 +83,7 @@ function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
                 </p>
               }
             >
-              {props.children}
+              <div className="node-content">{props.children}</div>
             </ErrorBoundary>
             <NodeResizeControl
               minWidth={100}

lynxkite-app/web/src/workspace/nodes/NodeWithMolecule.tsx

@@ -49,12 +49,6 @@ const NodeWithMolecule = (props: any) => {
     };
   }, [props.data?.display?.value]);
 
-  const nodeStyle: CSSProperties = {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-  };
-
   const vizStyle: CSSProperties = {
     flex: 1,
     minHeight: "300px",
@@ -65,7 +59,7 @@ const NodeWithMolecule = (props: any) => {
   };
 
   return (
-    <NodeWithParams nodeStyle={nodeStyle} collapsed {...props}>
+    <NodeWithParams collapsed {...props}>
       <div style={vizStyle} ref={containerRef} />
     </NodeWithParams>
   );

lynxkite-app/web/src/workspace/nodes/NodeWithVisualization.tsx

@@ -32,11 +32,9 @@ function NodeWithVisualization(props: any) {
       chartsInstanceRef.current?.dispose();
     };
   }, [props.data?.display?.value]);
-  const nodeStyle = { display: "flex", flexDirection: "column" };
-  const vizStyle = { flex: 1 };
   return (
-    <NodeWithParams nodeStyle={nodeStyle} collapsed {...props}>
-      <div style={vizStyle} ref={chartsRef} />
+    <NodeWithParams collapsed {...props}>
+      <div style={{ flex: 1 }} ref={chartsRef} />
     </NodeWithParams>
   );
 }