Skip to content

chore(labextension): remove commented-out MUI v4 blocks #765

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

Open
ai-naymul wants to merge 5 commits into
base: main
Choose a base branch
from
Open

chore(labextension): remove commented-out MUI v4 blocks #765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
113829b
remove commented-out MUI v4 block from Select.tsx
ai-naymul Apr 17, 2026
f1fa772
same for SelectMulti.tsx
ai-naymul Apr 17, 2026
3042681
same for Input.tsx
ai-naymul Apr 17, 2026
3f82796
same for ExperimentInput.tsx
ai-naymul Apr 17, 2026
c86a2ce
same for AdvancedSettings.tsx
ai-naymul Apr 17, 2026
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
70 changes: 0 additions & 70 deletions labextension/src/components/AdvancedSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
67 changes: 0 additions & 67 deletions labextension/src/components/ExperimentInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
153 changes: 0 additions & 153 deletions labextension/src/components/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Loading
Loading