Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Better output layout #50

Merged
merged 1 commit into from
Nov 14, 2022
Merged

Better output layout #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
246 changes: 163 additions & 83 deletions ui/src/components/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ import IconButton from "@mui/material/IconButton";
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import CircleIcon from "@mui/icons-material/Circle";
import ViewComfyIcon from "@mui/icons-material/ViewComfy";

import Grid from "@mui/material/Grid";

import Moveable from "react-moveable";
import Ansi from "ansi-to-react";
Expand Down Expand Up @@ -94,7 +98,32 @@ const ScopeNode = memo<Props>(({ data, id, isConnectable }) => {
position={Position.Top}
isConnectable={isConnectable}
/>
Scope: {data?.label}
{/* The header of scope nodes. */}
<Box
className="custom-drag-handle"
bgcolor={"rgb(225,225,225)"}
sx={{ display: "flex" }}
>
<Grid container spacing={2} sx={{ alignItems: "center" }}>
<Grid item xs={4}>
<IconButton size="small">
<CircleIcon sx={{ color: "red" }} fontSize="inherit" />
</IconButton>
</Grid>
<Grid item xs={4}>
<Box
sx={{
display: "flex",
flexGrow: 1,
justifyContent: "center",
}}
>
Scope
</Box>
</Grid>
<Grid item xs={4}></Grid>
</Grid>
</Box>
<Handle
type="source"
position={Position.Bottom}
Expand Down Expand Up @@ -141,6 +170,69 @@ const ScopeNode = memo<Props>(({ data, id, isConnectable }) => {
);
});

function ResultBlock({ pod, id }) {
const store = useContext(RepoContext);
if (!store) throw new Error("Missing BearContext.Provider in the tree");
const wsRun = useStore(store, (state) => state.wsRun);
return (
<Box>
{pod.stdout && (
<Box overflow="scroll" border="1px">
{/* TODO separate stdout and stderr */}
<Box bgcolor="lightgray">Stdout</Box>
<Box whiteSpace="pre-wrap" fontSize="sm">
<Ansi>{pod.stdout}</Ansi>
</Box>
</Box>
)}
{pod.running && <CircularProgress />}
{pod.result && (
<Box
sx={{ display: "flex", flexDirection: "column" }}
overflow="scroll"
>
{pod.result.html ? (
<div dangerouslySetInnerHTML={{ __html: pod.result.html }}></div>
) : (
pod.result.text && (
<Box>
<Box sx={{ display: "flex" }} bgcolor="lightgray">
Result: [{pod.result.count}]:
</Box>
<Box>
<Box component="pre" whiteSpace="pre-wrap">
{pod.result.text}
</Box>
</Box>
</Box>
)
)}
{pod.result.image && (
<img
src={`data:image/png;base64,${pod.result.image}`}
alt="output"
/>
)}
</Box>
)}
{pod.error && (
<Box overflow="scroll" border="1px">
<Box bgcolor="lightgray">Error</Box>
<Box color="red">{pod.error.evalue}</Box>
{pod.error.stacktrace && (
<Box>
<Box>StackTrace</Box>
<Box whiteSpace="pre-wrap" fontSize="small">
<Ansi>{pod.error.stacktrace.join("\n")}</Ansi>
</Box>
</Box>
)}
</Box>
)}
</Box>
);
}

const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
const store = useContext(RepoContext);
if (!store) throw new Error("Missing BearContext.Provider in the tree");
Expand All @@ -155,6 +247,8 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
const [frame] = React.useState({
translate: [0, 0],
});
// right, bottom
const [layout, setLayout] = useState("right");
const { setNodes } = useReactFlow();
const selected = useStore(store, (state) => state.selected);
const setSelected = useStore(store, (state) => state.setSelected);
Expand All @@ -168,6 +262,13 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
nodesMap.set(id, node);
}
}, []);
const onLayout = useCallback(({ height }) => {
const node = nodesMap.get(id);
if (node) {
node.style = { ...node.style, height };
nodesMap.set(id, node);
}
}, []);

