From 113829b1d316e208f27787d23cae5397d14fc68d Mon Sep 17 00:00:00 2001
From: Naymul Islam <naymul504@gmail.com>
Date: Fri, 17 Apr 2026 17:13:45 +0600
Subject: [PATCH 1/5] remove commented-out MUI v4 block from Select.tsx

Signed-off-by: Naymul Islam <naymul504@gmail.com>
---
 labextension/src/components/Select.tsx | 118 -------------------------
 1 file changed, 118 deletions(-)

diff --git a/labextension/src/components/Select.tsx b/labextension/src/components/Select.tsx
index 4447296df..8cfbebd71 100644
--- a/labextension/src/components/Select.tsx
+++ b/labextension/src/components/Select.tsx
@@ -12,124 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-// import * as React from 'react';
-// import TextField, { BaseTextFieldProps } from '@mui/material/TextField';
-// import { MenuItem, Zoom } from '@mui/material';
-// import { createStyles, makeStyles } from '@mui/material/styles';
-// import { styled } from '@mui/material/styles';
-// import { LightTooltip } from './LightTooltip';
-
-// export interface ISelectOption {
-//   label: string;
-//   value: string;
-//   tooltip?: any;
-//   invalid?: boolean;
-// }
-
-// const useStyles = styled(TextField)({
-//   label: {
-//     color: 'var(--jp-input-border-color)',
-//     fontSize: 'var(--jp-ui-font-size2)',
-//   },
-//   input: {
-//     color: 'var(--jp-ui-font-color1)',
-//   },
-//   textField: {
-//     width: '100%',
-//   },
-//   menu: {
-//     backgroundColor: 'var(--jp-layout-color1)',
-//     color: 'var(--jp-ui-font-color1)',
-//   },
-//   helperLabel: {
-//     color: 'var(--jp-info-color0)',
-//   },
-// });
-
-// interface SelectProps extends BaseTextFieldProps {
-//   index: number;
-//   values: ISelectOption[];
-//   variant?: 'filled' | 'standard' | 'outlined';
-//   updateValue: Function;
-// }
-
-// export const Select: React.FC<SelectProps> = props => {
-//   const classes = useStyles({});
-
-//   const {
-//     index,
-//     value,
-//     values,
-//     helperText = null,
-//     variant = 'outlined',
-//     updateValue,
-//     ...rest
-//   } = props;
-
-//   const disableMenuItem = (event: React.MouseEvent, invalidOption: boolean) => {
-//     if (invalidOption) {
-//       event.stopPropagation();
-//     }
-//   };
-
-//   const getOptionClassNames = (option: any) => {
-//     const classNames: string[] = [];
-//     if (option.tooltip) {
-//       classNames.push('menu-item-tooltip');
-//     }
-//     return classNames.join(' ');
-//   };
-
-//   return (
-//     // @ts-ignore
-//     <TextField
-//       select
-//       {...rest}
-//       margin="dense"
-//       value={value}
-//       variant={variant}
-//       className={classes.textField}
-//       onChange={evt =>
-//         updateValue((evt.target as HTMLInputElement).value, index)
-//       }
-//       InputLabelProps={{
-//         classes: { root: classes.label },
-//         shrink: value !== '',
-//       }}
-//       InputProps={{ classes: { root: classes.input } }}
-//       SelectProps={{ MenuProps: { PaperProps: { className: classes.menu } } }}
-//       FormHelperTextProps={{ classes: { root: classes.helperLabel } }}
-//     >
-//       {values.map((option: any) => (
-//         <MenuItem
-//           key={option.value}
-//           value={option.value}
-//           disabled={!!option.invalid}
-//           className={getOptionClassNames(option)}
-//         >
-//           {option.tooltip ? (
-//             <LightTooltip
-//               title={option.tooltip}
-//               placement="top-start"
-//               interactive={!(typeof option.tooltip === 'string')}
-//               TransitionComponent={Zoom}
-//             >
-//               <div
-//                 className="menu-item-label"
-//                 onClick={ev => disableMenuItem(ev, !!option.invalid)}
-//               >
-//                 {option.label}
-//               </div>
-//             </LightTooltip>
-//           ) : (
-//             option.label
-//           )}
-//         </MenuItem>
-//       ))}
-//     </TextField>
-//   );
-// };
-
 import * as React from 'react';
 import TextField, { BaseTextFieldProps } from '@mui/material/TextField';
 import { MenuItem, Zoom } from '@mui/material';

