Skip to content

Commit 1d87449

Browse files
lihebilihebi
committed
formatting
1 parent af3e99b commit 1d87449

File tree

1 file changed

+127
-115
lines changed

1 file changed

+127
-115
lines changed

‎ui/src/components/Canvas.tsx‎

Lines changed: 127 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -232,31 +232,40 @@ function ResultBlock({ pod, id, showOutput = true }) {
232232
)}
233233

234234
{pod.running && <CircularProgress />}
235-
{ showOutput && <Box overflow="scroll" maxHeight="145px" border="1px">
236-
{/* <Box bgcolor="lightgray">Error</Box> */}
237-
{pod.stdout && (
238-
<Box whiteSpace="pre-wrap" sx={{fontSize: 10}}>
239-
<Ansi>{pod.stdout}</Ansi>
240-
</Box>
241-
)}
242-
{pod?.result?.text && pod?.result?.count > 0 && (
243-
<Box sx={{ display: "flex", fontSize: 10, flexDirection: "row", alignItems: 'center' }}>
244-
<Box>Result[{pod.result.count}]:</Box>
245-
<Box component="pre" whiteSpace="pre-wrap">
235+
{showOutput && (
236+
<Box overflow="scroll" maxHeight="145px" border="1px">
237+
{/* <Box bgcolor="lightgray">Error</Box> */}
238+
{pod.stdout && (
239+
<Box whiteSpace="pre-wrap" sx={{ fontSize: 10 }}>
240+
<Ansi>{pod.stdout}</Ansi>
241+
</Box>
242+
)}
243+
{pod?.result?.text && pod?.result?.count > 0 && (
244+
<Box
245+
sx={{
246+
display: "flex",
247+
fontSize: 10,
248+
flexDirection: "row",
249+
alignItems: "center",
250+
}}
251+
>
252+
<Box>Result[{pod.result.count}]:</Box>
253+
<Box component="pre" whiteSpace="pre-wrap">
246254
{pod.result.text}
255+
</Box>
247256
</Box>
248-
</Box>
249-
)}
250-
{pod?.error && <Box color="red">{pod?.error?.evalue}</Box>}
251-
{pod?.error?.stacktrace && (
252-
<Box>
253-
<Box>StackTrace</Box>
254-
<Box whiteSpace="pre-wrap" sx={{fontSize: 10}}>
255-
<Ansi>{pod.error.stacktrace.join("\n")}</Ansi>
257+
)}
258+
{pod?.error && <Box color="red">{pod?.error?.evalue}</Box>}
259+
{pod?.error?.stacktrace && (
260+
<Box>
261+
<Box>StackTrace</Box>
262+
<Box whiteSpace="pre-wrap" sx={{ fontSize: 10 }}>
263+
<Ansi>{pod.error.stacktrace.join("\n")}</Ansi>
264+
</Box>
256265
</Box>
257-
</Box>
258-
)}
259-
</Box>}
266+
)}
267+
</Box>
268+
)}
260269
</Box>
261270
);
262271
}
@@ -271,7 +280,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
271280
const [frame] = React.useState({
272281
translate: [0, 0],
273282
});
274-
const [showOutput,setShowOutput] = useState(true);
283+
const [showOutput, setShowOutput] = useState(true);
275284
// right, bottom
276285
const [layout, setLayout] = useState("bottom");
277286
const isRightLayout = layout === "right";
@@ -337,107 +346,110 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
337346
if (!pod) return null;
338347
return (
339348
<ResizableBox
340-
onResizeStop={onResize}
341-
height={pod.height || 100}
342-
width={pod.width}
343-
axis="x"
344-
minConstraints={[200, 200]}
345-
>
346-
<Box
347-
sx={{
348-
border: "solid 1px #d6dee6",
349-
borderRadius: "4px",
350-
width: "100%",
351-
height: "100%",
352-
backgroundColor: "rgb(244, 246, 248)",
353-
borderColor: isEditorBlur ? "#d6dee6" : "#3182ce",
354-
}}
355-
ref={ref}
349+
onResizeStop={onResize}
350+
height={pod.height || 100}
351+
width={pod.width}
352+
axis="x"
353+
minConstraints={[200, 200]}
356354
>
357-
<Handle
358-
type="source"
359-
position={Position.Top}
360-
id="top"
361-
isConnectable={isConnectable}
362-
/>
363-
<Handle
364-
type="source"
365-
position={Position.Bottom}
366-
id="bottom"
367-
isConnectable={isConnectable}
368-
/>
369-
<Handle
370-
type="source"
371-
position={Position.Left}
372-
id="left"
373-
isConnectable={isConnectable}
374-
/>
375-
<Handle
376-
type="source"
377-
position={Position.Right}
378-
id="right"
379-
isConnectable={isConnectable}
380-
/>
381-
{/* The header of code pods. */}
382-
<Box className="custom-drag-handle">
383-
<Box sx={styles["pod-index"]}>[{pod.index}]</Box>
384-
<ToolBox data={{ id, showOutput }} onRunTask={runToolBoxTask}></ToolBox>
385-
</Box>
386355
<Box
387356
sx={{
388-
height: "90%",
389-
}}
390-
onClick={(e) => {
391-
// If the node is selected (for resize), the cursor is not shown. So
392-
// we need to deselect it when we re-focus on the editor.
393-
setSelected(null);
394-
setNodes((nds) =>
395-
applyNodeChanges(
396-
[
397-
{
398-
id,
399-
type: "select",
400-
selected: false,
401-
},
402-
],
403-
nds
404-
)
405-
);
357+
border: "solid 1px #d6dee6",
358+
borderRadius: "4px",
359+
width: "100%",
360+
height: "100%",
361+
backgroundColor: "rgb(244, 246, 248)",
362+
borderColor: isEditorBlur ? "#d6dee6" : "#3182ce",
406363
}}
364+
ref={ref}
407365
>
408-
<MyMonaco
409-
id={id}
410-
gitvalue=""
411-
onBlur={() => {
412-
setIsEditorBlur(true);
366+
<Handle
367+
type="source"
368+
position={Position.Top}
369+
id="top"
370+
isConnectable={isConnectable}
371+
/>
372+
<Handle
373+
type="source"
374+
position={Position.Bottom}
375+
id="bottom"
376+
isConnectable={isConnectable}
377+
/>
378+
<Handle
379+
type="source"
380+
position={Position.Left}
381+
id="left"
382+
isConnectable={isConnectable}
383+
/>
384+
<Handle
385+
type="source"
386+
position={Position.Right}
387+
id="right"
388+
isConnectable={isConnectable}
389+
/>
390+
{/* The header of code pods. */}
391+
<Box className="custom-drag-handle">
392+
<Box sx={styles["pod-index"]}>[{pod.index}]</Box>
393+
<ToolBox
394+
data={{ id, showOutput }}
395+
onRunTask={runToolBoxTask}
396+
></ToolBox>
397+
</Box>
398+
<Box
399+
sx={{
400+
height: "90%",
413401
}}
414-
onFocus={() => {
415-
setIsEditorBlur(false);
416-
setCurrentEditor(id);
402+
onClick={(e) => {
403+
// If the node is selected (for resize), the cursor is not shown. So
404+
// we need to deselect it when we re-focus on the editor.
405+
setSelected(null);
406+
setNodes((nds) =>
407+
applyNodeChanges(
408+
[
409+
{
410+
id,
411+
type: "select",
412+
selected: false,
413+
},
414+
],
415+
nds
416+
)
417+
);
417418
}}
418-
/>
419-
{showResult && (
420-
<Box
421-
className="nowheel"
422-
sx={{
423-
border: "solid 1px #d6dee6",
424-
borderRadius: "4px",
425-
position: "absolute",
426-
top: isRightLayout ? 0 : "100%",
427-
left: isRightLayout ? "100%" : 0,
428-
maxHeight: "158px",
429-
minWidth: isRightLayout ? "200px" : "100%",
430-
boxSizing: "border-box",
431-
backgroundColor: "white",
432-
zIndex: 100,
433-
padding: "0 10px",
419+
>
420+
<MyMonaco
421+
id={id}
422+
gitvalue=""
423+
onBlur={() => {
424+
setIsEditorBlur(true);
434425
}}
435-
>
436-
<ResultBlock pod={pod} id={id} showOutput={showOutput}/>
437-
</Box>
438-
)}
426+
onFocus={() => {
427+
setIsEditorBlur(false);
428+
setCurrentEditor(id);
429+
}}
430+
/>
431+
{showResult && (
432+
<Box
433+
className="nowheel"
434+
sx={{
435+
border: "solid 1px #d6dee6",
436+
borderRadius: "4px",
437+
position: "absolute",
438+
top: isRightLayout ? 0 : "100%",
439+
left: isRightLayout ? "100%" : 0,
440+
maxHeight: "158px",
441+
minWidth: isRightLayout ? "200px" : "100%",
442+
boxSizing: "border-box",
443+
backgroundColor: "white",
444+
zIndex: 100,
445+
padding: "0 10px",
446+
}}
447+
>
448+
<ResultBlock pod={pod} id={id} showOutput={showOutput} />
449+
</Box>
450+
)}
451+
</Box>
439452
</Box>
440-
</Box>
441453
</ResizableBox>
442454
);
443455
});

0 commit comments

Comments
 (0)