React.useEffect(() => {
setTarget(ref.current);
Expand All @@ -188,7 +289,47 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
position={Position.Top}
isConnectable={isConnectable}
/>
<Box className="custom-drag-handle">Code: {data?.label}</Box>
{/* The header of code pods. */}
<Box
className="custom-drag-handle"
bgcolor={"rgb(225,225,225)"}
sx={{ display: "flex" }}
>
{/* Code: {data?.label} */}
{/* pod */}
<Box sx={{ display: "flex", flexGrow: 1 }}>
<IconButton size="small">
<CircleIcon sx={{ color: "red" }} fontSize="inherit" />
</IconButton>
</Box>
<Box sx={{ display: "flex" }}>
<Box sx={{ display: "flex" }}>
<Tooltip title="Run (shift-enter)">
<IconButton
size="small"
sx={{ color: "green" }}
onClick={() => {
wsRun(id);
}}
>
<PlayArrowIcon fontSize="inherit" />
</IconButton>
</Tooltip>
</Box>
<Box sx={{ display: "flex" }}>
<Tooltip title="Change layout">
<IconButton
size="small"
onClick={() => {
setLayout(layout === "bottom" ? "right" : "bottom");
}}
>
<ViewComfyIcon fontSize="inherit" />
</IconButton>
</Tooltip>
</Box>
</Box>
</Box>
<Box
sx={{
height: "90%",
Expand Down Expand Up @@ -222,96 +363,35 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
clearResults(pod.id);
wsRun(pod.id);
}}
onLayout={onLayout}
/>
<Box
sx={{
position: "absolute",
bottom: 0,
right: 0,
width: "100px",
height: "100px",
backgroundColor: "white",
border: "solid 1px blue",
zIndex: 100,
}}
>
<Box sx={{ display: "flex" }}>
<Tooltip title="Run (shift-enter)">
<IconButton
size="small"
sx={{ color: "green" }}
onClick={() => {
wsRun(id);
}}
>
<PlayArrowIcon sx={{ fontSize: 15 }} />
</IconButton>
</Tooltip>
{(pod.stdout || pod.stderr || pod.result || pod.error) && (
<Box
className="nowheel"
sx={{
position: "absolute",
top: layout === "right" ? 0 : "100%",
left: layout === "right" ? "100%" : 0,
maxHeight: "100%",
maxWidth: "100%",
minWidth: "100px",
overflow: "scroll",
backgroundColor: "white",
border: "solid 1px blue",
zIndex: 100,
}}
>
<ResultBlock pod={pod} id={id} />
</Box>
{pod.stdout && (
<Box overflow="scroll" maxHeight="200px" border="1px">
{/* TODO separate stdout and stderr */}
<Box>Stdout/Stderr:</Box>
<Box whiteSpace="pre-wrap" fontSize="sm">
<Ansi>{pod.stdout}</Ansi>
</Box>
</Box>
)}
{pod.running && <CircularProgress />}
{pod.result && (
<Box
sx={{ display: "flex", flexDirection: "column" }}
overflow="scroll"
maxHeight="200px"
>
{pod.result.html ? (
<div
dangerouslySetInnerHTML={{ __html: pod.result.html }}
></div>
) : (
pod.result.text && (
<Box>
<Box sx={{ display: "flex" }} color="gray" mr="1rem">
Result: [{pod.result.count}]:
</Box>
<Box>
<Box component="pre" whiteSpace="pre-wrap">
{pod.result.text}
</Box>
</Box>
</Box>
)
)}
{pod.result.image && (
<img
src={`data:image/png;base64,${pod.result.image}`}
alt="output"
/>
)}
</Box>
)}
{pod.error && (
<Box overflow="scroll" maxHeight="3xs" border="1px">
<Box color="red">Error: {pod.error.evalue}</Box>
{pod.error.stacktrace && (
<Box>
<Box>StackTrace</Box>
<Box whiteSpace="pre-wrap" fontSize="sm">
<Ansi>{pod.error.stacktrace.join("\n")}</Ansi>
</Box>
</Box>
)}
</Box>
)}
</Box>
)}
</Box>

<Handle
type="source"
position={Position.Bottom}
isConnectable={isConnectable}
/>
{selected === id && (
{false && (
<Moveable
target={target}
resizable={true}
Expand Down
4 changes: 4 additions & 0 deletions ui/src/components/MyMonaco.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,7 @@ export function MyMonaco({
gitvalue = null,
onChange = (value) => {},
onRun = () => {},
onLayout = (height) => {},
}) {
// console.log("rendering monaco ..");
// there's no racket language support
Expand Down Expand Up @@ -345,6 +346,7 @@ export function MyMonaco({
// width: 800
// editor.layout({ width: 800, height: contentHeight });
editor.layout();
onLayout(`${contentHeight}px`);
};
editor.onDidContentSizeChange(updateHeight);
// FIXME clean up?
Expand Down Expand Up @@ -392,6 +394,8 @@ export function MyMonaco({
// theme="vs-dark"
options={{
selectOnLineNumbers: true,
// This scrollBeyondLastLine is super important. Without this, it will
// try to adjust height infinitely.
scrollBeyondLastLine: false,
folding: false,
lineNumbersMinChars: 3,
Expand Down
2 changes: 1 addition & 1 deletion ui/src/lib/runtime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -696,7 +696,7 @@ export const createRuntimeSlice: StateCreator<
set(
produce((state) => {
state.pods[id].result = null;
state.pods[id].stdout = null;
state.pods[id].stdout = "";
state.pods[id].error = null;
})
);
Expand Down