Skip to content

Commit e2d15f9

Browse files
seveibarseveibar
committed
integrated react-material-workspace-layout and updated dependencies
1 parent 97656d4 commit e2d15f9

10 files changed

Lines changed: 4779 additions & 3831 deletions

File tree

‎package.json‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
{
22
"name": "react-nlp-annotate",
33
"version": "0.1.22",
4-
"homepage": "https://workaroundonline.github.io/react-nlp-annotate/",
5-
"dependencies": {},
4+
"homepage": "https://waoai.github.io/react-nlp-annotate/",
5+
"dependencies": {
6+
"react-hotkeys": "^2.0.0",
7+
"react-material-workspace-layout": "^0.1.4",
8+
"use-event-callback": "^0.1.0"
9+
},
610
"scripts": {
711
"build": "npm run build:babel && cp ./package.json ./dist/package.json",
812
"build:babel": "NODE_ENV=production babel ./src --out-dir=./dist",
@@ -23,13 +27,13 @@
2327
"devDependencies": {
2428
"@babel/cli": "^7.2.3",
2529
"@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",
30+
"@material-ui/core": "^4.10.0",
31+
"@material-ui/icons": "^4.9.1",
32+
"@material-ui/styles": "^4.10.0",
33+
"@storybook/addon-actions": "^5.3.19",
34+
"@storybook/addon-links": "^5.3.19",
35+
"@storybook/addons": "^5.3.19",
36+
"@storybook/react": "^5.3.19",
3337
"axios": "^0.19.0",
3438
"chroma-js": "^2.0.3",
3539
"downloadjs": "^1.4.7",
@@ -38,8 +42,8 @@
3842
"js-base64": "^2.5.1",
3943
"lodash": "^4.17.11",
4044
"query-string": "^6.8.1",
41-
"react": "16.8.0-alpha.1",
42-
"react-dom": "16.8.0-alpha.1",
45+
"react": "^16.13.1",
46+
"react-dom": "^16.13.1",
4347
"react-monaco-editor": "^0.26.2",
4448
"react-scripts": "2.1.3",
4549
"react-select": "^3.0.8",

‎src/components/Container/index.js‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,46 @@
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+
currentSampleIndex = 0,
11+
numberOfSamples = 1,
12+
titleContent,
13+
onClickHeaderItem
14+
}: any) => {
15+
console.log("rerendering")
16+
// const headerItems = useMemo(
17+
// () =>
18+
// [
19+
// currentSampleIndex > 0 && { name: "Prev" },
20+
// numberOfSamples > currentSampleIndex + 1 && { name: "Next" },
21+
// { name: "Done" }
22+
// ].filter(Boolean),
23+
// [currentSampleIndex, numberOfSamples]
24+
// )
25+
return (
26+
<Workspace
27+
// headerLeftSide={
28+
// titleContent === undefined ? (
29+
// <Box paddingLeft={2} fontWeight="bold">
30+
// <Typography>
31+
// Sample {currentSampleIndex + 1} / {numberOfSamples}
32+
// </Typography>
33+
// </Box>
34+
// ) : (
35+
// titleContent
36+
// )
37+
// }
38+
onClickHeaderItem={onClickHeaderItem}
39+
headerItems={[]}
40+
iconSidebarItems={[]}
41+
rightSidebarItems={[]}
42+
>
43+
<Box padding={2}>{children}</Box>
44+
</Workspace>
45+
)
46+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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 onClickHeaderItem={action("onClickHeaderItem")}>
10+
Some inner content
11+
</Container>
12+
))

‎src/components/LabelButton/index.js‎

Lines changed: 39 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
// @flow
22

3-
import React from "react"
3+
import React, { useMemo } from "react"
44
import type { Label as LabelType } from "../../types.js"
55
import FolderOpenIcon from "@material-ui/icons/FolderOpen"
66
import classnames from "classnames"
7-
import makeStyles from "@material-ui/styles/makeStyles"
7+
import { makeStyles } from "@material-ui/core/styles"
8+
import Tooltip from "@material-ui/core/Tooltip"
89

