Skip to content

Commit

Permalink
- #1107 - changed looks of the color filter
Browse files Browse the repository at this point in the history
  • Loading branch information
@boriskovar-m2ms
boriskovar-m2ms committed Aug 24, 2023
1 parent edda836 commit 72e182c
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 57 deletions.
51 changes: 36 additions & 15 deletions js/components/datasets/datasetMoleculeList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,11 +253,19 @@ const useStyles = makeStyles(theme => ({
backgroundColor: compoundsColors.apricot.color
},
textField: {
// marginLeft: theme.spacing(1),
marginLeft: theme.spacing(0.5),
// marginRight: theme.spacing(1),
width: 70,
width: 90,
borderRadius: 10,

'& .MuiFormLabel-root': {
paddingLeft: theme.spacing(1)
},
'& .MuiInput-underline:before': {
borderBottom: '0px solid'
},
'& .MuiInput-underline:after': {
borderBottom: '0px solid'
}
},
selectedInput: {
Expand Down Expand Up @@ -377,6 +385,14 @@ const DatasetMoleculeList = ({ title, datasetID, url }) => {
[compoundsColors.apricot.key]: apricotInput
};

const inputRefs = {
[compoundsColors.blue.key]: useRef(),
[compoundsColors.red.key]: useRef(),
[compoundsColors.green.key]: useRef(),
[compoundsColors.purple.key]: useRef(),
[compoundsColors.apricot.key]: useRef()
};

const compoundColors = useSelector(state => state.datasetsReducers.compoundColorByDataset[datasetID]) ?? {};

const isSelectedTypeOn = typeList => {
Expand Down Expand Up @@ -840,34 +856,40 @@ const DatasetMoleculeList = ({ title, datasetID, url }) => {
<Grid container direction="row" alignItems="center">
{Object.keys(compoundsColors).map(item => (
<>
<Grid item key={`${item}-chckbox`}>
<Checkbox
className={classes.classCheckbox}
key={`CHCK_${item}`}
value={`${item}`}
onChange={e => dispatch(onChangeCompoundClassCheckbox(e))}
checked={currentCompoundClass === item}
></Checkbox>
</Grid>
<Grid item key={`${item}-txtfield`}>
<TextField
InputProps={{
readOnly: editedColorGroup !== item,
startAdornment: (
<InputAdornment position="start">
endAdornment: (
<InputAdornment position="end">
<IconButton
className={
editedColorGroup !== item ? classes.editClassNameIcon : classes.editClassNameIconSelected
}
color={'inherit'}
value={`${item}`}
onClick={e => dispatch(onStartEditColorClassName(e))}
onClick={e => {
dispatch(onStartEditColorClassName(e));
inputRefs[item].current.focus();
}}
>
<Edit />
</IconButton>
</InputAdornment>
),
startAdornment: (
<InputAdornment position="start">
<Checkbox
className={classes.classCheckbox}
key={`CHCK_${item}`}
value={`${item}`}
onChange={e => dispatch(onChangeCompoundClassCheckbox(e))}
checked={currentCompoundClass === item}
></Checkbox>
</InputAdornment>
)
}}
inputRef={inputRefs[item]}
autoComplete="off"
id={`${item}`}
key={`CLASS_${item}`}
Expand All @@ -877,7 +899,6 @@ const DatasetMoleculeList = ({ title, datasetID, url }) => {
classes[item],
currentCompoundClass === item && classes.selectedInput
)}
label={compoundsColors[item].text}
onChange={e => dispatch(onChangeCompoundClassValue(e))}
onKeyDown={e => dispatch(onKeyDownCompoundClass(e))}
// onClick={e => dispatch(onClickCompoundClass(e))}
Expand Down
51 changes: 36 additions & 15 deletions js/components/datasets/selectedCompoundsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,11 +105,19 @@ const useStyles = makeStyles(theme => ({
backgroundColor: compoundsColors.apricot.color
},
textField: {
// marginLeft: theme.spacing(1),
marginLeft: theme.spacing(0.5),
// marginRight: theme.spacing(1),
width: 70,
width: 90,
borderRadius: 10,

'& .MuiFormLabel-root': {
paddingLeft: theme.spacing(1)
},
'& .MuiInput-underline:before': {
borderBottom: '0px solid'
},
'& .MuiInput-underline:after': {
borderBottom: '0px solid'
}
},
selectedInput: {
Expand Down Expand Up @@ -233,6 +241,14 @@ export const SelectedCompoundList = memo(() => {
[compoundsColors.apricot.key]: apricotInput
};

const inputRefs = {
[compoundsColors.blue.key]: useRef(),
[compoundsColors.red.key]: useRef(),
[compoundsColors.green.key]: useRef(),
[compoundsColors.purple.key]: useRef(),
[compoundsColors.apricot.key]: useRef()
};

const compoundColors = useSelector(state => state.datasetsReducers.compoundColorByDataset);

const colorFilterSettings = useSelector(state => state.datasetsReducers.selectedColorsInFilter);
Expand Down Expand Up @@ -728,35 +744,41 @@ export const SelectedCompoundList = memo(() => {
<Grid container direction="row" justify="space-between" alignItems="center">
{Object.keys(compoundsColors).map(item => (
<>
<Grid item key={`${item}-chckbox`}>
<Checkbox
className={classes.classCheckbox}
key={`CHCK_${item}`}
value={`${item}`}
onChange={e => dispatch(onClickFilterClassCheckBox(e))}
checked={colorFilterSettings.hasOwnProperty(item)}
></Checkbox>
</Grid>
<Grid item key={item}>
<TextField
InputProps={{
readOnly: editedColorGroup !== item,
startAdornment: (
<InputAdornment position="start">
endAdornment: (
<InputAdornment position="end">
<IconButton
className={
editedColorGroup !== item ? classes.editClassNameIcon : classes.editClassNameIconSelected
}
color={'inherit'}
value={`${item}`}
onClick={e => dispatch(onStartEditColorClassName(e))}
onClick={e => {
dispatch(onStartEditColorClassName(e));
inputRefs[item].current.focus();
}}
>
<Edit />
</IconButton>
</InputAdornment>
),
startAdornment: (
<InputAdornment position="start">
<Checkbox
className={classes.classCheckbox}
key={`CHCK_${item}`}
value={`${item}`}
onChange={e => dispatch(onClickFilterClassCheckBox(e))}
checked={colorFilterSettings.hasOwnProperty(item)}
></Checkbox>
</InputAdornment>
)
}}
autoComplete="off"
inputRef={inputRefs[item]}
id={`${item}`}
key={`CLASS_${item}`}
variant="standard"
Expand All @@ -765,7 +787,6 @@ export const SelectedCompoundList = memo(() => {
classes[item],
colorFilterSettings.hasOwnProperty(item) && classes.selectedInput
)}
label={compoundsColors[item].text}
onChange={e => dispatch(onChangeCompoundClassValue(e))}
onKeyDown={e => dispatch(onKeyDownCompoundClass(e))}
// onKeyDown={e => dispatch(onKeyDownFilterClass(e))}
Expand Down
51 changes: 36 additions & 15 deletions js/components/preview/compounds/compoundList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,19 @@ import classNames from 'classnames';

const useStyles = makeStyles(theme => ({
textField: {
// marginLeft: theme.spacing(1),
marginLeft: theme.spacing(0.5),
// marginRight: theme.spacing(1),
width: 70,
width: 90,
borderRadius: 10,

'& .MuiFormLabel-root': {
paddingLeft: theme.spacing(1)
},
'& .MuiInput-underline:before': {
borderBottom: '0px solid'
},
'& .MuiInput-underline:after': {
borderBottom: '0px solid'
}
},
selectedInput: {
Expand Down Expand Up @@ -113,6 +121,14 @@ export const CompoundList = memo(() => {
[compoundsColors.apricot.key]: apricotInput
};

const inputRefs = {
[compoundsColors.blue.key]: useRef(),
[compoundsColors.red.key]: useRef(),
[compoundsColors.green.key]: useRef(),
[compoundsColors.purple.key]: useRef(),
[compoundsColors.apricot.key]: useRef()
};

const currentCompoundClass = useSelector(state => state.previewReducers.compounds.currentCompoundClass);
const canLoadMoreCompounds = useSelector(state => getCanLoadMoreCompounds(state));
const currentVector = useSelector(state => state.selectionReducers.currentVector);
Expand All @@ -131,35 +147,41 @@ export const CompoundList = memo(() => {
<Grid container direction="row" justify="space-between" alignItems="center">
{Object.keys(compoundsColors).map(item => (
<>
<Grid item key={`${item}-chckbox`}>
<Checkbox
className={classes.classCheckbox}
key={`CHCK_${item}`}
value={`${item}`}
onChange={e => dispatch(onChangeCompoundClassCheckbox(e))}
checked={currentCompoundClass === item}
></Checkbox>
</Grid>
<Grid item key={item}>
<TextField
InputProps={{
readOnly: editedColorGroup !== item,
startAdornment: (
<InputAdornment position="start">
endAdornment: (
<InputAdornment position="end">
<IconButton
className={
editedColorGroup !== item ? classes.editClassNameIcon : classes.editClassNameIconSelected
}
color={'inherit'}
value={`${item}`}
onClick={e => dispatch(onStartEditColorClassName(e))}
onClick={e => {
dispatch(onStartEditColorClassName(e));
inputRefs[item].current.focus();
}}
>
<Edit />
</IconButton>
</InputAdornment>
),
startAdornment: (
<InputAdornment position="start">
<Checkbox
className={classes.classCheckbox}
key={`CHCK_${item}`}
value={`${item}`}
onChange={e => dispatch(onChangeCompoundClassCheckbox(e))}
checked={currentCompoundClass === item}
></Checkbox>
</InputAdornment>
)
}}
autoComplete="off"
inputRef={inputRefs[item]}
id={`${item}`}
key={`CLASS_${item}`}
variant="standard"
Expand All @@ -168,7 +190,6 @@ export const CompoundList = memo(() => {
classes[item],
currentCompoundClass === item && classes.selectedInput
)}
label={compoundsColors[item].text}
onChange={e => dispatch(onChangeCompoundClassValue(e))}
onKeyDown={e => dispatch(onKeyDownCompoundClass(e))}
onClick={e => dispatch(onClickCompoundClass(e))}
Expand Down
25 changes: 13 additions & 12 deletions js/components/preview/compounds/redux/reducer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,16 @@ const defaultSelectedCmpdsClass = {
[compoundsColors.apricot.key]: []
};

const defaultCompoundsClasses = {
[compoundsColors.blue.key]: undefined,
[compoundsColors.red.key]: undefined,
[compoundsColors.green.key]: undefined,
[compoundsColors.purple.key]: undefined,
[compoundsColors.apricot.key]: undefined
const defaultCmpdsValues = {
[compoundsColors.blue.key]: compoundsColors.blue.key,
[compoundsColors.red.key]: compoundsColors.red.key,
[compoundsColors.green.key]: compoundsColors.green.key,
[compoundsColors.purple.key]: compoundsColors.purple.key,
[compoundsColors.apricot.key]: compoundsColors.apricot.key
};

export const INITIAL_STATE = {
...defaultCmpdsValues,
currentPage: -1,
compoundsPerPage: 20,
/* currentCompounds: [{
Expand All @@ -27,7 +28,7 @@ export const INITIAL_STATE = {
}] */
currentCompounds: [],
currentCompoundClass: compoundsColors.blue.key,
...defaultCompoundsClasses,
// ...defaultCompoundsClasses,
selectedCompoundsClass: defaultSelectedCmpdsClass,
highlightedCompoundId: null,
showedCompoundList: [],
Expand All @@ -50,7 +51,7 @@ export const RESET_STATE = {
}] */
currentCompounds: [],
currentCompoundClass: compoundsColors.blue.key,
...defaultCompoundsClasses,
...defaultCmpdsValues,
selectedCompoundsClass: defaultSelectedCmpdsClass,
highlightedCompoundId: null,
showedCompoundList: [],
Expand Down Expand Up @@ -92,7 +93,7 @@ export const compounds = (state = INITIAL_STATE, action = {}) => {
});

case constants.RESET_COMPOUND_CLASSES:
return Object.assign({}, state, { ...defaultCompoundsClasses });
return Object.assign({}, state, { ...defaultCmpdsValues });

case constants.SET_HIGHLIGHTED_COMPOUND_ID:
return Object.assign({}, state, { highlightedCompoundId: action.payload });
Expand Down Expand Up @@ -155,9 +156,9 @@ export const compounds = (state = INITIAL_STATE, action = {}) => {
return Object.assign({}, state, {
selectedCompoundsClass: defaultSelectedCmpdsClass
});
case constants.SET_SELECTED_COMPOUNDS:
return {...state, allSelectedCompounds: action.payload};

case constants.SET_SELECTED_COMPOUNDS:
return { ...state, allSelectedCompounds: action.payload };

case constants.RELOAD_REDUCER:
return Object.assign({}, state, { ...action.payload });
Expand Down

0 comments on commit 72e182c

Please sign in to comment.