Skip to content

Commit

Permalink
refactor: improve RIOEditPreference
Browse files Browse the repository at this point in the history
  • Loading branch information
@wadjih-bencheikh18
wadjih-bencheikh18 committed Aug 21, 2023
1 parent ad584e9 commit 33197ed
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 62 deletions.
120 changes: 73 additions & 47 deletions src/components/roi/ROIEditPreference.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { FaCheck, FaTimes } from 'react-icons/fa';
import {
Checkbox,
ColorPickerDropdown,
Input,
Table,
Toolbar,
ValueRenderers,
Expand Down Expand Up @@ -38,23 +39,6 @@ const EditGroup = styled.div`
margin-bottom: 1rem;
`;

const CheckboxGroup = styled.div`
display: flex;
flex-direction: column;
& > * {
}
`;

const AnnotationGroup = styled.div`
display: flex;
flex-direction: row;
margin-bottom: 0.5rem;
& > :first-of-type {
white-space: nowrap;
}
`;

const tableStyle: CSSProperties = {
width: '100%',
};
Expand Down Expand Up @@ -160,38 +144,80 @@ function ROIEditPreference() {
</EditGroup>
<EditGroup>
<RoiEditTitle>Annotations</RoiEditTitle>
<CheckboxGroup>
<Table style={tableStyle}>
<Table.Header>
<ValueRenderers.Title value="Kind" />
<ValueRenderers.Title value="Color" />
<ValueRenderers.Title value="Display value" />
<ValueRenderers.Title value="Font size" />
<ValueRenderers.Title value="Font color" />
</Table.Header>
{Object.keys(annotationsPreferences).map((key) => (
<AnnotationGroup key={key}>
<Checkbox
label={startCase(key)}
checked={annotationsPreferences[key].enabled}
onChange={(checked) =>
setAnnotationsPreferences({
...annotationsPreferences,
[key]: {
...annotationsPreferences[key],
enabled: checked as boolean,
},
})
}
/>
<ColorPickerDropdown
disableAlpha
color={{ hex: annotationsPreferences[key].color }}
onChange={(color) =>
setAnnotationsPreferences({
...annotationsPreferences,
[key]: {
...annotationsPreferences[key],
color: color.hex,
},
})
}
/>
</AnnotationGroup>
<Table.Row key={key}>
<ValueRenderers.Text value={startCase(key)} />
<ValueRenderers.Component>
<ColorPickerDropdown
disableAlpha
color={{ hex: annotationsPreferences[key].color }}
onChange={(color) =>
setAnnotationsPreferences({
...annotationsPreferences,
[key]: {
...annotationsPreferences[key],
color: color.hex,
},
})
}
/>
</ValueRenderers.Component>
<ValueRenderers.Component>
<Checkbox
checked={annotationsPreferences[key].enabled}
onChange={(checked) =>
setAnnotationsPreferences({
...annotationsPreferences,
[key]: {
...annotationsPreferences[key],
enabled: checked as boolean,
},
})
}
/>
</ValueRenderers.Component>
<ValueRenderers.Component>
<Input
type="number"
value={annotationsPreferences[key].fontSize}
onChange={(event) => {
const newValue = event.target.valueAsNumber;
setAnnotationsPreferences({
...annotationsPreferences,
[key]: {
...annotationsPreferences[key],
fontSize: newValue,
},
});
}}
/>
</ValueRenderers.Component>
<ValueRenderers.Component>
<ColorPickerDropdown
disableAlpha
color={{ hex: annotationsPreferences[key].fontColor }}
onChange={(color) =>
setAnnotationsPreferences({
...annotationsPreferences,
[key]: {
...annotationsPreferences[key],
fontColor: color.hex,
},
})
}
/>
</ValueRenderers.Component>
</Table.Row>
))}
</CheckboxGroup>
</Table>
</EditGroup>
</PaddedContent>
</>
Expand Down
2 changes: 1 addition & 1 deletion src/components/roi/annotation/ConvexHullAnnotation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function ConvexHullAnnotation({ roi }: ConvexHullAnnotationProps) {
const textStyle: CSSProperties = useMemo(
() => ({
fill: fontColor,
fontSize: fontSize,
fontSize,
textAnchor: 'middle',
dominantBaseline: 'text-before-edge',
}),
Expand Down
17 changes: 6 additions & 11 deletions src/components/roi/annotation/FeretAnnotation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ function FeretAnnotation({ roi }: FeretAnnotationProps) {
const textStyle: CSSProperties = useMemo(
() => ({
fill: fontColor,
fontSize: fontSize,
fontSize,
textAnchor: 'middle',
dominantBaseline: 'central',
}),
Expand All @@ -64,16 +64,11 @@ function FeretAnnotation({ roi }: FeretAnnotationProps) {
const x = x2 > x1 ? (x2 + x1 + 2) / 2 : (x2 + x1 - 2) / 2;
const y = y1 > y2 ? (y2 + y1 + 2) / 2 : (y2 + y1 - 2) / 2;
return (
<g>
<line
// eslint-disable-next-line react/no-array-index-key
key={`${roi.id}-${index}`}
x1={x1}
y1={y1}
x2={x2}
y2={y2}
style={lineStyle}
/>
<g
// eslint-disable-next-line react/no-array-index-key
key={`${roi.id}-${index}`}
>
<line x1={x1} y1={y1} x2={x2} y2={y2} style={lineStyle} />
<text
x={0}
y={0}
Expand Down
2 changes: 1 addition & 1 deletion src/components/roi/annotation/MBRAnnotation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function MBRAnnotation({ roi }: MBRAnnotationProps) {
const textStyle: CSSProperties = useMemo(
() => ({
fill: fontColor,
fontSize: fontSize,
fontSize,
textAnchor: 'middle',
dominantBaseline: 'text-after-edge',
}),
Expand Down
9 changes: 8 additions & 1 deletion src/components/roi/annotation/SurfaceAnnotation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,14 @@ function SurfaceAnnotation({ roi }: SurfaceAnnotationProps) {
if (!enabled) return null;

return roi.points.map(([column, row]) => (
<rect x={column} y={row} width="1" height="1" style={rectStyle} />
<rect
key={`${column}-${row}`}
x={column}
y={row}
width="1"
height="1"
style={rectStyle}
/>
));
}

Expand Down
2 changes: 1 addition & 1 deletion src/state/preferences/PreferencesReducer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export const initialPreferencesState: PreferencesState = {
fontSize: 2,
},
surface: {
enabled: false,
enabled: true,
color: '#00ff00',
fontColor: '#00ff00',
fontSize: 2,
Expand Down

0 comments on commit 33197ed

Please sign in to comment.