Skip to content

Commit 8314c3f

Browse files
seveibarseveibar
authored
fix: Merge pull request #7 from waoai/feat/workspace-and-more
Integrate react-material-workspace-layout, update dependencies
2 parents bc62be0 + 6ca4b4b commit 8314c3f

File tree

18 files changed

+5072
-3963
lines changed

18 files changed

+5072
-3963
lines changed

‎package.json

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
{
22
"name": "react-nlp-annotate",
3-
"version": "0.1.21",
4-
"homepage": "https://workaroundonline.github.io/react-nlp-annotate/",
5-
"dependencies": {},
3+
"version": "0.2.0",
4+
"homepage": "https://waoai.github.io/react-nlp-annotate/",
5+
"dependencies": {
6+
"react-hotkeys": "^2.0.0",
7+
"react-material-workspace-layout": "^0.1.6",
8+
"use-event-callback": "^0.1.0"
9+
},
610
"scripts": {
7-
"build": "npm run build:babel && cp ./package.json ./dist/package.json",
11+
"build": "rimraf dist && npm run build:babel && cp ./package.json ./dist/package.json",
812
"build:babel": "NODE_ENV=production babel ./src --out-dir=./dist",
913
"release": "npm run build && cd dist && npm publish",
1014
"storybook": "start-storybook -p 9050 -s public",
@@ -20,16 +24,19 @@
2024
"not ie <= 11",
2125
"not op_mini all"
2226
],
27+
"eslintConfig": {
28+
"extends": "react-app"
29+
},
2330
"devDependencies": {
2431
"@babel/cli": "^7.2.3",
2532
"@babel/core": "^7.2.2",
26-
"@material-ui/core": "^3.9.2",
27-
"@material-ui/icons": "^3.0.2",
28-
"@material-ui/styles": "^3.0.0-alpha.10",
29-
"@storybook/addon-actions": "^4",
30-
"@storybook/addon-links": "^4",
31-
"@storybook/addons": "^4",
32-
"@storybook/react": "^4",
33+
"@material-ui/core": "^4.10.0",
34+
"@material-ui/icons": "^4.9.1",
35+
"@material-ui/styles": "^4.10.0",
36+
"@storybook/addon-actions": "^5.3.19",
37+
"@storybook/addon-links": "^5.3.19",
38+
"@storybook/addons": "^5.3.19",
39+
"@storybook/react": "^5.3.19",
3340
"axios": "^0.19.0",
3441
"chroma-js": "^2.0.3",
3542
"downloadjs": "^1.4.7",
@@ -38,12 +45,13 @@
3845
"js-base64": "^2.5.1",
3946
"lodash": "^4.17.11",
4047
"query-string": "^6.8.1",
41-
"react": "16.8.0-alpha.1",
42-
"react-dom": "16.8.0-alpha.1",
48+
"react": "^16.13.1",
49+
"react-dom": "^16.13.1",
4350
"react-monaco-editor": "^0.26.2",
4451
"react-scripts": "2.1.3",
4552
"react-select": "^3.0.8",
4653
"react-syntax-highlighter": "^10.3.0",
54+
"rimraf": "^3.0.2",
4755
"spelling": "^2.0.1"
4856
}
4957
}

‎src/components/Container/index.js

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,50 @@
11
// @flow
22

3-
import React from "react"
3+
import React, { useMemo } from "react"
4+
import Box from "@material-ui/core/Box"
5+
import Typography from "@material-ui/core/Typography"
6+
import Workspace from "react-material-workspace-layout/Workspace"
47

