Skip to content

Commit 646c611

Browse files
mrdadahmrdadah
authored
fix: Merge pull request #218 from UniversalDataTool/image-classification-workspace-layout
implement workspace layout in image classification component
2 parents 44c76e4 + 38a317d commit 646c611

File tree

7 files changed

+139
-80
lines changed

7 files changed

+139
-80
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,5 @@ src/components/LocalStorageApp/myAWSconfig.js
3737

3838
# eventually we'll commit these
3939
cypress/snapshots
40+
41+
.idea

‎package-lock.json‎

Lines changed: 17 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
"react-i18next": "^11.4.0",
108108
"react-icons": "^3.9.0",
109109
"react-image-annotate": "^1.2.7",
110+
"react-material-workspace-layout": "^0.1.6",
110111
"react-scripts": "^3.4.1",
111112
"react-select": "^3.0.8",
112113
"rfc6902": "^3.0.4",

‎src/components/ConfigureInterface/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,9 @@ export const ConfigureInterface = ({
188188
<Grid item hidden={isNested} xs={12} lg={6}>
189189
<Heading>Preview</Heading>
190190
<PreviewContainer>
191-
<PreviewContent style={{ opacity: previewLoading ? 0.5 : 1 }}>
191+
<PreviewContent
192+
style={{ opacity: previewLoading ? 0.5 : 1, height: "100%" }}
193+
>
192194
<LabelErrorBoundary key={previewChangedTime}>
193195
<UniversalDataViewer
194196
key={previewChangedTime}

‎src/components/ImageClassification/index.js‎

Lines changed: 39 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Button from "@material-ui/core/Button"
77
import * as colors from "@material-ui/core/colors"
88
import Checkbox from "@material-ui/core/Checkbox"
99
import without from "lodash/without"
10+
import WorkspaceContainer from "../WorkspaceContainer"
1011

1112
const brightColors = [
1213
colors.blue[600],
@@ -52,29 +53,6 @@ const Image = styled("img")({
5253
objectFit: "contain",
5354
})
5455

55-
const Nav = styled("div")({
56-
display: "flex",
57-
justifyContent: "center",
58-
marginTop: 4,
59-
flexShrink: 0,
60-
})
61-
const NavItem = styled("div")({
62-
backgroundColor: "#000",
63-
color: "#fff",
64-
display: "flex",
65-
alignItems: "center",
66-
justifyContent: "center",
67-
"& > span": {
68-
padding: 16,
69-
},
70-
})
71-
const NavButton = styled(Button)({
72-
color: "#fff",
73-
padding: 8,
74-
paddingLeft: 16,
75-
paddingRight: 16,
76-
})
77-
7856
const ButtonsContainer = styled("div")({
7957
paddingLeft: 50,
8058
paddingRight: 50,
@@ -210,56 +188,44 @@ export default ({
210188
}, [hotkeyMap])
211189

212190
return (
213-
<Container
214-
style={{
215-
height: containerProps.height || "calc(100% - 70px)",
216-
minHeight: 600,
217-
}}
191+
<WorkspaceContainer
192+
onNext={onNextNoSave}
193+
onPrev={onPrev}
194+
onClickHeaderItem={onDone}
195+
numberOfSamples={samples.length}
196+
currentSampleIndex={sampleIndex}
197+
globalSampleIndex={globalSampleIndex}
218198
>
219-
<ImageContainer>
220-
<Image src={samples[sampleIndex].imageUrl} />
221-
</ImageContainer>
222-
<Nav>
223-
<NavItem>
224-
<NavButton onClick={onPrev}>Prev (backspace)</NavButton>
225-
</NavItem>
226-
{samples.length > 1 ? (
227-
<NavItem>
228-
<span>
229-
({sampleIndex + 1}/{samples.length})
230-
</span>
231-
</NavItem>
232-
) : globalSampleIndex !== undefined ? (
233-
<NavItem>
234-
<span>[{globalSampleIndex}]</span>
235-
</NavItem>
236-
) : null}
237-
<NavItem>
238-
<NavButton onClick={onNextNoSave}>Next (space)</NavButton>
239-
</NavItem>
240-
<NavItem>
241-
<NavButton onClick={onDone}>Done (enter)</NavButton>
242-
</NavItem>
243-
</Nav>
244-
<ButtonsContainer>
245-
{labels.map((label) => (
246-
<CheckButton
247-
key={label.id}
248-
onClick={() => onClickLabel(label)}
249-
style={{
250-
backgroundColor: getRandomColor(label),
251-
transform: enlargedLabel === label ? "scale(1.1,1.1)" : undefined,
252-
}}
253-
>
254-
<Checkbox
255-
style={{ color: "#fff" }}
256-
checked={currentOutput.includes(label.id)}
257-
/>
258-
{label.id}
259-
{labelKeyMap[label.id] ? ` (${labelKeyMap[label.id]})` : ""}
260-
</CheckButton>
261-
))}
262-
</ButtonsContainer>
263-
</Container>
199+
<Container
200+
style={{
201+
height: containerProps.height || "calc(100% - 70px)",
202+
minHeight: 600,
203+
}}
204+
>
205+
<ImageContainer>
206+
<Image src={samples[sampleIndex].imageUrl} />
207+
</ImageContainer>
208+
<ButtonsContainer>
209+
{labels.map((label) => (
210+
<CheckButton
211+
key={label.id}
212+
onClick={() => onClickLabel(label)}
213+
style={{
214+
backgroundColor: getRandomColor(label),
215+
transform:
216+
enlargedLabel === label ? "scale(1.1,1.1)" : undefined,
217+
}}
218+
>
219+
<Checkbox
220+
style={{ color: "#fff" }}
221+
checked={currentOutput.includes(label.id)}
222+
/>
223+
{label.id}
224+
{labelKeyMap[label.id] ? ` (${labelKeyMap[label.id]})` : ""}
225+
</CheckButton>
226+
))}
227+
</ButtonsContainer>
228+
</Container>
229+
</WorkspaceContainer>
264230
)
265231
}

‎src/components/WorkspaceContainer/index.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// @flow
2+
3+
import React, { useMemo } from "react"
4+
import Box from "@material-ui/core/Box"
5+
import Workspace from "react-material-workspace-layout/Workspace"
6+
import { styled } from "@material-ui/core/styles"
7+
8+
const HeaderLeftSideContainer = styled("div")({
9+
fontSize: 24,
10+
fontWeight: "bold",
11+
})
12+
13+
export default ({
14+
children,
15+
onNext,
16+
onPrev,
17+
currentSampleIndex = 0,
18+
numberOfSamples = 1,
19+
globalSampleIndex = 1,
20+
titleContent,
21+
onClickHeaderItem,
22+
}: any) => {
23+
const headerItems = useMemo(
24+
() =>
25+
[
26+
(currentSampleIndex > 0 || onPrev) && { name: "Prev", onClick: onPrev },
27+
(numberOfSamples > currentSampleIndex + 1 || onNext) && {
28+
name: "Next",
29+
onClick: onNext,
30+
},
31+
{ name: "Save" },
32+
].filter(Boolean),
33+
[currentSampleIndex, numberOfSamples, onNext, onPrev]
34+
)
35+
return (
36+
<Workspace
37+
headerLeftSide={
38+
titleContent === undefined ? (
39+
<Box paddingLeft={2} fontWeight="bold">
40+
<HeaderLeftSideContainer>
41+
Sample{" "}
42+
{numberOfSamples > 1
43+
? `${currentSampleIndex + 1} / ${numberOfSamples}`
44+
: `${globalSampleIndex}`}
45+
</HeaderLeftSideContainer>
46+
</Box>
47+
) : (
48+
titleContent
49+
)
50+
}
51+
onClickHeaderItem={onClickHeaderItem}
52+
headerItems={headerItems}
53+
iconSidebarItems={[]}
54+
rightSidebarItems={[]}
55+
>
56+
<Box padding={2} style={{ width: "100%" }}>
57+
{children}
58+
</Box>
59+
</Workspace>
60+
)
61+
}

‎src/components/WorkspaceContainer/index.story.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// @flow
2+
3+
import React from "react"
4+
import { storiesOf } from "@storybook/react"
5+
import { action } from "@storybook/addon-actions"
6+
import Container from "./"
7+
8+
storiesOf("WorkspaceContainer", module).add("Basic", () => (
9+
<Container
10+
onNext={action("onNext")}
11+
onPrev={action("onPrev")}
12+
onClickHeaderItem={action("onClickHeaderItem")}
13+
>
14+
Some inner content
15+
</Container>
16+
))

0 commit comments

Comments
 (0)