Skip to content

feat: refactor output box #93

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

Merged
merged 2 commits into from
Nov 25, 2022
Merged

feat: refactor output box #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f02d5fb
feat: refactor output box
nibilin33 Nov 25, 2022
7610e02
refactor: remove error hint
nibilin33 Nov 25, 2022
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
74 changes: 59 additions & 15 deletions ui/src/components/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,15 +193,18 @@ const ScopeNode = memo<Props>(({ 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");
return (
<Box>
<Box
sx={{
minHeight: pod.height,
}}>
{pod.result && (
<Box
sx={{ display: "flex", flexDirection: "column" }}
overflow="scroll"
>
{pod.result.html ? (
<div dangerouslySetInnerHTML={{ __html: pod.result.html }}></div>
Expand Down Expand Up @@ -235,11 +238,33 @@ function ResultBlock({ pod, id, showOutput = true }) {
)}

{pod.running && <CircularProgress />}
{showOutput && (
<Box overflow="scroll" maxHeight="145px" border="1px">
{showOutput ? (
<Box
sx={{ paddingBottom: "2px" }}
overflow="scroll"
maxHeight="145px"
border="1px">
{/* <Box bgcolor="lightgray">Error</Box> */}
<Button
onClick={() => {
setShowOutput(!showOutput);
}}
sx={[
styles["hidden-btn"],
{
position: "absolute",
top: 0,
right: 0,
zIndex: 201,
},
]}
variant="text"
size="small"
>
Hide output
</Button>
{pod.stdout && (
<Box whiteSpace="pre-wrap" sx={{ fontSize: 10 }}>
<Box whiteSpace="pre-wrap" sx={{ fontSize: 10, paddingBottom: 1 }}>
<Ansi>{pod.stdout}</Ansi>
</Box>
)}
Expand All @@ -250,9 +275,9 @@ function ResultBlock({ pod, id, showOutput = true }) {
fontSize: 10,
flexDirection: "row",
alignItems: "center",
borderTop: "1px solid rgb(214, 222, 230)",
}}
>
<Box>Result[{pod.result.count}]:</Box>
<Box component="pre" whiteSpace="pre-wrap">
{pod.result.text}
</Box>
Expand All @@ -268,6 +293,27 @@ function ResultBlock({ pod, id, showOutput = true }) {
</Box>
)}
</Box>
):(
<Box
sx={{
paddingBottom: "5px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Box sx={styles["hidden-hint"]}>This output has been hidden. </Box>
<Button
onClick={() => {
setShowOutput(!showOutput);
}}
sx={styles["hidden-btn"]}
size="small"
variant="text"
>
Show it
</Button>
</Box>
)}
</Box>
);
Expand All @@ -286,7 +332,6 @@ const CodeNode = memo<Props>(({ 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";
Expand Down Expand Up @@ -352,8 +397,6 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
case ToolTypes.layout:
setLayout(layout === "bottom" ? "right" : "bottom");
break;
case ToolTypes.fold:
setShowOutput(!showOutput);
}
};

Expand All @@ -372,7 +415,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
<Box
sx={{
border: "solid 1px #d6dee6",
borderWidth: pod.ispublic ? "4px" : "1px",
borderWidth: pod.ispublic ? "4px" : "2px",
borderRadius: "4px",
width: "100%",
height: "100%",
Expand Down Expand Up @@ -413,7 +456,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
<Box className="custom-drag-handle">
<Box sx={styles["pod-index"]}>[{pod.index}]</Box>
<ToolBox
data={{ id, showOutput }}
data={{ id }}
onRunTask={runToolBoxTask}
></ToolBox>
</Box>
Expand Down Expand Up @@ -460,14 +503,15 @@ const CodeNode = memo<Props>(({ 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",
}}
>
<ResultBlock pod={pod} id={id} showOutput={showOutput} />
<ResultBlock pod={pod} id={id} />
</Box>
)}
</Box>
Expand Down Expand Up @@ -706,7 +750,7 @@ export function Canvas() {
// selected: false,
style: {
...currentNode.style,
boxShadow: `${userColor} 0px 15px 25px`,
// boxShadow: `${userColor} 0px 15px 25px`,
},
});
}
Expand Down
14 changes: 0 additions & 14 deletions ui/src/components/Toolbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,20 +65,6 @@ export default function ToolBox({
<ViewComfyIcon fontSize="inherit" />
</IconButton>
</Tooltip>
<Tooltip title={data.showOutput ? "Fold output" : "Unfold output"}>
<IconButton
size="small"
onClick={() => {
onRunTask && onRunTask(ToolTypes.fold, data);
}}
>
{data.showOutput ? (
<UnfoldLessIcon fontSize="inherit" />
) : (
<UnfoldMoreIcon fontSize="inherit" />
)}
</IconButton>
</Tooltip>
</Box>
);
}
13 changes: 13 additions & 0 deletions ui/src/components/canvas.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,17 @@ export default {
paddingLeft: "5px",
fontSize: "12px",
},
'hidden-btn': {
fontSize: 10,
paddingTop: '3px',
paddingBottom: '2px',
lineHeight: '10px',
zIndex: 201
},
'hidden-hint': {
fontSize: 10,
color: 'rgb(151, 151, 151)',
whiteSpace: 'pre',
paddingTop: '2px'
}
};
33 changes: 29 additions & 4 deletions ui/src/pages/repos/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,10 +186,21 @@ function RepoLine({ repo, deletable, sharable }) {
);
}

function Repos({ url = FETCH_REPOS, type = RepoTypes.repo }) {
function Repos({
url = FETCH_REPOS,
type = RepoTypes.repo,
onLoading = (load) => {},
}) {
const { loading, error, data } = useQuery(url);
if (loading) return <p>Loading...</p>;
if (error) return <Alert severity="error">{error.message}</Alert>;
if (loading) {
onLoading(loading);
return null;
} else {
onLoading(loading);
}
if (error) {
return null;
}
const repos = data[type].slice().reverse();
return (
<Box>
Expand Down Expand Up @@ -254,6 +265,7 @@ function Repos({ url = FETCH_REPOS, type = RepoTypes.repo }) {
}
export default function Page() {
const { me } = useMe();
const [loading, setLoading] = useState(true);
return (
<Box sx={{ maxWidth: "sm", alignItems: "center", m: "auto" }}>
{/* TODO some meta information about the user */}
Expand All @@ -270,7 +282,20 @@ export default function Page() {
👋 Welcome, {me?.firstname}! Please open or create a repository to get
started.
</Box>
<Repos />
{loading && (
<Box
sx={{
display: "flex",
justifyContent: "center",
}}
>
<CircularProgress />
</Box>
)}
<Repos
onLoading={(value)=>{
setLoading(value)
}}/>
Comment on lines +295 to +298
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI #106

<Repos url={FETCH_COLLAB_REPOS} type={RepoTypes.collab} />
</Box>
);
Expand Down