5-
export default ({ children }: any) => (
6-
<div style={{ border: "1px solid #ccc", padding: 10, borderRadius: 4 }}>
7-
{children}
8-
</div>
9-
)
8+
export default ({
9+
children,
10+
onNext,
11+
onPrev,
12+
currentSampleIndex = 0,
13+
numberOfSamples = 1,
14+
titleContent,
15+
onClickHeaderItem
16+
}: any) => {
17+
const headerItems = useMemo(
18+
() =>
19+
[
20+
(currentSampleIndex > 0 || onPrev) && { name: "Prev", onClick: onPrev },
21+
(numberOfSamples > currentSampleIndex + 1 || onNext) && {
22+
name: "Next",
23+
onClick: onNext
24+
},
25+
{ name: "Done" }
26+
].filter(Boolean),
27+
[currentSampleIndex, numberOfSamples]
28+
)
29+
return (
30+
<Workspace
31+
headerLeftSide={
32+
titleContent === undefined ? (
33+
<Box paddingLeft={2} fontWeight="bold">
34+
<Typography>
35+
Sample {currentSampleIndex + 1} / {numberOfSamples}
36+
</Typography>
37+
</Box>
38+
) : (
39+
titleContent
40+
)
41+
}
42+
onClickHeaderItem={onClickHeaderItem}
43+
headerItems={headerItems}
44+
iconSidebarItems={[]}
45+
rightSidebarItems={[]}
46+
>
47+
<Box padding={2}>{children}</Box>
48+
</Workspace>
49+
)
50+
}

‎src/components/Container/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("Container", 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+
))

‎src/components/Document/index.js

