Add a real entity frequency graph

package.json

@@ -32,6 +32,7 @@
     "react-dom": "^16.0.0",
     "react-redux": "^5.1.0",
     "react-router-dom": "^4.3.1",
+    "recharts": "^1.5.0",
     "request": "^2.88.0",
     "request-promise": "^4.2.2",
     "sequelize": "^4.38.1",

src/client/components/App.js

@@ -19,31 +19,36 @@ class App extends React.Component {
       startTime: moment().subtract(4, 'hours').toISOString(),
       recentStartTime: moment().subtract(1, 'hour').toISOString(),
       endTime: moment().toISOString(),
+      ticks: 4,
     },
   }
 
   setIntervalScope = (key) => {
     const endTime = moment().toISOString()
+    let ticks = 0
     let startTime = ''
     let recentStartTime = ''
     switch (key) {
       case 'pastweek':
+        ticks = 7
         startTime = moment(endTime).subtract(1, 'week').toISOString()
         recentStartTime = moment(endTime).subtract(1, 'day').toISOString()
         break
       case 'past24hours':
+        ticks = 24
         startTime = moment(endTime).subtract(24, 'hours').toISOString()
         recentStartTime = moment(endTime).subtract(4, 'hours').toISOString()
         break
       case 'past4hours':
       default:
+        ticks = 4
         startTime = moment(endTime).subtract(4, 'hours').toISOString()
         recentStartTime = moment(endTime).subtract(1, 'hour').toISOString()
         break
     }
 
     const intervalScope = {
-      key, startTime, recentStartTime, endTime,
+      key, startTime, recentStartTime, endTime, ticks,
     }
     this.setState({ intervalScope })
   }

src/client/components/Dashboard.js

@@ -8,7 +8,7 @@ import moment from 'moment'
 
 import LiveTranscript from './Transcripts/LiveTranscript'
 import EntityFrequencyTable from './EntityFrequency/Table'
-import graph from '../images/fake-graph.jpg'
+import EntityFrequencyGraph from './EntityFrequency/Graph'
 
 const ALL_ENTITIES_QUERY = gql`
   query ALL_ENTITIES_QUERY(
@@ -47,6 +47,7 @@ class Dashboard extends React.Component {
       startTime: PropTypes.string,
       recentStartTime: PropTypes.string,
       endTime: PropTypes.string,
+      ticks: PropTypes.number,
     }).isRequired,
   }
 
@@ -76,42 +77,77 @@ class Dashboard extends React.Component {
               return <p>{error.message}</p>
             }
 
-            const recentStartTime = moment(intervalScope.recentStartTime)
-            const aggregatedData = data.namedEntities
-              .filter(namedEntity => ['PERSON', 'ORG'].includes(namedEntity.type))
-              .reduce((accumulator, currentValue) => {
-                if (!(currentValue.entity in accumulator)) {
-                  accumulator[currentValue.entity] = {
-                    total: 0,
-                    recent: 0,
-                  }
-                }
-                accumulator[currentValue.entity].total += 1
-                if (moment(parseInt(currentValue.createdAt, 10)).isSameOrAfter(recentStartTime)) {
-                  accumulator[currentValue.entity].recent += 1
+            const startTime = moment(intervalScope.startTime)
+            const recentStartTime = moment(intervalScope.recentStartTime).valueOf()
+            const endTime = moment(intervalScope.endTime)
+            const tickLength = endTime.diff(startTime) / intervalScope.ticks
+
+            const filteredData = data.namedEntities.filter(namedEntity => ['PERSON', 'ORG'].includes(namedEntity.type))
+
+            const aggregatedData = filteredData.reduce((accumulator, currentValue) => {
+              if (!(currentValue.entity in accumulator)) {
+                accumulator[currentValue.entity] = {
+                  total: 0,
+                  recent: 0,
+                  ticks: Array(intervalScope.ticks).fill(0),
                 }
-                return accumulator
-              }, {})
+              }
+              // Increase total
+              accumulator[currentValue.entity].total += 1
+
+              const createdAt = parseInt(currentValue.createdAt, 10)
+
+              // Increase recent
+              if (createdAt >= recentStartTime) {
+                accumulator[currentValue.entity].recent += 1
+              }
+
+              // Increase current tick bucket
+              const startToTimestamp = createdAt - startTime
+              const tick = Math.floor(startToTimestamp / tickLength)
+              accumulator[currentValue.entity].ticks[tick] += 1
+
+              return accumulator
+            }, {})
 
-            const frequencyTotals = Object.keys(aggregatedData).map(key => ({
+            const frequencyTableData = Object.keys(aggregatedData).map(key => ({
               label: key,
               total: aggregatedData[key].total,
               recent: aggregatedData[key].recent,
             })).sort((a, b) => (b.total - a.total))
 
+            const frequencyGraphData = Object.keys(aggregatedData)
+              .filter(entityName => (aggregatedData[entityName].total > 2))
+              .reduce((accumulator, entityName) => {
+                accumulator.forEach((tick, i) => {
+                  if (!(entityName in Object.keys(tick))) {
+                    accumulator[i][entityName] = 0
+                  }
+                  accumulator[i][entityName] += aggregatedData[entityName].ticks[i]
+                })
+                return accumulator
+              }, Array(intervalScope.ticks).fill({}).map((tick, i) => ({ name: `tick${i}` })))
+
             return (
               <>
                 <StyledEntityFrequencyTableWrapper>
                   <EntityFrequencyTable
-                    data={frequencyTotals}
+                    data={frequencyTableData}
                     activeEntity={activeEntity}
                     highlightedEntity={highlightedEntity}
                     setActiveEntity={setActiveEntity}
                     setHighlightedEntity={setHighlightedEntity}
                   />
                 </StyledEntityFrequencyTableWrapper>
                 <StyledEntityFrequencyGraphWrapper>
-                  <img alt="Graph" src={graph} width="686" height="772" />
+                  <EntityFrequencyGraph
+                    data={frequencyGraphData}
+                    tickInterval={intervalScope.key === 'pastweek' ? 'Day' : 'Hour'}
+                    activeEntity={activeEntity}
+                    highlightedEntity={highlightedEntity}
+                    setActiveEntity={setActiveEntity}
+                    setHighlightedEntity={setHighlightedEntity}
+                  />
                 </StyledEntityFrequencyGraphWrapper>
               </>
             )
@@ -145,31 +181,31 @@ const StyledEntityFrequencyTableWrapper = styled.div`
   grid-area: entity-list;
   position: relative;
   overflow: hidden;
