From 85411f2bde4ae8c1554c8d9cc1fa0d813722bdf1 Mon Sep 17 00:00:00 2001 From: nibilin33 Date: Wed, 23 Nov 2022 16:09:09 +0800 Subject: [PATCH 1/2] refactor: output behavior make overflow-x scroll, this behavior is same as deepnote --- ui/public/favicon.ico | Bin 3870 -> 4286 bytes ui/public/logo192.png | Bin 5347 -> 3260 bytes ui/src/components/Canvas.tsx | 82 ++++++++++++++++++++++-------- ui/src/components/Toolbox.tsx | 16 ------ ui/src/components/canvas.style.js | 14 ++++- 5 files changed, 75 insertions(+), 37 deletions(-) diff --git a/ui/public/favicon.ico b/ui/public/favicon.ico index a11777cc471a4344702741ab1c8a588998b1311a..d846fff8a1d2643649b6e763534b9c0408d40481 100644 GIT binary patch literal 4286 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/ui/public/logo192.png b/ui/public/logo192.png index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..e1d1a9e2b46ffbfa63a003b114fa1c436c591ecc 100644 GIT binary patch literal 3260 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 X@eDJUQo;Ye2mwlRs(({ data, id, isConnectable }) => { // FIXME: the resultblock is rendered every time the parent codeNode changes (e.g., dragging), we may set the result number as a state of a pod to memoize the resultblock. -function ResultBlock({ pod, id, showOutput = true }) { +function ResultBlock({ pod, id }) { const store = useContext(RepoContext); + const [showOutput, setShowOutput] = useState(true); if (!store) throw new Error("Missing BearContext.Provider in the tree"); const wsRun = useStore(store, (state) => state.wsRun); return ( - + {pod.result && ( - + {pod.result.html ? (
) : ( @@ -234,11 +236,34 @@ function ResultBlock({ pod, id, showOutput = true }) { )} {pod.running && } - {showOutput && ( - + {showOutput ? ( + {/* Error */} + {pod.stdout && ( - + {pod.stdout} )} @@ -249,9 +274,9 @@ function ResultBlock({ pod, id, showOutput = true }) { fontSize: 10, flexDirection: "row", alignItems: "center", + borderTop: "1px solid rgb(214, 222, 230)", }} > - Result[{pod.result.count}]: {pod.result.text} @@ -267,6 +292,27 @@ function ResultBlock({ pod, id, showOutput = true }) { )} + ) : ( + + This output has been hidden. + + )} ); @@ -282,7 +328,6 @@ const CodeNode = memo(({ data, id, isConnectable }) => { const [frame] = React.useState({ translate: [0, 0], }); - const [showOutput, setShowOutput] = useState(true); // right, bottom const [layout, setLayout] = useState("bottom"); const isRightLayout = layout === "right"; @@ -337,8 +382,6 @@ const CodeNode = memo(({ data, id, isConnectable }) => { case ToolTypes.layout: setLayout(layout === "bottom" ? "right" : "bottom"); break; - case ToolTypes.fold: - setShowOutput(!showOutput); } }; @@ -352,7 +395,7 @@ const CodeNode = memo(({ data, id, isConnectable }) => { height={pod.height || 100} width={pod.width} axis="x" - minConstraints={[200, 200]} + minConstraints={[250, 250]} > (({ data, id, isConnectable }) => { width: "100%", height: "100%", backgroundColor: "rgb(244, 246, 248)", + borderWidth: "2px", borderColor: isEditorBlur ? "#d6dee6" : "#3182ce", }} ref={ref} @@ -392,10 +436,7 @@ const CodeNode = memo(({ data, id, isConnectable }) => { {/* The header of code pods. */} [{pod.index}] - + (({ data, id, isConnectable }) => { top: isRightLayout ? 0 : "100%", left: isRightLayout ? "100%" : 0, maxHeight: "158px", - minWidth: isRightLayout ? "200px" : "100%", + maxWidth: isRightLayout ? "300px" : "100%", + minWidth: isRightLayout ? "150px" : "100%", boxSizing: "border-box", backgroundColor: "white", zIndex: 100, padding: "0 10px", }} > - + )} diff --git a/ui/src/components/Toolbox.tsx b/ui/src/components/Toolbox.tsx index 3ad1e17c..246cd911 100644 --- a/ui/src/components/Toolbox.tsx +++ b/ui/src/components/Toolbox.tsx @@ -2,8 +2,6 @@ import { Tooltip, Box, IconButton } from "@mui/material"; import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline"; import DeleteIcon from "@mui/icons-material/Delete"; import ViewComfyIcon from "@mui/icons-material/ViewComfy"; -import UnfoldLessIcon from "@mui/icons-material/UnfoldLess"; -import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore"; export enum ToolTypes { delete, @@ -65,20 +63,6 @@ export default function ToolBox({ - - { - onRunTask && onRunTask(ToolTypes.fold, data); - }} - > - {data.showOutput ? ( - - ) : ( - - )} - -
); } diff --git a/ui/src/components/canvas.style.js b/ui/src/components/canvas.style.js index 2377c25e..70425aae 100644 --- a/ui/src/components/canvas.style.js +++ b/ui/src/components/canvas.style.js @@ -22,4 +22,16 @@ export default { paddingLeft: "5px", fontSize: "12px", }, -}; + 'hidden-btn': { + fontSize: 10, + paddingTop: '2px', + paddingBottom: '2px', + lineHeight: '10px', + zIndex: 201 + }, + 'hidden-hint': { + fontSize: 10, + color: 'rgb(151, 151, 151)', + whiteSpace: 'pre' + } +}; \ No newline at end of file From 06deb73c634993f91be1a9ee303e03e67777dc94 Mon Sep 17 00:00:00 2001 From: nibilin33 Date: Wed, 23 Nov 2022 22:53:22 +0800 Subject: [PATCH 2/2] refactor: remove boxshadow onClick event also trigger this ondrage event, so make the boxshadow appear raddom, it need another way to do --- ui/src/components/Canvas.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx index 2de405d6..36605000 100644 --- a/ui/src/components/Canvas.tsx +++ b/ui/src/components/Canvas.tsx @@ -719,14 +719,13 @@ export function Canvas() { const onNodeDragStart = useCallback( (_, node) => { const currentNode = nodesMap.get(node.id); - if (currentNode) { nodesMap.set(node.id, { ...currentNode, // selected: false, style: { ...currentNode.style, - boxShadow: `${userColor} 0px 15px 25px`, + // boxShadow: `${userColor} 0px 15px 25px`, }, }); }