Merge pull request #101 from LuCEresearchlab/keyboard-controls

Keyboard controls

Author: malags

frontend/src/components/diff_component/AnswersMerger.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import {Grid} from "@material-ui/core";
-import {useFetch} from "../../helpers/LoaderHelper";
 import {TaggedAnswer} from "../../interfaces/TaggedAnswer";
 import MisconceptionTagComparer from "./MisconceptionTagComparer";
 import {MisconceptionElement} from "../../interfaces/MisconceptionElement";
 import stringEquals from "../../util/StringEquals";
+import {useFetch} from "../../hooks/useFetch";
 
 
 const {TAGGING_SERVICE_URL} = require('../../../config.json')

frontend/src/components/tagger_component/MisconceptionInfoButton.tsx

@@ -1,9 +1,10 @@
-import React, {useState} from "react"
+import React, {useRef, useState} from "react"
 import HelpIcon from "@material-ui/icons/Help";
 import {Button, Popover} from "@material-ui/core";
 import {createStyles, makeStyles} from "@material-ui/core/styles";
 import stringEquals from "../../util/StringEquals";
 import NoMisconception from "../../util/NoMisconception";
+import withKeyboard from "../../hooks/withKeyboard";
 
 const useStyles = makeStyles(() =>
     createStyles({
@@ -16,12 +17,14 @@ const useStyles = makeStyles(() =>
 interface Input {
     handled_element: number,
     tags: (string | null)[],
+    keyboardIndex?: string
 }
 
-function MisconceptionInfoButton({tags, handled_element}: Input){
-
+function MisconceptionInfoButton({tags, handled_element, keyboardIndex}: Input) {
     const classes = useStyles()
 
+    const ref = useRef<HTMLButtonElement>(null)
+
     const tag: (string | null) = tags[handled_element]
 
     const should_display = () => {
@@ -43,14 +46,20 @@ function MisconceptionInfoButton({tags, handled_element}: Input){
     const id = open ? "simple-popover" : undefined;
     // end popup stuff
 
+    withKeyboard((command => {
+        if (keyboardIndex != undefined && (command == '' + keyboardIndex + 'h')) {
+            ref.current?.click()
+        }
+    }))
+
     return (
         !should_display() ?
             <>
                 <Button disabled={true} className={classes.root}>
                 </Button>
             </> :
             <>
-                <Button title={"Definition"} onClick={handle_click_popup} className={classes.root}>
+                <Button title={"Definition"} ref={ref} onClick={handle_click_popup} className={classes.root}>
                     <HelpIcon/>
                 </Button>
                 <Popover

frontend/src/components/v2/TaggingUI.tsx

@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from "react";
 import {Grid, Paper, Tab} from "@material-ui/core";
-import {useFetch} from "../../helpers/LoaderHelper";
 import {StyledPagination} from "../styled/StyledPagination";
 import {createStyles, makeStyles} from "@material-ui/core/styles";
 import {TabContext, TabList, TabPanel} from "@material-ui/lab";
@@ -10,13 +9,20 @@ import TagView from "./tagger_component/TagView";
 import ClusterView from "./tagger_component/ClusterView";
 
 import {LIGHT_GREY} from "../../util/Colors"
-import {setCurrentQuestion} from "../../model/TaggingSessionDispatch";
+import {nextQuestion, setCurrentQuestion} from "../../model/TaggingSessionDispatch";
 import {
     TaggingClusterSession, TaggingClusterSessionDispatch,
 } from "../../model/TaggingClusterSession";
 import {TaggingSession, TaggingSessionDispatch} from "../../model/TaggingSession";
-import {setAvailableMisconceptions, setClusters, setCurrentCluster} from "../../model/TaggingClusterSessionDispatch";
+import {
+    nextCluster,
+    setAvailableMisconceptions,
+    setClusters,
+    setCurrentCluster
+} from "../../model/TaggingClusterSessionDispatch";
 import ClusterHandler from "./cluster_handler_component/ClusterHandler";
+import withKeyboard from "../../hooks/withKeyboard";
+import {useFetch} from "../../hooks/useFetch";
 
 const {TAGGING_SERVICE_URL} = require('../../../config.json')
 
@@ -60,6 +66,37 @@ function TaggingUI({taggingSession, dispatchTaggingSession, taggingClusterSessio
     const [tab, setTab] = useState<string>('1')
 
 
+    const total_clusters = taggingClusterSession.clusters.length
+
+    const [keyHistory] = withKeyboard((command: string) => {
+        if (command == '') // two spaces or enter in a row
+        {
+            const current_cluster = taggingClusterSession.currentCluster
+            if (current_cluster + 1 < total_clusters) {
+                dispatchTaggingClusterSession(nextCluster())
+                setPage(page + 1)  // offset of 1
+            } else {
+                dispatchTaggingSession(nextQuestion())
+                dispatchTaggingClusterSession(setCurrentCluster(0))
+                setPage(1)
+            }
+        }
+        if (command == 'c') setTab(tab == '1' ? '2' : '1')
+        if (command == 'b') {
+            const current_cluster = taggingClusterSession.currentCluster
+            if (current_cluster - 1 >= 0) {
+                dispatchTaggingClusterSession(setCurrentCluster(current_cluster - 1))
+                setPage(page - 1)
+            } else {
+                const previousQuestion = taggingSession.currentQuestion == 0 ? 0 : taggingSession.currentQuestion - 1
+                dispatchTaggingSession(setCurrentQuestion(previousQuestion))
+                dispatchTaggingClusterSession(setCurrentCluster(0))
+                setPage(1)
+            }
+        }
+    })
+
+
     const paginationChange = (event: any, value: number) => {
         dispatchTaggingClusterSession(setCurrentCluster(value - 1))
         setPage(value);
@@ -79,8 +116,6 @@ function TaggingUI({taggingSession, dispatchTaggingSession, taggingClusterSessio
     const isLoadingClusters = clusterFetch.isLoading
 
 
-    const total_clusters = taggingClusterSession.clusters.length
-
     useEffect(() => {
         if (!isLoadingClusters) dispatchTaggingClusterSession(setClusters(clustersData.clusters))
     }, [clustersData, isLoadingClusters])
@@ -157,9 +192,17 @@ function TaggingUI({taggingSession, dispatchTaggingSession, taggingClusterSessio
                         />
                     </TabPanel>
                 </TabContext>
+                <div>
+                    {
+                        keyHistory == '' ?
+                            'space: next cluster, c: cluster view / tagging view' :
+                            'command: ' + keyHistory
+                    }
+                </div>
             </Grid>
         </Grid>
     )
+
 }
 
 export default TaggingUI

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

@@ -9,7 +9,6 @@ import {GREY} from "../../../util/Colors"
 import Highlightable from "highlightable";
 
 import {TaggedAnswer} from "../../../interfaces/TaggedAnswer";
-import {useFetch} from "../../../helpers/LoaderHelper";
 import {
     getCurrentCluster, getCurrentMisconception,
     getRanges, isUsingDefaultColor,
@@ -20,7 +19,10 @@ 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";
+import {highlightStyle, nthIndex} from "../../../helpers/Util";
+import {useFetch} from "../../../hooks/useFetch";
+import withKeyboard from "../../../hooks/withKeyboard";
+import stringEquals from "../../../util/StringEquals";
 
 const {TAGGING_SERVICE_URL} = require('../../../../config.json')
 
@@ -29,10 +31,11 @@ interface Input {
     dispatchTaggingClusterSession: React.Dispatch<TaggingClusterSessionDispatch>
 }
 
+const regExp = new RegExp(/^[1-9]h[1-9](:?-[1-9]\d*)?$/)
+
 function ClusterView({taggingClusterSession, dispatchTaggingClusterSession}: Input) {
 
     const currentCluster: Cluster = getCurrentCluster(taggingClusterSession)
-    // TODO: use name field
 
     return (
         <div>
@@ -110,10 +113,58 @@ function ClusterItem({answer, taggingClusterSession, dispatchTaggingClusterSessi
     }
 
     const clear = () => {
-        dispatchTaggingClusterSession(setRanges(answer, []))
+        if (isUsingDefaultColor(taggingClusterSession)) dispatchTaggingClusterSession(setRanges(answer, []))
+        else {
+            dispatchTaggingClusterSession(setRanges(answer,
+                ranges.filter(range => !stringEquals(range.color, taggingClusterSession.currentColor))
+            ))
+        }
+
         dispatchTaggingClusterSession(clusterSessionPost())
     }
 
+
+    withKeyboard((command: string) => {
+        if (command.startsWith("" + displayKey) && regExp.test(command)) {
+            if (command.indexOf('-') == -1) {
+                const from: number = parseInt(command.slice(2)) - 1
+
+                if (isNaN(from)) return
+
+                let relative_start = nthIndex(answer.data, ' ', from)
+                relative_start = relative_start == -1 ? 0 : relative_start
+
+                let relative_end = nthIndex(answer.data, ' ', from + 1)
+                relative_end = relative_end == -1 ? answer.data.length : relative_end - 1
+
+                onTextHighlighted({
+                    start: relative_start,
+                    end: relative_end
+                })
+            } else {
+                const split_index: number = command.indexOf('-')
+                const from: number = parseInt(command.slice(2, split_index)) - 1
+                const to: number = parseInt(command.slice(split_index + 1))
+
+                if (isNaN(from) || isNaN(to)) return
+
+                let relative_start = nthIndex(answer.data, ' ', from)
+                relative_start = relative_start == -1 ? 0 : relative_start
+
+                let relative_end = nthIndex(answer.data, ' ', to)
+                relative_end = relative_end == -1 ? answer.data.length : relative_end - 1
+
+                onTextHighlighted({
+                    start: relative_start,
+                    end: relative_end
+                })
+            }
+        }
+        if (command == "" + displayKey + 'rc') {
+            clear()
+        }
+    })
+
     if (isLoading) return <div>Loading...</div>
 
 

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

@@ -3,7 +3,7 @@ import SingleTagSelector from "./SingleTagSelector";
 import {
     filteredMisconceptions,
     getColor,
-    highlightRangesColorUpdating
+    highlightRangesColorUpdating, NO_COLOR
 } from "../../../helpers/Util";
 import {MisconceptionElement} from "../../../interfaces/MisconceptionElement";
 import {
@@ -23,6 +23,7 @@ import {
 import MisconceptionColorButton from "../../tagger_component/MisconceptionColorButton";
 import MisconceptionInfoButton from "../../tagger_component/MisconceptionInfoButton";
 import MisconceptionNoteButton from "../../tagger_component/MisconceptionNoteButton";
+import stringEquals from "../../../util/StringEquals";
 
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -75,7 +76,12 @@ function MisconceptionView(
     const tags = taggingClusterSession.tags
 
 
-    const set_current_color = (color: string) => dispatchTaggingClusterSession(setCurrentColor(color))
+    const set_current_color = (color: string) => {
+        if (stringEquals(taggingClusterSession.currentColor, color))
+            dispatchTaggingClusterSession(setCurrentColor(NO_COLOR))
+        else
+            dispatchTaggingClusterSession(setCurrentColor(color))
+    }
 
 
     const getNewRangesList = (element: (string | null), index: number) => {
@@ -106,7 +112,7 @@ function MisconceptionView(
         <div className={classes.root}>
             <>
                 <div className={classes.divLine}>
-                    <KeyIndication displayKey={"1"}/>
+                    <KeyIndication displayKey={"t" + 1}/>
                     <MisconceptionColorButton
                         color={getColor(misconceptionsAvailable, tags[FIRST_DYNAMIC_INDEX])}
                         current_color={currentColor}
@@ -116,6 +122,7 @@ function MisconceptionView(
                     />
                     <SingleTagSelector
                         key={"tag-selector-0"}
+                        taggingClusterSession={taggingClusterSession}
                         misconceptions_available={
                             filteredMisconceptions(tags, misconceptions_string_list, FIRST_DYNAMIC_INDEX)
                         }
@@ -136,7 +143,7 @@ function MisconceptionView(
                             const handled_element = PRE_DYNAMIC_SIZE + index + 2 // +2 = NoMisc and default add above
                             return (
                                 <div key={"tag-selector-" + handled_element} className={classes.divLine}>
-                                    <KeyIndication displayKey={"" + (handled_element - PRE_DYNAMIC_SIZE)}/>
+                                    <KeyIndication displayKey={"t" + (handled_element - PRE_DYNAMIC_SIZE)}/>
                                     <MisconceptionColorButton
                                         color={(() => getColor(misconceptionsAvailable, tags[handled_element]))()}
                                         current_color={currentColor}
@@ -145,14 +152,15 @@ function MisconceptionView(
                                         staticColor={true}
                                     />
                                     <SingleTagSelector
-                                            misconceptions_available={
-                                                filteredMisconceptions(tags, misconceptions_string_list, handled_element)
-                                            }
-                                            handled_element={handled_element}
-                                            tags={tags}
-                                            setTagElement={setTagElementHandle}
-                                            enabled={true}
-                                        />
+                                        taggingClusterSession={taggingClusterSession}
+                                        misconceptions_available={
+                                            filteredMisconceptions(tags, misconceptions_string_list, handled_element)
+                                        }
+                                        handled_element={handled_element}
+                                        tags={tags}
+                                        setTagElement={setTagElementHandle}
+                                        enabled={true}
+                                    />
                                     <MisconceptionInfoButton
                                         tags={tags}
                                         handled_element={handled_element}