From f1fa7728a06af29637ae34388b208e810153964d Mon Sep 17 00:00:00 2001
From: Naymul Islam <naymul504@gmail.com>
Date: Fri, 17 Apr 2026 17:13:59 +0600
Subject: [PATCH 2/5] same for SelectMulti.tsx

Signed-off-by: Naymul Islam <naymul504@gmail.com>
---
 labextension/src/components/SelectMulti.tsx | 122 --------------------
 1 file changed, 122 deletions(-)

diff --git a/labextension/src/components/SelectMulti.tsx b/labextension/src/components/SelectMulti.tsx
index 6c89d0e58..fd6a1b8b2 100644
--- a/labextension/src/components/SelectMulti.tsx
+++ b/labextension/src/components/SelectMulti.tsx
@@ -12,128 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-// import { createStyles, makeStyles } from '@mui/material/styles';
-// import * as React from 'react';
-// import { findDOMNode } from 'react-dom';
-// import { Input, MenuItem, Select } from '@mui/material';
-// import OutlinedInput from '@mui/material/OutlinedInput';
-// import FormControl from '@mui/material/FormControl';
-// import InputLabel from '@mui/material/InputLabel';
-// import Chip from '@mui/material/Chip';
-// import ColorUtils from '../lib/ColorUtils';
-
-// const useStyles = makeStyles(() =>
-//   createStyles({
-//     menu: {
-//       color: 'var(--jp-ui-font-color1)',
-//       fontSize: 'var(--jp-ui-font-size2)',
-//     },
-//     chips: {
-//       display: 'flex',
-//       flexWrap: 'wrap',
-//     },
-//     chip: {},
-//     selectMultiForm: {
-//       width: '100%',
-//     },
-//     label: {
-//       backgroundColor: 'var(--jp-layout-color1)',
-//       color: 'var(--jp-input-border-color)',
-//       fontSize: 'var(--jp-ui-font-size2)',
-//     },
-//     input: {
-//       fontSize: 'var(--jp-ui-font-size2)',
-//     },
-//   }),
-// );
-
-// interface SelectMultiProps {
-//   id: string;
-//   label: string;
-//   style?: unknown;
-//   selected: string[];
-//   disabled?: boolean;
-//   options: { value: string; color: string }[];
-//   variant?: 'filled' | 'standard' | 'outlined';
-//   updateSelected: Function;
-// }
-
-// export const SelectMulti: React.FunctionComponent<SelectMultiProps> = props => {
-//   const classes = useStyles({});
-//   const [inputLabelRef, setInputLabelRef] = React.useState(undefined);
-//   const labelOffsetWidth = inputLabelRef
-//     ? (findDOMNode(inputLabelRef) as HTMLElement).offsetWidth
-//     : 0;
-
-//   const {
-//     id,
-//     label,
-//     options,
-//     selected,
-//     disabled = false,
-//     variant = 'outlined',
-//     style = {},
-//     updateSelected,
-//   } = props;
-
-//   let inputComponent = <Input margin="dense" id={id} />;
-
-//   if (!variant || variant === 'outlined') {
-//     inputComponent = (
-//       <OutlinedInput margin="dense" labelWidth={labelOffsetWidth} id={id} />
-//     );
-//   }
-
-//   return (
-//     <FormControl
-//       margin="dense"
-//       style={style}
-//       variant={variant}
-//       disabled={disabled}
-//       className={classes.selectMultiForm}
-//     >
-//       <InputLabel
-//         ref={ref => {
-//           setInputLabelRef(ref);
-//         }}
-//         htmlFor={id}
-//         className={classes.label}
-//       >
-//         {label}
-//       </InputLabel>
-//       <Select
-//         multiple
-//         MenuProps={{ PaperProps: { className: classes.menu } }}
-//         onChange={evt => updateSelected((evt.target as HTMLInputElement).value)}
-//         margin="dense"
-//         variant={variant}
-//         input={inputComponent}
-//         value={selected}
-//         renderValue={elements => (
-//           <div className={classes.chips}>
-//             {(elements as string[]).map(value => {
-//               return (
-//                 <Chip
-//                   style={{ backgroundColor: `#${ColorUtils.getColor(value)}` }}
-//                   key={value}
-//                   label={value}
-//                   className={`kale-chip kale-chip-select ${classes.chip}`}
-//                 />
-//               );
-//             })}
-//           </div>
-//         )}
-//       >
-//         {options.map(option => (
-//           <MenuItem key={option.value} value={option.value}>
-//             {option.value}
-//           </MenuItem>
-//         ))}
-//       </Select>
-//     </FormControl>
-//   );
-// };
-
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { Input, MenuItem, Select } from '@mui/material';

