Merge pull request #84 from LuCEresearchlab/usability-fixes

Usability fixes

Author: malags

frontend/src/components/tagger_component/MisconceptionTagElement.tsx

@@ -20,6 +20,7 @@ import stringEquals from "../../util/StringEquals";
 import TruthCircle from "./TruthCircle";
 import NoMisconception from "../../util/NoMisconception";
 import {FormatColorReset} from "@material-ui/icons";
+import {highlightStyle} from "../../helpers/Util";
 
 const {TAGGING_SERVICE_URL} = require('../../../config.json')
 
@@ -216,12 +217,7 @@ function MisconceptionTagElement(
                         post_answer(r, tags)
                     }}
                     text={answer.data}
-                    highlightStyle={(range: HighlightRange) => {
-                        return {
-                            backgroundColor: range.color + "C8",
-                        }
-                    }
-                    }
+                    highlightStyle={highlightStyle}
                 /></StyledTableCell>
             <StyledTableCell>{
                 enabled ?

frontend/src/components/v2/cluster_handler_component/ClusterHandler.tsx

@@ -256,7 +256,7 @@ function ClusterHandler({taggingSession, taggingClusterSession, dispatchTaggingC
 
     return (
         <Container>
-            <div>
+            <div style={{marginLeft: '2em'}}>
                 <TextField id={'search_filter'} type={'text'} value={state.query} onChange={
                     (e) => {
                         e.preventDefault()
@@ -266,7 +266,7 @@ function ClusterHandler({taggingSession, taggingClusterSession, dispatchTaggingC
                             }
                         )
                     }
-                } label={"Filter"}/>
+                } label={"Search"}/>
                 <Button style={{height: 48, width: 48}} onClick={(e) => {
                     e.preventDefault()
                     setState({

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

@@ -20,6 +20,7 @@ import KeyIndication from "./KeyIndication";
 import {clusterSessionPost, setRanges, setTagsAndRanges} from "../../../model/TaggingClusterSessionDispatch";
 import TruthCircle from "../../tagger_component/TruthCircle";
 import {FormatColorReset} from "@material-ui/icons";
+import {highlightStyle} from "../../../helpers/Util";
 
 const {TAGGING_SERVICE_URL} = require('../../../../config.json')
 
@@ -99,12 +100,6 @@ function ClusterItem({answer, taggingClusterSession, dispatchTaggingClusterSessi
         dispatchTaggingClusterSession(clusterSessionPost())
     }
 
-    const highlightStyle = (range: HighlightRange) => {
-        return {
-            backgroundColor: range.color + "C8",
-        }
-    }
-
     const clear = () => {
         dispatchTaggingClusterSession(setRanges(answer, []))
         dispatchTaggingClusterSession(clusterSessionPost())

frontend/src/helpers/Util.ts

@@ -56,12 +56,36 @@ function getColor(misconceptions_available: MisconceptionElement[], misc: (strin
     return found ? found.color : ""
 }
 
+function pickTextColorBasedOnBgColorAdvanced(backgroundColor: string): string {
+    const color = backgroundColor.substring(1, 7)
+    const r = parseInt(color.substring(0, 2), 16); // hexToR
+    const g = parseInt(color.substring(2, 4), 16); // hexToG
+    const b = parseInt(color.substring(4, 6), 16); // hexToB
+    const uicolors = [r / 255, g / 255, b / 255];
+    const c = uicolors.map((col: number) => {
+        if (col <= 0.03928) {
+            return col / 12.92;
+        }
+        return Math.pow((col + 0.055) / 1.055, 2.4)
+    })
+    const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2])
+    return (L > 0.179) ? '#000000' : '#FFFFFF'
+}
+
+function highlightStyle(range: HighlightRange) {
+    return {
+        color: pickTextColorBasedOnBgColorAdvanced(range.color),
+        backgroundColor: range.color,
+    }
+}
+
 export {
     NO_COLOR,
     isUsingDefaultColor,
     isNoMisconception,
     getMillis,
     highlightRangesColorUpdating,
     filteredMisconceptions,
-    getColor
+    getColor,
+    highlightStyle
 }