Lines changed: 84 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,14 @@ export default function Document({
2121
sequence,
2222
onHighlightedChanged = () => null,
2323
onSequenceChange = () => null,
24-
nothingHighlighted,
24+
nothingHighlighted = false,
2525
colorLabelMap = {}
2626
}: Props) {
2727
const [mouseDown, changeMouseDown] = useState()
28-
const [[firstSelected, lastSelected], changeHighlightedRangeState] = useState(
29-
[null, null]
30-
)
28+
const [
29+
[firstSelected, lastSelected],
30+
changeHighlightedRangeState
31+
] = useState([null, null])
3132
const changeHighlightedRange = ([first, last]) => {
3233
changeHighlightedRangeState([first, last])
3334
const highlightedItems = []
@@ -51,89 +52,88 @@ export default function Document({
5152
onMouseUp={() => changeMouseDown(false)}
5253
>
5354
{sequence.map((seq, i) => (
54-
<>
55-
<span
56-
onMouseDown={() => {
57-
if (seq.label) return
58-
changeHighlightedRange([i, i])
59-
}}
60-
onMouseMove={() => {
61-
if (seq.label) return
62-
if (mouseDown && i !== lastSelected) {
63-
changeHighlightedRange([
64-
firstSelected === null ? i : firstSelected,
65-
i
66-
])
67-
}
68-
}}
69-
style={
70-
seq.label
71-
? {
72-
display: "inline-flex",
73-
backgroundColor:
74-
seq.color || colorLabelMap[seq.label] || "#333",
75-
color: "#fff",
76-
padding: 4,
77-
margin: 4,
78-
paddingLeft: 10,
79-
paddingRight: 10,
80-
borderRadius: 4,
81-
userSelect: "none"
82-
}
83-
: {
84-
display: "inline-flex",
85-
backgroundColor:
86-
seq.text !== " " && highlightedItems.includes(i)
87-
? "#ccc"
88-
: "inherit",
89-
color: "#333",
90-
marginTop: 4,
91-
marginBottom: 4,
92-
paddingTop: 4,
93-
paddingBottom: 4,
94-
paddingLeft: 2,
95-
paddingRight: 2,
96-
userSelect: "none"
97-
}
55+
<span
56+
key={i}
57+
onMouseDown={() => {
58+
if (seq.label) return
59+
changeHighlightedRange([i, i])
60+
}}
61+
onMouseMove={() => {
62+
if (seq.label) return
63+
if (mouseDown && i !== lastSelected) {
64+
changeHighlightedRange([
65+
firstSelected === null ? i : firstSelected,
66+
i
67+
])
9868
}
99-
key={i}
100-
>
101-
{seq.label ? (
102-
<Tooltip title={seq.label} placement="bottom">
103-
<div>{seq.text}</div>
104-
</Tooltip>
105-
) : (
106-
<div>{seq.text}</div>
107-
)}
108-
{seq.label && (
109-
<div
110-
onClick={() => {
111-
onSequenceChange(
112-
sequence
113-
.flatMap(s => (s !== seq ? s : stringToSequence(s.text)))
114-
.filter(s => s.text.length > 0)
115-
)
116-
}}
117-
style={{
69+
}}
70+
style={
71+
seq.label
72+
? {
11873
display: "inline-flex",
119-
cursor: "pointer",
120-
alignSelf: "center",
121-
fontSize: 11,
122-
width: 18,
123-
height: 18,
124-
alignItems: "center",
125-
justifyContent: "center",
126-
marginLeft: 4,
127-
borderRadius: 9,
74+
backgroundColor:
75+
seq.color || colorLabelMap[seq.label] || "#333",
12876
color: "#fff",
129-
backgroundColor: "rgba(0,0,0,0.2)"
130-
}}
131-
>
132-
<span>{"\u2716"}</span>
133-
</div>
134-
)}
135-
</span>
136-
</>
77+
padding: 4,
78+
margin: 4,
79+
paddingLeft: 10,
80+
paddingRight: 10,
81+
borderRadius: 4,
82+
userSelect: "none"
83+
}
84+
: {
85+
display: "inline-flex",
86+
backgroundColor:
87+
seq.text !== " " && highlightedItems.includes(i)
88+
? "#ccc"
89+
: "inherit",
90+
color: "#333",
91+
marginTop: 4,
92+
marginBottom: 4,
93+
paddingTop: 4,
94+
paddingBottom: 4,
95+
paddingLeft: 2,
96+
paddingRight: 2,
97+
userSelect: "none"
98+
}
99+
}
100+
key={i}
101+
>
102+
{seq.label ? (
103+
<Tooltip title={seq.label} placement="bottom">
104+
<div>{seq.text}</div>
105+
</Tooltip>
106+
) : (
107+
<div>{seq.text}</div>
108+
)}
109+
{seq.label && (
110+
<div
111+
onClick={() => {
112+
onSequenceChange(
113+
sequence
114+
.flatMap(s => (s !== seq ? s : stringToSequence(s.text)))
115+
.filter(s => s.text.length > 0)
116+
)
117+
}}
118+
style={{
119+
display: "inline-flex",
120+
cursor: "pointer",
121+
alignSelf: "center",
122+
fontSize: 11,
123+
width: 18,
124+
height: 18,
125+
alignItems: "center",
126+
justifyContent: "center",
127+
marginLeft: 4,
128+
borderRadius: 9,
129+
color: "#fff",
130+
backgroundColor: "rgba(0,0,0,0.2)"
131+
}}
132+
>
133+
<span>{"\u2716"}</span>
134+
</div>
135+
)}
136+
</span>
137137
))}
138138
</div>
139139
)

‎src/components/DocumentLabeler/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,10 @@ export default function DocumentLabeler(props: LabelDocumentProps) {
1919
<div>
2020
<div>
2121
<LabelSelector
22+
hotkeysEnabled={props.hotkeysEnabled}
2223
labels={props.labels}
2324
onSelectLabel={(labelId: string) => {
25+
console.log({ labelId })
2426
if (props.multipleLabels) {
2527
changeSelectedLabels(selectedLabels.concat([labelId]))
2628
props.onChange(selectedLabels.concat([labelId]))
@@ -38,6 +40,7 @@ export default function DocumentLabeler(props: LabelDocumentProps) {
3840
if (!label) return
3941
return (
4042
<LabelButton
43+
key={labelId}
4144
{...label}
4245
small
4346
deletable

0 commit comments

Comments
 (0)