Skip to content

Commit 6831a89

Browse files
author
Stefano Malagò
committed
Reworked how HighlightRange.ts works to allow for updates in the list on progmiscon and changes in color without breaking existing data
1 parent 082184c commit 6831a89

File tree

11 files changed

+126
-48
lines changed

11 files changed

+126
-48
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)