Merge pull request #105 from LuCEresearchlab/tagging-view-cluster-name

Tagging view cluster name

Author: malags

frontend/src/components/v2/TaggingUI.tsx

@@ -169,13 +169,13 @@ function TaggingUI({taggingSession, dispatchTaggingSession, taggingClusterSessio
                         <Grid container direction={'row'} className={classes.taggingMiscBlock} spacing={2}
                               component={Paper}
                               style={{backgroundColor: LIGHT_GREY}}>
-                            <Grid item xs={6}>
+                            <Grid item xs={8}>
                                 <ClusterView
                                     taggingClusterSession={taggingClusterSession}
                                     dispatchTaggingClusterSession={dispatchTaggingClusterSession}
                                 />
                             </Grid>
-                            <Grid item xs={6}>
+                            <Grid item xs={4}>
                                 <TagView
                                     misconceptionsAvailable={data}
                                     taggingClusterSession={taggingClusterSession}

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

@@ -2,7 +2,7 @@ import React, {useEffect} from "react"
 import {Answer, Cluster} from "../../../interfaces/Dataset";
 import {rangesCompressor} from "../../../util/RangeCompressor";
 import {HighlightRange, HighlightRangeColor} from "../../../interfaces/HighlightRange";
-import {Button, Paper} from "@material-ui/core";
+import {Button, Paper, TextField} from "@material-ui/core";
 import {GREY} from "../../../util/Colors"
 
 // @ts-ignore
@@ -16,13 +16,19 @@ import {
     TaggingClusterSessionDispatch
 } from "../../../model/TaggingClusterSession";
 import KeyIndication from "./KeyIndication";
-import {clusterSessionPost, setRanges, setTagsAndRanges} from "../../../model/TaggingClusterSessionDispatch";
+import {
+    clusterSessionPost,
+    setClusters,
+    setRanges,
+    setTagsAndRanges
+} from "../../../model/TaggingClusterSessionDispatch";
 import TruthCircle from "../../tagger_component/TruthCircle";
 import {FormatColorReset} from "@material-ui/icons";
 import {highlightStyle, nthIndex} from "../../../helpers/Util";
 import {useFetch} from "../../../hooks/useFetch";
 import withKeyboard from "../../../hooks/withKeyboard";
 import stringEquals from "../../../util/StringEquals";
+import {postClusters} from "../../../helpers/PostHelper";
 
 const {TAGGING_SERVICE_URL} = require('../../../../config.json')
 
@@ -39,6 +45,19 @@ function ClusterView({taggingClusterSession, dispatchTaggingClusterSession}: Inp
 
     return (
         <div>
+            <TextField value={currentCluster.name}
+                       InputProps={{disableUnderline: true}}
+                       onChange={(e) => {
+                           const clusters = taggingClusterSession.clusters
+                           clusters[taggingClusterSession.currentCluster].name = e.target.value
+                           postClusters(
+                               taggingClusterSession.dataset_id,
+                               taggingClusterSession.question_id,
+                               taggingClusterSession.user_id,
+                               [...clusters]
+                           )
+                           dispatchTaggingClusterSession(setClusters([...clusters]))
+                       }}/>
             {
                 currentCluster
                     .answers
@@ -170,8 +189,8 @@ function ClusterItem({answer, taggingClusterSession, dispatchTaggingClusterSessi
 
     return (
         <Paper style={{
-            padding: '1em', backgroundColor: GREY, display: 'flex', flexDirection: 'row',
-            marginBottom: '2em'
+            padding: '0.5em', backgroundColor: GREY, display: 'flex', flexDirection: 'row',
+            marginBottom: '1em'
         }}>
             <KeyIndication displayKey={"" + displayKey}/>
             <TruthCircle value={answer.picked}/>

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

@@ -22,7 +22,6 @@ import {
 } from "../../../model/TaggingClusterSessionDispatch";
 import MisconceptionColorButton from "../../tagger_component/MisconceptionColorButton";
 import MisconceptionInfoButton from "../../tagger_component/MisconceptionInfoButton";
-import MisconceptionNoteButton from "../../tagger_component/MisconceptionNoteButton";
 import stringEquals from "../../../util/StringEquals";
 
 
@@ -35,7 +34,7 @@ const useStyles = makeStyles((theme: Theme) =>
         },
         divLine: {
             display: "inline-flex",
-            width: '100%'
+            width: '100%',
         }
     }),
 );
@@ -135,7 +134,6 @@ function MisconceptionView(
                         tags={tags}
                         handled_element={FIRST_DYNAMIC_INDEX}
                     />
-                    <MisconceptionNoteButton/>
                 </div>
                 {
                     [...Array(Math.max(tags.length - PRE_DYNAMIC_SIZE - 2, 0))]
@@ -165,7 +163,6 @@ function MisconceptionView(
                                         tags={tags}
                                         handled_element={handled_element}
                                     />
-                                    <MisconceptionNoteButton/>
                                 </div>)
                             }
                         )

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

@@ -26,7 +26,7 @@ function TagView({misconceptionsAvailable, taggingClusterSession, dispatchTaggin
     )
 
     return (
-        <Paper style={{padding: '1em', backgroundColor: GREY}}>
+        <Paper style={{padding: '1em', backgroundColor: GREY, marginTop: '2em', paddingTop: 0}}>
             <Table>
                 <TableBody>
                     <TableRow>