Skip to content

Commit b2c24db

Browse files
GonzzaGGonzzaG
committed
Penalizer field added and elements redesigned
1 parent 3f9f9d0 commit b2c24db

File tree

3 files changed

+54
-32
lines changed

3 files changed

+54
-32
lines changed

‎src/frontend/static/frontend/src/components/biomarkers/modalContentBiomarker/featureSelectionPanel/CrossValidationInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ interface CrossValidationInputProps {
1717
export const CrossValidationInput = (props: CrossValidationInputProps) => (
1818
<Form.Input
1919
fluid
20+
style={{ minWidth: '180px', maxWidth: '100% ' }}
2021
label='Number of folds'
2122
placeholder='An integer number'
2223
type='number'

‎src/frontend/static/frontend/src/components/biomarkers/modalContentBiomarker/featureSelectionPanel/RandomStateInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ interface RandomStateInputProps {
2222
export const RandomStateInput = (props: RandomStateInputProps) => (
2323
<Form.Input
2424
fluid
25+
style={{ minWidth: '180px', maxWidth: '100% ' }}
2526
label='Random state'
2627
placeholder='An integer number'
2728
type='number'

‎src/frontend/static/frontend/src/components/biomarkers/modalContentBiomarker/featureSelectionPanel/steps/FeatureSelectionForm.tsx

+52-32
Original file line numberDiff line numberDiff line change
@@ -48,44 +48,64 @@ export const FeatureSelectionForm = (props: FeatureSelectionFormProps) => {
4848
settings={fitnessFunctionParameters?.clusteringParameters} /* ?? 0} */
4949
handleChangeFitnessFunctionOption={handleChangeFitnessFunctionOption}
5050
/>
51-
<Form.Group style={{ display: isExpertOn ? 'inherit' : 'none' }}>
52-
<Form.Checkbox
53-
checked={fitnessFunctionParameters.clusteringParameters.lookForOptimalNClusters}
54-
disabled // TODO: remove this when backend is implemented
55-
onChange={(_e, { checked }) => { handleChangeFitnessFunctionOption('clusteringParameters', 'lookForOptimalNClusters', checked ?? false) }}
56-
label='Search for the optimal number of clusters (soon)'
57-
/>
51+
<div style={{ display: isExpertOn ? 'inherit' : 'none', padding: '10px' }}>
52+
<Form.Group style={{ display: isExpertOn ? 'flex' : 'none', flexDirection: 'row', alignItems: 'start' }}>
53+
<span style={{ fontSize: '12px', color: '#6c757d', opacity: 0.8, marginRight: '10px' }}>
54+
Search for the optimal number of clusters (soon)
55+
</span>
56+
<Form.Checkbox
57+
checked={fitnessFunctionParameters.clusteringParameters.lookForOptimalNClusters}
58+
disabled // TODO: remove this when backend is implemented
59+
onChange={(_e, { checked }) => { handleChangeFitnessFunctionOption('clusteringParameters', 'lookForOptimalNClusters', checked ?? false) }}
60+
/>
61+
</Form.Group>
62+
<Form.Group style={{ display: isExpertOn ? 'flex' : 'none', flexDirection: 'row', alignItems: 'start' }}>
63+
{!fitnessFunctionParameters.clusteringParameters.lookForOptimalNClusters && (
64+
<Form.Input
65+
fluid
66+
style={{ minWidth: '180px', maxWidth: '100% ' }}
67+
type='number'
68+
label='Number of clusters'
69+
name='nClusters'
70+
min={2}
71+
max={10}
72+
value={fitnessFunctionParameters.clusteringParameters.nClusters}
73+
onChange={(_, { name, value }) => {
74+
const numVal = Number(value)
75+
76+
if (numVal < 2) {
77+
handleChangeFitnessFunctionOption('clusteringParameters', name, 2)
78+
} else if (numVal > 10) {
79+
handleChangeFitnessFunctionOption('clusteringParameters', name, 10)
80+
} else {
81+
handleChangeFitnessFunctionOption('clusteringParameters', name, numVal)
82+
}
83+
}}
84+
/>
85+
)}
5886

59-
{!fitnessFunctionParameters.clusteringParameters.lookForOptimalNClusters &&
87+
{/* General fields */}
6088
<Form.Input
89+
fluid
90+
style={{ minWidth: '180px', maxWidth: '100% ' }}
6191
type='number'
62-
label='Number of clusters'
63-
name='nClusters'
64-
min={2}
65-
max={10}
66-
value={fitnessFunctionParameters.clusteringParameters.nClusters}
92+
label='Penalizer'
93+
name='penalizer'
94+
min={0}
95+
value={fitnessFunctionParameters.clusteringParameters.penalizer}
6796
onChange={(_, { name, value }) => {
68-
const numVal = Number(value)
69-
70-
if (numVal < 2) {
71-
handleChangeFitnessFunctionOption('clusteringParameters', name, 2)
72-
} else if (numVal > 10) {
73-
handleChangeFitnessFunctionOption('clusteringParameters', name, 10)
74-
} else {
75-
handleChangeFitnessFunctionOption('clusteringParameters', name, numVal)
76-
}
97+
const numVal = Math.max(Number(value), 0)
98+
handleChangeFitnessFunctionOption('clusteringParameters', name, numVal)
7799
}}
78100
/>
79-
}
80-
81-
{/* General fields */}
82-
<RandomStateInput
83-
value={fitnessFunctionParameters.clusteringParameters.randomState}
84-
parameterKey='clusteringParameters'
85-
handleChange={handleChangeFitnessFunctionOption}
86-
/>
87-
<CrossValidationInput value={crossValidationParameters.folds} handleChange={handleChangeCrossValidation} />
88-
</Form.Group>
101+
<RandomStateInput
102+
value={fitnessFunctionParameters.clusteringParameters.randomState}
103+
parameterKey='clusteringParameters'
104+
handleChange={handleChangeFitnessFunctionOption}
105+
/>
106+
<CrossValidationInput value={crossValidationParameters.folds} handleChange={handleChangeCrossValidation} />
107+
</Form.Group>
108+
</div>
89109
</>
90110
)
91111
case FitnessFunction.SVM:

0 commit comments

Comments
 (0)