Skip to content

Commit be431bb

Browse files
malagsmalags
authored
Merge pull request #85 from LuCEresearchlab/highlighting-storage-refactor
Highlighting storage refactor
2 parents c7c99d1 + 6831a89 commit be431bb

File tree

11 files changed

+129
-47
lines changed

11 files changed

+129
-47
lines changed

‎frontend/src/components/tagger_component/MisconceptionTagElement.tsx

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {useState} from "react"
22
import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
33
import {JSONLoader} from "../../helpers/LoaderHelper";
44
import {Button} from "@material-ui/core";
5-
import {HighlightRange} from "../../interfaces/HighlightRange";
5+
import {HighlightRange, HighlightRangeColor} from "../../interfaces/HighlightRange";
66
import {StyledTableCell, StyledTableRow} from "../styled/StyledTable";
77
import {TaggedAnswer} from "../../interfaces/TaggedAnswer";
88
import {Answer} from "../../interfaces/Dataset";
@@ -20,7 +20,7 @@ import stringEquals from "../../util/StringEquals";
2020
import TruthCircle from "./TruthCircle";
2121
import NoMisconception from "../../util/NoMisconception";
2222
import {FormatColorReset} from "@material-ui/icons";
23-
import {highlightStyle} from "../../helpers/Util";
23+
import {highlightRangeToColor, highlightStyle} from "../../helpers/Util";
2424

2525
const {TAGGING_SERVICE_URL} = require('../../../config.json')
2626