-  padding: 1rem;
-  max-width: 300px;
-  border-bottom: 3px solid red;
+  padding-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 `
 
 const StyledEntityFrequencyGraphWrapper = styled.div`
   grid-area: entity-graph;
   position: relative;
   overflow: hidden;
-  padding: 1rem;
-  border-bottom: 3px solid yellow;
-  img {
-    width: 100%;
-    height: auto;
-    max-height: 100%
+  padding-top: 1rem;
+  padding-left: 1rem;
+  padding-bottom: 1rem;
+
+  .recharts-line {
+    cursor: pointer;
   }
 `
 
 const StyledTranscriptAreaWrapper = styled.div`
   grid-area: transcripts;
   position: relative;
   overflow: hidden;
-  padding: 1rem;
-  max-width: 500px;
-  border-bottom: 3px solid green;
+  padding-top: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 1rem;
 `
 
 export default Dashboard

src/client/components/EntityFrequency/ColumnHeader.js

@@ -29,11 +29,11 @@ const StyledColumnHeader = styled.th`
   > button {
     text-transform: capitalize;
     appearance: none;
-    font-size: 1rem;
-    line-height: 1rem;
+    font-size: 1em;
+    line-height: 1em;
     font-weight: 600;
     font-family: inherit;
-    padding: 0.15rem 0;
+    padding: 0.15em 0;
     margin: 0;
     border: none;
     border-bottom: 1px solid #2F80ED;

src/client/components/EntityFrequency/Graph.js

@@ -1 +1,84 @@
-// Will describe the line graph of entity frequency.
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  ResponsiveContainer, XAxis, YAxis, CartesianGrid, LineChart, Line,
+} from 'recharts'
+import styled from 'styled-components'
+
+const StyledEntityFrequencyGraphCaption = styled.div`
+  position: absolute;
+  display: inline-block;
+  top: 0.4rem;
+  left: 50%;
+  margin-left: -110px;
+  text-align: right;
+  padding: 0.25rem 0.5rem;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 0.8);
+  font-weight: 600;
+  z-index: 100;
+`
+
+const EntityFrequencyGraph = (props) => {
+  const {
+    data,
+    tickInterval,
+    activeEntity,
+    highlightedEntity,
+    setActiveEntity,
+    // setHighlightedEntity,
+  } = props
+
+  const entityNames = Object.keys(data[0]).filter(k => (k !== 'name'))
+
+  return (
+    <>
+      <StyledEntityFrequencyGraphCaption>
+        <span>Appearances Per </span>
+        {tickInterval}
+      </StyledEntityFrequencyGraphCaption>
+      <ResponsiveContainer debounce={200}>
+        <LineChart
+          data={data}
+          margin={{
+            top: 5, right: 5, bottom: 5, left: 5,
+          }}
+        >
+          <CartesianGrid vertical={false} stroke="#ddd" strokeWidth={1} strokeDasharray="3 3" />
+          <YAxis orientation="right" axisLine={false} tickLine={false} />
+          <XAxis hide axisLine={false} interval={0} padding={{ left: 10, right: 10 }} />
+          {entityNames.map((entityName) => {
+            const activated = [activeEntity, highlightedEntity].includes(entityName)
+            // Defining the function here inside the loop seems very much like an anti-pattern.
+            // However, I can't yet solve how to have the function aware of its `entityName`.
+            // Probably will involve a class that extends `Line` and adds to its props or something.
+            const activate = () => (setActiveEntity((entityName === activeEntity) ? '' : entityName))
+            return (
+              <Line
+                dataKey={entityName}
+                key={entityName}
+                onClick={activate}
+                dot={activated}
+                stroke={activated ? '#f15a58' : '#ccc'}
+                strokeWidth={2}
+                type="monotone"
+                isAnimationActive={false}
+              />
+            )
+          })}
+        </LineChart>
+      </ResponsiveContainer>
+    </>
+  )
+}
+
+EntityFrequencyGraph.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  tickInterval: PropTypes.string.isRequired,
+  activeEntity: PropTypes.string.isRequired,
+  highlightedEntity: PropTypes.string.isRequired,
+  setActiveEntity: PropTypes.func.isRequired,
+  // setHighlightedEntity: PropTypes.func.isRequired,
+}
+
+export default EntityFrequencyGraph

