chore: terminal height

datalayer · Oct 19, 2023 · cb375f9 · cb375f9
1 parent d94247a
commit cb375f9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/packages/react/src/components/terminal/Terminal.tsx b/packages/react/src/components/terminal/Terminal.tsx
@@ -1,41 +1,53 @@
 import { useState, useEffect } from 'react';
 import { useDispatch } from "react-redux";
+import { Box } from '@primer/react';
 import { ITerminal } from '@jupyterlab/terminal';
 import TerminalAdapter from './TerminalAdapter';
 import { terminalActions, terminalReducer } from './TerminalState';
 import { useJupyter } from './../../jupyter/JupyterContext';
-import Lumino from '../../jupyter/lumino/Lumino';
+import LuminoBox from '../../jupyter/lumino/LuminoBox';
 
-export const Terminal = (options: Terminal.ITerminalOptions) => {
+export const Terminal = (props: Terminal.ITerminalOptions) => {
+  const { height } = props;
   const { injectableStore, serverSettings } = useJupyter();
   const dispatch = useDispatch();
   const [adapter, setAdapter] = useState<TerminalAdapter>();
   useEffect(() => {
     injectableStore.inject('terminal', terminalReducer);
     const adapter = new TerminalAdapter({
       serverSettings,
-      ...options,
+      ...props,
     });
     dispatch(terminalActions.update({ adapter }));
     setAdapter(adapter);
   }, []);
   return adapter
   ?
-    <Lumino>
-      {adapter.panel}
-    </Lumino>
+    <Box
+      sx= {{        
+        '& .lm-BoxPanel': {
+          height: `${height} !important`,
+        },
+      }}
+      >
+      <LuminoBox>
+        {adapter.panel}
+      </LuminoBox>
+    </Box>
   :
-    <>Loading Jupyter Terminal...</>
+    <></>
 }
 
 export namespace Terminal {
 
   export interface ITerminalOptions {
+    height?: string;
     theme?: ITerminal.Theme;
   }
 }
 
 Terminal.defaultProps = {
+  height: "100%",
   theme: "dark",
 } as Partial<Terminal.ITerminalOptions>;
 

diff --git a/packages/react/src/components/terminal/TerminalAdapter.css b/packages/react/src/components/terminal/TerminalAdapter.css
@@ -1,4 +0,0 @@
-.dla-JupyterLab-terminal {
-  height: 300px;
-  width: 100%;
-}

diff --git a/packages/react/src/components/terminal/TerminalAdapter.ts b/packages/react/src/components/terminal/TerminalAdapter.ts
@@ -12,8 +12,8 @@ export class TerminalAdapter {
   constructor(options: TerminalAdapter.ITerminalAdapterOptions) {
     const { serverSettings, theme } = options;
     this.terminalPanel = new BoxPanel();
-    this.terminalPanel.addClass('dla-JupyterLab-terminal');
     this.terminalPanel.spacing = 0;
+    this.terminalPanel.addClass("dla-JupyterLab-Terminal-id");
     const terminalManager = new TerminalManager({
       serverSettings,
     });

diff --git a/packages/react/src/examples/Terminal.tsx b/packages/react/src/examples/Terminal.tsx
@@ -8,6 +8,6 @@ const root = createRoot(div)
 
 root.render(
   <Jupyter startDefaultKernel={false} terminals={true}>
-    <Terminal theme='dark'/>
+    <Terminal theme='dark' height="800px"/>
   </Jupyter>
 );