Display Wordcloud table and unique responses labels

src/Admin.tsx

@@ -99,6 +99,7 @@ type AdminState = {
     shape: paper.Item,
     label: paper.TextItem
   },
+  showWordCloud: boolean
 };
 
 const mkPathLabel = (pathName: string, path: paper.Path) => {
@@ -160,6 +161,7 @@ class Admin extends React.Component<{}, AdminState> {
       path: undefined,
       selectedArea: undefined,
       focusedDrawResponse: undefined,
+      showWordCloud: false
     };
   }
 
@@ -199,6 +201,7 @@ class Admin extends React.Component<{}, AdminState> {
       });
       this.setState({
         selectedArea: items || [],
+        wordCloud: this.mkWords(items)
       })
     }
   }
@@ -461,6 +464,12 @@ class Admin extends React.Component<{}, AdminState> {
     }
   }
 
+  getUniqueResponses = (data: paper.Item[]) => {
+    return data.reduce<number[]>((uniq, item) => {
+      return uniq.includes(item.data.id) ? uniq : [...uniq, item.data.id]
+    }, [])
+  }
+
   render() {
     return (
       <div className="App Admin">
@@ -480,7 +489,7 @@ class Admin extends React.Component<{}, AdminState> {
             <div className="vom-admin-canvas-container">
               <canvas id="vom-admin-canvas"></canvas>
               {
-                this.state.path && this.state.selectedArea ? (
+                this.state.path && this.state.selectedArea && this.state.showWordCloud ? (
                   <div className="vom-word-cloud"
                     style={{
                       width: this.state.path.bounds.width,
@@ -518,21 +527,14 @@ class Admin extends React.Component<{}, AdminState> {
                     <>
                       <p className="vom-results-table-actions">drawings in area: 
                         <Badge color="info">{this.state.selectedArea.length}</Badge>
+                        <Badge color="info">unique responses: {this.getUniqueResponses(this.state.selectedArea).length}</Badge>
                         <Badge color="warning" href="#" onClick={() => this.clearDrawing() }>clear drawing</Badge>
                         <Badge color="success" href="#" onClick={() => this.downloadResultsData() }>download results</Badge>
                         <Badge color="primary" href="#" onClick={() => {
-                          if (this.state.wordCloud.length !== 0) {
-                            this.setState({
-                              wordCloud: []
-                            })
-                          } else {
-                            if(this.state.selectedArea) {
-                              this.setState({
-                                wordCloud: this.mkWords(this.state.selectedArea)
-                              })
-                            }
-                          }
-                        } }>toggle wordcloud</Badge>
+                          this.setState({
+                            showWordCloud: !this.state.showWordCloud
+                          });
+                        } }>{this.state.showWordCloud ? 'hide' : 'show'} word cloud</Badge>
                       </p>
                       <DrawingsTable
                         items={this.state.selectedArea}
@@ -555,7 +557,7 @@ class Admin extends React.Component<{}, AdminState> {
             {
               this.state.selectedArea ? (
                 <>
-                  { this.state.wordCloud.length ? (
+                  { this.state.showWordCloud && this.state.wordCloud.length ? (
                     <Table bordered className="vom-wordcloud-repetition">
                       <thead>
                         <tr>