src/client/components/EntityFrequency/Row.js

@@ -55,8 +55,8 @@ const EntityFrequencyRow = (props) => {
       onClick={selectEntity}
       onFocus={highlightEntity}
       onBlur={unhighlightEntity}
-      onMouseEnter={highlightEntity}
-      onMouseLeave={unhighlightEntity}
+      // onMouseEnter={highlightEntity}
+      // onMouseLeave={unhighlightEntity}
       className={rowClassName()}
     >
       <td className="label">{entity.label}</td>
@@ -83,22 +83,25 @@ EntityFrequencyRow.propTypes = {
 }
 
 const StyledEntityFrequencyRow = styled.tr`
-  &.active > td,
   &:hover > td {
     cursor: pointer;
-    color: white;
-    background-color: #eb5757;
+    background-color: #fcd6d5;
   }
 
   &.active {
     -webkit-position: sticky;
     position: sticky;
     top: 0;
     bottom: 0;
+    > td {
+      cursor: pointer;
+      color: white;
+      background-color: #f15a58;
+    }
   }
 
   .recent {
-    background-color: #fefaee;
+    background-color: #fff9ea;
   }
 
   .zero {

src/client/index.html

@@ -10,20 +10,16 @@
         box-sizing: border-box;
       }
 
-      html,body {
-        overflow: hidden;
-        padding: 0;
-        margin: 0;
-      }
-
       body {
-        font: normal 1rem/1.3 'Source Sans Pro', sans-serif;
+        font: normal 0.9rem/1.4 'Source Sans Pro', sans-serif;
         background-color: white;
         color: black;
-        padding: 1rem;
+        margin: 0;
+        padding: 0;
       }
 
       #mainframe {
+        min-width: 960px;
         display: grid;
         position: absolute;
         left: 0;
@@ -33,15 +29,22 @@
         width: 100%;
         height: 100%;
         overflow: hidden;
-        grid-template-columns: auto 1fr auto;
+        grid-template-columns: 300px 1fr 35%;
         grid-template-rows: auto 1fr;
         grid-template-areas: 
           "header header header"
           "entity-list entity-graph transcripts";
       }
+
       b, strong, h1, h2, h3, h4, h5, h6 {
         font-weight: 600;
       }
+
+      @media (max-width: 1200px) {
+        #mainframe {
+          grid-template-columns: 250px 1fr 30%;
+        }
+      }
     </style>
   </head>
   <body>