Conditional Rendering of Jupyter-React Components

[Prahmodh-Raj1]

Description

I'm trying to Load the Terminal based on Conditional Rendering of the Terminal Component as provided in the code below, but I'm running into an error. On the Toggle of the Switch Component, the Terminal Needs to be rendered. cc @echarles

Here's the error: http://127.0.0.1:8888/api/contents/jl310/share/jupyter/lab/staging/node_modules/%40jupyterlab/vega5-extension?1720775773557 net::ERR_INSUFFICIENT_RESOURCES

Please let me know if there is a solution to this issue.

Code:

import IconButton from '@mui/material/IconButton';
import SaveIcon from '@mui/icons-material/Save';
import PlayArrow from '@mui/icons-material/PlayArrow';
import PauseIcon from '@mui/icons-material/Pause';
import AddIcon from '@mui/icons-material/Add';
import AppsIcon from '@mui/icons-material/Apps';
import { Box, Switch } from '@mui/material';

interface CustomToolbarProps {
  switchState: boolean;
  handleSwitchChange: () => void;
}

export default function CustomToolbar({ switchState, handleSwitchChange }: CustomToolbarProps) {
  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: '#f5f5f5',
        padding: '8px',
        borderRadius: '4px',
      }}
    >
      <IconButton onClick={handlePlayClick}>
        <PlayArrow />
      </IconButton>
      <IconButton onClick={handleAddClick}>
        <AddIcon />
      </IconButton>
      <IconButton onClick={handlePauseClick}>
        <PauseIcon />
      </IconButton>
      <Switch checked={switchState} onChange={handleSwitchChange} />
      <IconButton onClick={handleSaveClick}>
        <SaveIcon />
      </IconButton>
      <IconButton onClick={handleAppsClick}>
        <AppsIcon />
      </IconButton>
    </Box>
  );
}

`

const App = () => {
  const [isTerminalOpen, setIsTerminalOpen] = useState(false);

  const handleSwitchChange = () => {
    setIsTerminalOpen((prev) => !prev);
  };

  return (
    <Box>
      <Jupyter startDefaultKernel={true} terminals={true}>
        <CustomToolbar switchState={isTerminalOpen} handleSwitchChange={handleSwitchChange} />
        <FileBrowser />
        <Notebook path='/testnb.ipynb' />
        {console.log(isTerminalOpen)}
        {isTerminalOpen && <Terminal colorMode='light' height='800px' />}
      </Jupyter>
    </Box>
  );
};