Skip to content

Commit 5dfa0db

Browse files
seveibarseveibar
committed
transcription fixes, integrate react-material-workspace-layout
1 parent e2d15f9 commit 5dfa0db

File tree

6 files changed

+183
-163
lines changed

6 files changed

+183
-163
lines changed

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"homepage": "https://waoai.github.io/react-nlp-annotate/",
55
"dependencies": {
66
"react-hotkeys": "^2.0.0",
7-
"react-material-workspace-layout": "^0.1.4",
7+
"react-material-workspace-layout": "^0.1.6",
88
"use-event-callback": "^0.1.0"
99
},
1010
"scripts": {
@@ -24,6 +24,9 @@
2424
"not ie <= 11",
2525
"not op_mini all"
2626
],
27+
"eslintConfig": {
28+
"extends": "react-app"
29+
},
2730
"devDependencies": {
2831
"@babel/cli": "^7.2.3",
2932
"@babel/core": "^7.2.2",

‎src/components/Container/index.js

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,30 @@ export default ({
1212
titleContent,
1313
onClickHeaderItem
1414
}: 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-
// )
15+
const headerItems = useMemo(
16+
() =>
17+
[
18+
currentSampleIndex > 0 && { name: "Prev" },
19+
numberOfSamples > currentSampleIndex + 1 && { name: "Next" },
20+
{ name: "Done" }
21+
].filter(Boolean),
22+
[currentSampleIndex, numberOfSamples]
23+
)
2524
return (
2625
<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-
// }
26+
headerLeftSide={
27+
titleContent === undefined ? (
28+
<Box paddingLeft={2} fontWeight="bold">
29+
<Typography>
30+
Sample {currentSampleIndex + 1} / {numberOfSamples}
31+
</Typography>
32+
</Box>
33+
) : (
34+
titleContent
35+
)
36+
}
3837
onClickHeaderItem={onClickHeaderItem}
39-
headerItems={[]}
38+
headerItems={headerItems}
4039
iconSidebarItems={[]}
4140
rightSidebarItems={[]}
4241
>

‎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/EditableDocument/index.js

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,21 +93,54 @@ export default function EditableDocument({
9393
const handleChange = v => {
9494
if (!v) v = []
9595
changeValue(v)
96-
const result = v.map(l => l.label).join(" ")
96+
const result = v
97+
.map(l => l.label.trim())
98+
.join(" ")
99+
.trim()
97100
try {
98101
changeValidationErrors(validator(result))
99102
} catch (e) {
100103
changeValidationErrors(["Error: Validator had error: " + e.toString()])
101104
}
102105
onChange(result)
103106
}
107+
const isInDictionary = text => {
108+
if (lowerCaseMode) text = text.trim().toLowerCase()
109+
const scRes = spellChecker.lookup(text)
110+
if (scRes.found || phraseBank.includes(text)) return true
111+
return false
112+
}
113+
104114
const handleInputChange = v => changeInputValue(v)
105115
const handleKeyDown = ({ key }) => {
106116
if (!inputValue) return
107117
if (key === "Enter" || key === "Tab") {
108118
changeValue([
109119
...(value || []),
110-
createOption(inputValue + " ", yellow[700])
120+
createOption(inputValue.trim(), yellow[700])
121+
])
122+
changeInputValue("")
123+
} else if (key === " " && isInDictionary(inputValue.trim())) {
124+
changeValue([
125+
...(value || []),
126+
createOption(inputValue.trim(), green[500])
127+
])
128+
changeInputValue("")
129+
} else if (
130+
key === " " &&
131+
isInDictionary(inputValue.split(" ").slice(-1)[0])
132+
) {
133+
changeValue([
134+
...(value || []),
135+
createOption(
136+
inputValue
137+
.split(" ")
138+
.slice(0, -1)
139+
.join(" ")
140+
.trim(),
141+
yellow[700]
142+
),
143+
createOption(inputValue.split(" ").slice(-1)[0], green[700])
111144
])
112145
changeInputValue("")
113146
}

0 commit comments

Comments
 (0)