From 3042681ca513138ca0672b449d90101cef85cc39 Mon Sep 17 00:00:00 2001
From: Naymul Islam <naymul504@gmail.com>
Date: Fri, 17 Apr 2026 17:14:41 +0600
Subject: [PATCH 3/5] same for Input.tsx

Signed-off-by: Naymul Islam <naymul504@gmail.com>
---
 labextension/src/components/Input.tsx | 153 --------------------------
 1 file changed, 153 deletions(-)

diff --git a/labextension/src/components/Input.tsx b/labextension/src/components/Input.tsx
index 167919a3c..aa71ac97f 100644
--- a/labextension/src/components/Input.tsx
+++ b/labextension/src/components/Input.tsx
@@ -12,159 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-// import * as React from 'react';
-// import { useDebouncedCallback } from 'use-debounce';
-// import TextField, { OutlinedTextFieldProps } from '@material-ui/core/TextField';
-// import { createStyles, makeStyles } from '@material-ui/core/styles';
-
-// const useStyles = makeStyles(() =>
-//   createStyles({
-//     label: {
-//       color: 'var(--jp-input-border-color)',
-//       fontSize: 'var(--jp-ui-font-size2)',
-//     },
-//     input: {
-//       color: 'var(--jp-ui-font-color1)',
-//     },
-//     textField: {
-//       width: '100%',
-//     },
-//     helperLabel: {
-//       color: 'var(--jp-info-color0)',
-//     },
-//   }),
-// );
-
-// // @ts-ignore
-// export interface InputProps extends OutlinedTextFieldProps {
-//   value: string | number;
-//   regex?: string;
-//   regexErrorMsg?: string;
-//   inputIndex?: number;
-//   helperText?: string;
-//   readOnly?: boolean;
-//   validation?: 'int' | 'double';
-//   variant?: 'standard' | 'outlined' | 'filled';
-//   updateValue: Function;
-//   onBeforeUpdate?: (value: string) => boolean;
-// }
-
-// export const Input: React.FunctionComponent<InputProps> = props => {
-//   const [value, setValue] = React.useState('' as any);
-//   const [error, updateError] = React.useState(false);
-//   const classes = useStyles({});
-
-//   const {
-//     value: propsValue,
-//     className,
-//     helperText = null,
-//     regex,
-//     regexErrorMsg,
-//     validation,
-//     placeholder,
-//     inputIndex,
-//     readOnly = false,
-//     variant = 'outlined',
-//     InputProps,
-//     updateValue,
-//     onBeforeUpdate = undefined,
-//     ...rest
-//   } = props;
-
-//   const getRegex = () => {
-//     if (regex) {
-//       return regex;
-//     } else if (validation && validation == 'int') {
-//       return /^(-\d)?\d*$/;
-//     } else if (validation && validation == 'double') {
-//       return /^(-\d)?\d*(\.\d)?\d*$/;
-//     } else {
-//       return undefined;
-//     }
-//   };
-
-//   const getRegexMessage = () => {
-//     if (regexErrorMsg) {
-//       return regexErrorMsg;
-//     } else if (validation && validation == 'int') {
-//       return 'Integer value required';
-//     } else if (validation && validation == 'double') {
-//       return 'Double value required';
-//     } else {
-//       return undefined;
-//     }
-//   };
-
-//   const onChange = (value: string, index: number) => {
-//     // if the input domain is restricted by a regex
-//     if (!getRegex()) {
-//       updateValue(value, index);
-//       return;
-//     }
-
-//     let re = new RegExp(getRegex());
-//     if (!re.test(value)) {
-//       updateError(true);
-//     } else {
-//       updateError(false);
-//       updateValue(value, index);
-//     }
-//   };
-
-//   React.useEffect(() => {
-//     // need this to set the value when the notebook is loaded and the metadata
-//     // is updated
-//     setValue(propsValue);
-//   }, [propsValue]); // Only re-run the effect if propsValue changes
-
-//   const [debouncedCallback] = useDebouncedCallback(
-//     // function
-//     (value: string, idx: number) => {
-//       onChange(value, idx);
-//     },
-//     // delay in ms
-//     500,
-//   );
-
-//   return (
-//     // @ts-ignore
-//     <TextField
-//       {...rest}
-//       variant={variant}
-//       className={classes.textField}
-//       error={error}
-//       value={value}
-//       margin="dense"
-//       placeholder={placeholder}
-//       spellCheck={false}
-//       helperText={error ? getRegexMessage() : helperText}
-//       InputProps={{
-//         classes: { root: classes.input },
-//         readOnly: readOnly,
-//         ...InputProps,
-//       }}
-//       InputLabelProps={{
-//         classes: { root: classes.label },
-//         shrink: !!placeholder || value !== '',
-//       }}
-//       FormHelperTextProps={{ classes: { root: classes.helperLabel } }}
-//       onChange={evt => {
-//         setValue(evt.target.value);
-//         if (!onBeforeUpdate) {
-//           debouncedCallback(evt.target.value, inputIndex);
-//         } else {
-//           const r = onBeforeUpdate(evt.target.value);
-//           if (r) {
-//             updateError(true);
-//           } else {
-//             updateError(false);
-//             debouncedCallback(evt.target.value, inputIndex);
-//           }
-//         }
-//       }}
-//     />
-//   );
-// };
 import React, { useState } from 'react';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';