910
const useStyles = makeStyles({
1011
label: {
@@ -25,6 +26,26 @@ const useStyles = makeStyles({
2526
fontSize: 12,
2627
fontWeight: "bold"
2728
}
29+
},
30+
deleteableIcon: {
31+
display: "inline-flex",
32+
cursor: "pointer",
33+
alignSelf: "center",
34+
fontSize: 11,
35+
width: 18,
36+
height: 18,
37+
alignItems: "center",
38+
justifyContent: "center",
39+
marginLeft: 4,
40+
borderRadius: 9,
41+
color: "#fff",
42+
backgroundColor: "rgba(0,0,0,0.2)"
43+
},
44+
hotkeyText: {
45+
paddingLeft: 4
46+
},
47+
tooltip: {
48+
whiteSpace: "pre-wrap"
2849
}
2950
})
3051

@@ -48,8 +69,11 @@ const Label = (props: {
4869
deletable
4970
} = props
5071
const classes = useStyles()
72+
const tooltipClasses = useMemo(() => ({ tooltip: classes.tooltip }), [
73+
classes
74+
])
5175

52-
return (
76+
const button = (
5377
<div
5478
onClick={() => props.onClick(id)}
5579
className={classnames(classes.label, small && "small")}
@@ -65,29 +89,24 @@ const Label = (props: {
6589
/>
6690
)}
6791
<div>{displayName || id}</div>
68-
{hotkey && <div style={{ paddingLeft: 4 }}>({hotkey})</div>}
92+
{hotkey && <div className={classes.hotkeyText}>({hotkey})</div>}
6993
{deletable && (
70-
<div
71-
style={{
72-
display: "inline-flex",
73-
cursor: "pointer",
74-
alignSelf: "center",
75-
fontSize: 11,
76-
width: 18,
77-
height: 18,
78-
alignItems: "center",
79-
justifyContent: "center",
80-
marginLeft: 4,
81-
borderRadius: 9,
82-
color: "#fff",
83-
backgroundColor: "rgba(0,0,0,0.2)"
84-
}}
85-
>
94+
<div className={classes.deleteableIcon}>
8695
<span>{"\u2716"}</span>
8796
</div>
8897
)}
8998
</div>
9099
)
100+
101+
if (description) {
102+
return (
103+
<Tooltip title={description} arrow classes={tooltipClasses}>
104+
{button}
105+
</Tooltip>
106+
)
107+
} else {
108+
return button
109+
}
91110
}
92111

93112
export default Label

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,15 @@ import React from "react"
44

55
import { storiesOf } from "@storybook/react"
66
import { action } from "@storybook/addon-actions"
7+
import colors from "../../colors"
78

89
import LabelButton from "./"
910

10-
storiesOf("LabelButton", module).add("Basic", () => <LabelButton />)
11+
storiesOf("LabelButton", module).add("Basic", () => (
12+
<LabelButton
13+
name="hello_world"
14+
displayName="Hello World"
15+
color={colors[0]}
16+
hotkey="h"
17+
/>
18+
))

‎src/components/LabelSelector/index.js‎

Lines changed: 24 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
11
// @flow
22

3-
import React, { useState, useLayoutEffect, useEffect } from "react"
4-
import { makeStyles } from "@material-ui/styles"
3+
import React, { useState, useEffect, useMemo } from "react"
54
import type { Label as LabelType } from "../../types.js"
65
import LabelButton from "../LabelButton"
7-
import Tooltip from "@material-ui/core/Tooltip"
8-
9-
const useStyles = makeStyles({
10-
tooltip: {
11-
whiteSpace: "pre-wrap"
12-
}
13-
})
6+
import colors from "../../colors"
147

158
const findRouteFromParents = (labelId, labels) => {
169
if (!labelId) return []
@@ -46,7 +39,7 @@ export default ({
4639
}
4740
}
4841

49-
useLayoutEffect(() => {
42+
useEffect(() => {
5043
const eventFunc = e => {
5144
if (hotkeyLabelMap[e.key]) {
5245
const labelId = hotkeyLabelMap[e.key]
@@ -66,9 +59,7 @@ export default ({
6659
return () => {
6760
window.removeEventListener("keydown", eventFunc)
6861
}
69-
})
70-
71-
const c = useStyles()
62+
}, [changeParents, onSelectLabel])
7263

7364
return (
7465
<div>
@@ -91,22 +82,14 @@ export default ({
9182
hasChildren: labels.some(l2 => l2.parent === l.id)
9283
}))
9384
.map((l, i) => (
94-
<Tooltip
95-
// open={helpOpen}
96-
classes={{ tooltip: c.tooltip }}
97-
key={i}
98-
title={l.description || "No Description"}
99-
placement="bottom"
100-
>
101-
<LabelButton
102-
small
103-
{...l}
104-
hotkey={labelHotkeyMap[l.id]}
105-
onClick={() => {
106-
changeParents(parents.slice(0, parents.indexOf(l.id) + 1))
107-
}}
108-
/>
109-
</Tooltip>
85+
<LabelButton
86+
small
87+
{...l}
88+
hotkey={labelHotkeyMap[l.id]}
89+
onClick={() => {
90+
changeParents(parents.slice(0, parents.indexOf(l.id) + 1))
91+
}}
92+
/>
11093
))}
11194
</div>
11295
)}
@@ -118,26 +101,18 @@ export default ({
118101
hasChildren: labels.some(l2 => l2.parent === l.id)
119102
}))
120103
.map((l, i) => (
121-
<Tooltip
122-
key={i}
123-
classes={{ tooltip: c.tooltip }}
124-
title={l.description || "No Description"}
125-
placement="bottom"
126-
>
127-
<div>
128-
<LabelButton
129-
{...l}
130-
hotkey={labelHotkeyMap[l.id]}
131-
onClick={
132-
!l.hasChildren
133-
? onSelectLabel
134-
: () => {
135-
changeParents(parents.concat([l.id]))
136-
}
137-
}
138-
/>
139-
</div>
140-
</Tooltip>
104+
<LabelButton
105+
key={l.id}
106+
{...l}
107+
hotkey={labelHotkeyMap[l.id]}
108+
onClick={
109+
!l.hasChildren
110+
? onSelectLabel
111+
: () => {
112+
changeParents(parents.concat([l.id]))
113+
}
114+
}
115+
/>
141116
))}
142117
</div>
143118
</div>

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,26 @@ import React from "react"
44

55
import { storiesOf } from "@storybook/react"
66
import { action } from "@storybook/addon-actions"
7+
import colors from "../../colors"
78

89
import LabelSelector from "./"
910

10-
storiesOf("LabelSelector", module).add("Basic", () => <LabelSelector />)
11+
storiesOf("LabelSelector", module).add("Basic", () => (
12+
<LabelSelector
13+
labels={[
14+
{
15+
displayName: "Label One",
16+
id: "label_one",
17+
description: "The first label",
18+
color: colors[0]
19+
},
20+
{
21+
displayName: "Label Two",
22+
id: "label_two",
23+
description: "The second label",
24+
color: colors[1]
25+
}
26+
]}
27+
onSelectLabel={action("onSelectLabel")}
28+
/>
29+
))

0 commit comments

Comments
 (0)