1 files changed, 99 insertions, 0 deletions
diff --git a/scraper/client/common/classifier.component.js b/scraper/client/common/classifier.component.js
new file mode 100644
index 00000000..af6a4934
--- /dev/null
+++ b/scraper/client/common/classifier.component.js
@@ -0,0 +1,99 @@
+import React, { Component } from 'react'
+import { courtesyS } from '../util'
+
+import { TableTuples, DetectionList, Keyframe } from '.'
+
+export default class Classifier extends Component {
+  render() {
+    const {
+      tag,
+      sha256,
+      verified,
+      keyframes = {},
+      labels,
+      summary,
+      aspectRatio = 1.777,
+      showAll,
+    } = this.props
+    let totalDetections = 0
+    const keys = Object
+      .keys(keyframes)
+      .map(s => parseInt(s, 10))
+    const validKeyframes = keys
+      .sort((a, b) => a - b)
+      .map(frame => {
+        const detections = keyframes[frame]
+        if (detections.length || showAll) {
+          totalDetections += detections.length
+          return { frame, detections }
+        }
+        return null
+      })
+      .filter(f => !!f)
+    const detectionLookup = validKeyframes
+      .reduce((a, b) => {
+        b.detections.reduce((aa, { idx }) => {
+          if (!(idx in aa)) aa[idx] = [labels[idx], 0]
+          aa[idx][1] += 1
+          return aa
+        }, a)
+        return a
+      }, {})
+    const detectionCounts = Object.keys(detectionLookup)
+      .map(idx => detectionLookup[idx])
+      .sort((a, b) => b[1] - a[1])
+
+    if (summary) {
+      return (
+        <div>
+          <h3>{tag}{' Detections'}</h3>
+          <TableTuples
+            list={detectionCounts}
+          />
+        </div>
+      )
+    }
+    return (
+      <div>
+        <h2>{tag}</h2>
+        <h3>Detections</h3>
+        <TableTuples
+          list={detectionCounts}
+        />
+        <h3>Frames</h3>
+        <ul className='meta'>
+          <li>
+            {'Displaying '}{validKeyframes.length}{' / '}{courtesyS(keys.length, 'frame')}
+          </li>
+          <li>
+            {courtesyS(totalDetections, 'detection')}{' found'}
+          </li>
+        </ul>
+        <div className='thumbnails'>
+          {validKeyframes.map(({ frame, detections }) => (
+            <Keyframe
+              key={frame}
+              sha256={sha256}
+              frame={frame}
+              verified={verified}
+              size='th'
+              showFrame
+              showTimestamp
+              aspectRatio={aspectRatio}
+              detectionList={[
+                { labels, detections }
+              ]}
+            >
+              <DetectionList
+                labels={labels}
+                detections={detections}
+                width={160}
+                height={90}
+              />
+            </Keyframe>
+          ))}
+        </div>
+      </div>
+    )
+  }
+}