From 3f82796a7a566534eb417286a5a22ed2a53c3695 Mon Sep 17 00:00:00 2001
From: Naymul Islam <naymul504@gmail.com>
Date: Fri, 17 Apr 2026 17:15:02 +0600
Subject: [PATCH 4/5] same for ExperimentInput.tsx

Signed-off-by: Naymul Islam <naymul504@gmail.com>
---
 .../src/components/ExperimentInput.tsx        | 67 -------------------
 1 file changed, 67 deletions(-)

diff --git a/labextension/src/components/ExperimentInput.tsx b/labextension/src/components/ExperimentInput.tsx
index b82be1446..5e72198c6 100644
--- a/labextension/src/components/ExperimentInput.tsx
+++ b/labextension/src/components/ExperimentInput.tsx
@@ -12,73 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-// import * as React from 'react';
-// import { Input } from './Input';
-// import { Select, ISelectOption } from './Select';
-// import { IExperiment, NEW_EXPERIMENT } from '../widgets/LeftPanel';
-
-// const regex: string = '^[a-z]([-a-z0-9]*[a-z0-9])?$';
-// const regexErrorMsg: string =
-//   'Experiment name may consist of alphanumeric ' +
-//   "characters, '-', and must start with a lowercase character and end with " +
-//   'a lowercase alphanumeric character.';
-
-// interface IExperimentInput {
-//   updateValue: Function;
-//   options: IExperiment[];
-//   selected: string; // Experiment ID
-//   value: string; // Experiment Name
-//   loading: boolean;
-// }
-
-// export const ExperimentInput: React.FunctionComponent<IExperimentInput> = props => {
-//   const getName = (x: string) => {
-//     const filtered = props.options.filter(o => o.id === x);
-//     return filtered.length === 0 ? '' : filtered[0].name;
-//   };
-
-//   const updateSelected = (selected: string, idx: number) => {
-//     let value = selected === NEW_EXPERIMENT.id ? '' : getName(selected);
-//     const experiment: IExperiment = { id: selected, name: value };
-//     props.updateValue(experiment);
-//   };
-
-//   const updateValue = (value: string, idx: number) => {
-//     const experiment: IExperiment = { name: value, id: NEW_EXPERIMENT.id };
-//     props.updateValue(experiment);
-//   };
-
-// const options: ISelectOption[] = props.options.map(o => {
-//   return { label: o.name, value: o.id };
-// });
-
-//   return (
-//     <div>
-//       <Select
-//         variant="standard"
-//         label="Select experiment"
-//         values={options}
-//         value={props.selected}
-//         index={-1}
-//         updateValue={updateSelected}
-//         helperText={props.loading ? 'Loading...' : null}
-//       />
-//       {props.selected === NEW_EXPERIMENT.id ? (
-//         <div>
-//           <Input
-//             updateValue={updateValue}
-//             value={props.value}
-//             label="Experiment Name"
-//             regex={regex}
-//             regexErrorMsg={regexErrorMsg}
-//             variant="standard"
-//           />
-//         </div>
-//       ) : null}
-//     </div>
-//   );
-// };
-
 import * as React from 'react';
 import { Input } from './Input';
 import { Select, ISelectOption } from './Select';