@@ -90,17 +90,18 @@ function MisconceptionTagElement(
9090
const post_answer_url = TAGGING_SERVICE_URL + '/datasets/tagged-answer'
9191

9292
const [tags, setTags] = useState<(string | null)[]>([])
93-
const [ranges, setRanges] = useState<HighlightRange[]>([])
93+
const [ranges, setRanges] = useState<HighlightRangeColor[]>([])
9494

9595
const [currentColor, setCurrentColor] = useState<string>(NO_COLOR)
96+
const [currentMisconception, setCurrentMisconception] = useState<null | string>("")
97+
9698
const [startTaggingTime, setStartTaggingTime] = useState<number>(0)
9799

98100
const [loaded, setLoaded] = useState<boolean>(false)
99101

100102
const misconceptions_string_list: string[] = misconceptions_available.map<string>(misc => misc.name)
101103

102104

103-
104105
if (!loaded) {
105106
JSONLoader(get_selected_misc_url, (prev_tagged_answers: TaggedAnswer[]) => {
106107
// has existing value
@@ -114,7 +115,10 @@ function MisconceptionTagElement(
114115

115116

116117
setTags(previous_tags)
117-
setRanges(previousTaggedAnswer.highlighted_ranges == null ? [] : previousTaggedAnswer.highlighted_ranges)
118+
setRanges(previousTaggedAnswer.highlighted_ranges == null ? [] :
119+
previousTaggedAnswer.highlighted_ranges.map(range => {
120+
return {...range, color: highlightRangeToColor(range, misconceptions_available)}
121+
}))
118122
}
119123
else { // has never been tagged
120124
setTags([null])
@@ -175,7 +179,10 @@ function MisconceptionTagElement(
175179
if (tags[index] != null) removed_color = get_color(tags[index])
176180

177181
return [...ranges]
178-
.filter((elem: HighlightRange) => !stringEquals(elem.color, removed_color))
182+
.filter((elem: HighlightRange) => !stringEquals(
183+
highlightRangeToColor(elem, misconceptions_available),
184+
removed_color)
185+
)
179186
}
180187
return ranges
181188
}
@@ -209,15 +216,19 @@ function MisconceptionTagElement(
209216
enabled={enabled}
210217
onTextHighlighted={(e: any) => {
211218
if (using_default_color()) return
219+
if (currentMisconception == null) return
212220

213-
const newRange = {start: e.start, end: e.end, text: answer.data, color: currentColor}
221+
const newRange: HighlightRangeColor = {
222+
start: e.start, end: e.end, color: currentColor,
223+
misconception: currentMisconception
224+
}
214225
const r = rangesCompressor(ranges, newRange)
215226

216227
setRanges([...r])
217228
post_answer(r, tags)
218229
}}
219230
text={answer.data}
220-
highlightStyle={highlightStyle}
231+
highlightStyle={(range: HighlightRange) => highlightStyle(range, misconceptions_available)}
221232
/></StyledTableCell>
222233
<StyledTableCell>{
223234
enabled ?
@@ -241,7 +252,10 @@ function MisconceptionTagElement(
241252
color={get_color(tags[0])}
242253
enabled={enabled}
243254
current_color={currentColor}
244-
setColor={setCurrentColor}
255+
setColor={(color: string) => {
256+
setCurrentColor(color)
257+
setCurrentMisconception(tags[0])
258+
}}
245259
staticColor={false}
246260
/>
247261
<SingleTagSelector
@@ -282,7 +296,10 @@ function MisconceptionTagElement(
282296
color={(() => get_color(tags[handled_element]))()}
283297
enabled={enabled}
284298
current_color={currentColor}
285-
setColor={setCurrentColor}
299+
setColor={(color: string) => {
300+
setCurrentColor(color)
301+
setCurrentMisconception(tags[handled_element])
302+
}}
286303
staticColor={false}
287304
/>
288305
<SingleTagSelector

‎frontend/src/components/v2/TaggingUI.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
TaggingClusterSession, TaggingClusterSessionDispatch,
1616
} from "../../model/TaggingClusterSession";
1717
import {TaggingSession, TaggingSessionDispatch} from "../../model/TaggingSession";
18-
import {setClusters, setCurrentCluster} from "../../model/TaggingClusterSessionDispatch";
18+
import {setAvailableMisconceptions, setClusters, setCurrentCluster} from "../../model/TaggingClusterSessionDispatch";
1919
import ClusterHandler from "./cluster_handler_component/ClusterHandler";
2020

2121
const {TAGGING_SERVICE_URL} = require('../../../config.json')
@@ -87,6 +87,9 @@ function TaggingUI({taggingSession, dispatchTaggingSession, taggingClusterSessio
8787

8888
const {data, isLoading} = useFetch<MisconceptionElement[]>(get_available_url)
8989

90+
useEffect(() => {
91+
if (!isLoading) dispatchTaggingClusterSession(setAvailableMisconceptions(data))
92+
}, [isLoading, data])
9093

9194
if (isLoading || isLoadingClusters) return (<>Loading...</>)
9295

‎frontend/src/components/v2/tagger_component/ClusterView.tsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {useEffect} from "react"
22
import {Answer} from "../../../interfaces/Dataset";
33
import {rangesCompressor} from "../../../util/RangeCompressor";
4-
import {HighlightRange} from "../../../interfaces/HighlightRange";
4+
import {HighlightRange, HighlightRangeColor} from "../../../interfaces/HighlightRange";
55
import {Button, Paper} from "@material-ui/core";
66
import {GREY} from "../../../util/Colors"
77

@@ -11,7 +11,7 @@ import Highlightable from "highlightable";
1111
import {TaggedAnswer} from "../../../interfaces/TaggedAnswer";
1212
import {useFetch} from "../../../helpers/LoaderHelper";
1313
import {
14-
getCurrentCluster,
14+
getCurrentCluster, getCurrentMisconception,
1515
getRanges, isUsingDefaultColor,
1616
TaggingClusterSession,
1717
TaggingClusterSessionDispatch
@@ -83,17 +83,21 @@ function ClusterItem({answer, taggingClusterSession, dispatchTaggingClusterSessi
8383
}
8484
}, [isLoading, data])
8585

86-
const ranges: HighlightRange[] = getRanges(taggingClusterSession, answer)
86+
const ranges: HighlightRangeColor[] = getRanges(taggingClusterSession, answer)
8787

8888
const onTextHighlighted = (e: any) => {
8989
if (isUsingDefaultColor(taggingClusterSession)) return
90+
const misconception = getCurrentMisconception(taggingClusterSession)
91+
if (misconception == null) return
9092

91-
const newRange = {
93+
const newRange: HighlightRangeColor = {
9294
start: e.start,
9395
end: e.end,
94-
text: answer.data,
96+
misconception: misconception,
9597
color: taggingClusterSession.currentColor
9698
}
99+
100+
97101
const r = rangesCompressor(ranges, newRange)
98102

99103
dispatchTaggingClusterSession(setRanges(answer, [...r]))
@@ -120,7 +124,9 @@ function ClusterItem({answer, taggingClusterSession, dispatchTaggingClusterSessi
120124
enabled={true}
121125
onTextHighlighted={onTextHighlighted}
122126
text={answer.data}
123-
highlightStyle={highlightStyle}
127+
highlightStyle={(range: HighlightRange) =>
128+
highlightStyle(range, taggingClusterSession.availableMisconceptions)
129+
}
124130
style={{padding: 'inherit'}}
125131
/>
126132
<Button style={{marginLeft: 'auto'}} onClick={clear} title={'Clear highlighting'}>

‎frontend/src/helpers/Util.ts

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@ function highlightRangesColorUpdating(misconceptions_available: MisconceptionEle
2828
if (tags[index] != null) removed_color = getColor(misconceptions_available, tags[index])
2929

3030
return [...ranges]
31-
.filter((elem: HighlightRange) => !stringEquals(elem.color, removed_color))
31+
.filter((elem: HighlightRange) => !stringEquals(
32+
highlightRangeToColor(elem, misconceptions_available),
33+
removed_color)
34+
)
3235
}
3336
return ranges
3437
}
@@ -72,10 +75,16 @@ function pickTextColorBasedOnBgColorAdvanced(backgroundColor: string): string {
7275
return (L > 0.179) ? '#000000' : '#FFFFFF'
7376
}
7477

75-
function highlightStyle(range: HighlightRange) {
78+
function highlightRangeToColor(range: HighlightRange, availableMisconceptions: MisconceptionElement[]) {
79+
const index: number = availableMisconceptions.findIndex(elem => stringEquals(elem.name, range.misconception))
80+
return index == -1 ? NO_COLOR : availableMisconceptions[index].color
81+
}
82+
83+
function highlightStyle(range: HighlightRange, availableMisconceptions: MisconceptionElement[]) {
84+
const color: string = highlightRangeToColor(range, availableMisconceptions)
7685
return {
77-
color: pickTextColorBasedOnBgColorAdvanced(range.color),
78-
backgroundColor: range.color,
86+
color: pickTextColorBasedOnBgColorAdvanced(color),
87+
backgroundColor: color,
7988
}
8089
}
8190

@@ -87,5 +96,6 @@ export {
8796
highlightRangesColorUpdating,
8897
filteredMisconceptions,
8998
getColor,
90-
highlightStyle
99+
highlightStyle,
100+
highlightRangeToColor
91101
}

‎frontend/src/interfaces/HighlightRange.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
export interface HighlightRange {
22
start: number,
33
end: number,
4+
misconception: string
5+
}
6+
7+
export interface HighlightRangeColor extends HighlightRange {
48
color: string
59
}

‎frontend/src/model/TaggingClusterSession.ts

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import {getMillis, isNoMisconception, NO_COLOR} from "../helpers/Util";
2-
import {HighlightRange} from "../interfaces/HighlightRange";
1+
import {getMillis, highlightRangeToColor, isNoMisconception, NO_COLOR} from "../helpers/Util";
2+
import {HighlightRange, HighlightRangeColor} from "../interfaces/HighlightRange";
33
import {Answer} from "../interfaces/Dataset";
44
import {postHelper, postClusters} from "../helpers/PostHelper";
55
import {isUsingDefaultColor as isUsingDefaultColorUtil} from "../helpers/Util";
66
import stringEquals from "../util/StringEquals";
77
import {arrayFilteredNotNullEquals, arrayEquals} from "../util/ArrayEquals";
88
import NoMisconception from "../util/NoMisconception";
99
import {Dispatch, ReducerAction, ReducerState, useReducer} from "react";
10+
import {MisconceptionElement} from "../interfaces/MisconceptionElement";
1011

1112
const MAX_HISTORY_SIZE: number = 4
1213
export const PRE_DYNAMIC_SIZE: number = MAX_HISTORY_SIZE
1314
const MIN_LENGTH: number = 1 + PRE_DYNAMIC_SIZE + 1
1415

1516
export enum TaggingClusterSessionActions {
16-
INIT,
1717
SET_CURRENT_COLOR,
1818
SET_CURRENT_CLUSTER,
1919
SET_CLUSTERS,
@@ -23,7 +23,9 @@ export enum TaggingClusterSessionActions {
2323
SET_TAGS_AND_RANGES,
2424
NEXT_CLUSTER,
2525
POP_ANSWER,
26-
POST
26+
POST,
27+
INIT,
28+
SET_AVAILABLE_MISCONCEPTIONS
2729
}
2830

2931
export interface TaggingClusterSessionDispatch {
@@ -91,7 +93,8 @@ export interface TaggingClusterSession {
9193
tags: (string | null)[],
9294
rangesList: HighlightRange[][],
9395
startTaggingTime: number,
94-
history: string[]
96+
history: string[],
97+
availableMisconceptions: MisconceptionElement[]
9598
}
9699

97100

@@ -113,9 +116,10 @@ function init(state: TaggingClusterSession,
113116
clusters: [],
114117
currentCluster: 0,
115118
tags: [...initEmptyTagsList(), null],
116-
rangesList: [],
119+
rangesList: [...Array(PRE_DYNAMIC_SIZE + 1)].map(() => []),
117120
startTaggingTime: getMillis(),
118-
history: payload.history
121+
history: payload.history,
122+
availableMisconceptions: []
119123
}
120124
}
121125

@@ -198,10 +202,11 @@ function setTagsAndRanges(state: TaggingClusterSession,
198202
}
199203
}
200204

201-
function setClusters(state: TaggingClusterSession, clusters: Answer[][]): TaggingClusterSession {
205+
function setClusters(state: TaggingClusterSession, new_clusters: Answer[][]): TaggingClusterSession {
202206
return {
203207
...state,
204-
clusters: clusters,
208+
clusters: new_clusters,
209+
rangesList: [...Array(new_clusters[state.currentCluster].length)].map(() => []),
205210
startTaggingTime: getMillis(),
206211
}
207212
}
@@ -214,7 +219,7 @@ function nextCluster(state: TaggingClusterSession) {
214219
currentCluster: next_cluster_idx,
215220
currentColor: NO_COLOR,
216221
tags: [...initEmptyTagsList(), null],
217-
rangesList: [],
222+
rangesList: [...Array(state.clusters[next_cluster_idx].length)].map(() => []),
218223
startTaggingTime: getMillis(),
219224
}
220225
} else return state
@@ -229,13 +234,20 @@ function setCurrentCluster(state: TaggingClusterSession, idx: number) {
229234
currentCluster: idx,
230235
currentColor: NO_COLOR,
231236
tags: [...initEmptyTagsList(), null],
232-
rangesList: [],
237+
rangesList: [...Array(state.clusters[idx].length)].map(() => []),
233238
startTaggingTime: getMillis(),
234239
}
235240
}
236241
return state
237242
}
238243

244+
function setAvailableMisconceptions(state: TaggingClusterSession, misconceptions: MisconceptionElement[]) {
245+
return {
246+
...state,
247+
availableMisconceptions: misconceptions
248+
}
249+
}
250+
239251
function post(state: TaggingClusterSession): TaggingClusterSession {
240252
getCurrentCluster(state).forEach((answer, index) => {
241253
postHelper(
@@ -245,7 +257,13 @@ function post(state: TaggingClusterSession): TaggingClusterSession {
245257
state.user_id,
246258
answer.data,
247259
getMillis() - state.startTaggingTime,
248-
state.rangesList[index],
260+
state.rangesList[index].map(value => {
261+
return {
262+
start: value.start,
263+
end: value.end,
264+
misconception: value.misconception
265+
}
266+
}), // discard extra data
249267
state.tags)
250268
})
251269
return state
@@ -294,6 +312,8 @@ function reducer(state: TaggingClusterSession, action: TaggingClusterSessionDisp
294312
return nextCluster(state)
295313
case TaggingClusterSessionActions.POP_ANSWER:
296314
return pop_answer(state, action.payload)
315+
case TaggingClusterSessionActions.SET_AVAILABLE_MISCONCEPTIONS:
316+
return setAvailableMisconceptions(state, action.payload)
297317
case TaggingClusterSessionActions.INIT:
298318
return init(state, action.payload)
299319
default:
@@ -324,11 +344,16 @@ function useTaggingClusterSession(): [
324344
return [state, dispatch]
325345
}
326346

327-
export function getRanges(state: TaggingClusterSession, answer: Answer): HighlightRange[] {
347+
export function getRanges(state: TaggingClusterSession, answer: Answer): HighlightRangeColor[] {
328348
if (arrayEquals(getCurrentCluster(state), [])) return []
329349
const idx = getCurrentCluster(state).findIndex(ans => stringEquals(ans.answer_id, answer.answer_id))
330-
if (state.rangesList.length === 0) return []
331-
return state.rangesList[idx]
350+
if (state.rangesList.length === 0 || state.availableMisconceptions.length == 0) return []
351+
return state.rangesList[idx].map(elem => {
352+
return {
353+
...elem,
354+
color: highlightRangeToColor(elem, state.availableMisconceptions)
355+
}
356+
})
332357
}
333358

334359
export function getHistory(state: TaggingClusterSession): string[] {
@@ -345,4 +370,12 @@ export function getCurrentCluster(state: TaggingClusterSession): Answer[] {
345370
return state.clusters[state.currentCluster]
346371
}
347372

373+
export function getCurrentMisconception(state: TaggingClusterSession): (string | null) {
374+
return isUsingDefaultColor(state) || state.clusters.length == 0 ?
375+
null :
376+
state.availableMisconceptions[
377+
state.availableMisconceptions.findIndex(misc => stringEquals(misc.color, state.currentColor))
378+
].name
379+
}
380+
348381
export default useTaggingClusterSession

0 commit comments

Comments
 (0)