From c86a2ce5ac2d5ea70b005f757627bc8207cc8dd8 Mon Sep 17 00:00:00 2001
From: Naymul Islam <naymul504@gmail.com>
Date: Fri, 17 Apr 2026 17:15:05 +0600
Subject: [PATCH 5/5] same for AdvancedSettings.tsx

Signed-off-by: Naymul Islam <naymul504@gmail.com>
---
 .../src/components/AdvancedSettings.tsx       | 70 -------------------
 1 file changed, 70 deletions(-)

diff --git a/labextension/src/components/AdvancedSettings.tsx b/labextension/src/components/AdvancedSettings.tsx
index 927a07bac..e23630c62 100644
--- a/labextension/src/components/AdvancedSettings.tsx
+++ b/labextension/src/components/AdvancedSettings.tsx
@@ -12,76 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-// import * as React from 'react';
-// import { Input } from './Input';
-// import { Switch } from '@mui/material';
-// import { useTheme } from '@mui/material/styles';
-// import { theme } from '../Theme';
-
-// interface AdvancedSettingsProps {
-//   title: string;
-//   debug: boolean;
-//   dockerImageValue: string;
-//   dockerImageDefaultValue: string;
-//   dockerChange: Function;
-//   changeDebug: Function;
-//   volsPanel: any;
-// }
-
-// export const AdvancedSettings: React.FunctionComponent<AdvancedSettingsProps> = props => {
-//   const [collapsed, setCollapsed] = React.useState(true);
-//   const theme = useTheme();
-
-//   return (
-//     <div className={'' + (!collapsed && 'jp-Collapse-open')}>
-//       <div
-//         className="jp-Collapse-header kale-header"
-//         onClick={_ => setCollapsed(!collapsed)}
-//         style={{ color: theme.kale.headers.main }}
-//       >
-//         {props.title}
-//       </div>
-//       <div
-//         className={
-//           'input-container lm-Panel jp-Collapse-contents ' +
-//           (collapsed && 'p-mod-hidden')
-//         }
-//       >
-//         <Input
-//           label="Docker image"
-//           updateValue={props.dockerChange}
-//           value={props.dockerImageValue}
-//           placeholder={props.dockerImageDefaultValue}
-//           variant="standard"
-//         />
-
-//         <div className="toolbar" style={{ padding: '12px 4px 0 4px' }}>
-//           <div className="switch-label">Debug</div>
-//           <Switch
-//             checked={props.debug}
-//             onChange={_ => props.changeDebug()}
-//             color="primary"
-//             name="enableKale"
-//             inputProps={{ 'aria-label': 'primary checkbox' }}
-//           />
-//         </div>
-
-//         <div className="kale-component" key="kale-component-volumes">
-//           <div className="kale-header-switch">
-//             <p
-//               className="kale-header"
-//               style={{ color: theme.kale.headers.main }}
-//             >
-//               Volumes
-//             </p>
-//           </div>
-//           {props.volsPanel}
-//         </div>
-//       </div>
-//     </div>
-//   );
-// };
-
 import * as React from 'react';
 import { Input } from './Input';
 import { Switch } from '@mui/material';