refactor to use app-rooted js imports

1 files changed, 71 insertions, 0 deletions

diff --git a/frontend/app/common/miscellaneous.component.js b/frontend/app/common/miscellaneous.component.js
new file mode 100644
index 0000000..bf2c266
--- /dev/null
+++ b/frontend/app/common/miscellaneous.component.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { clamp, percent } from 'app/utils'
+
+export const Swatch = ({ color }) => (
+  <div
+    className='swatch'
+    style={{ backgroundColor: color ? 'rgb(' + color.join(',') + ')' : 'transparent' }}
+  />
+)
+
+export const Dot = ({ color }) => (
+  <div
+    className='dot'
+    style={{ backgroundColor: color }}
+  />
+)
+
+export const Columns = ({ count, margin, width, object, children, className }) => {
+  if (!object || !object.length) object = children
+  if (!object || !object.length) return null
+  margin = margin || 380
+  width = width || 250
+  count = count || Math.floor((window.innerWidth - margin) / width)
+  let columns = []
+  let len = object.length
+  let j = 0
+  for (let i = 0; i < count; i++) {
+    let column_len = len * (i + 1) / count
+    let column = []
+    for (; j < column_len; j++) {
+      column.push(<div key={j}>{object[j]}</div>)
+    }
+    columns.push(<div key={"col_" + i + "_" + j} className='column' style={{ width }}>{column}</div>)
+    if (j >= len) break
+  }
+  return (
+    <div className={'row columnCells ' + className}>
+      {columns}
+    </div>
+  )
+}
+
+export const Statistic = ({ name, value, link }) => (
+  <div className='statistic row'>
+    <div className='title'>{link ? <Link to={link}>{name}</Link> : name}</div>
+    <div className='int'>{value}</div>
+  </div>
+)
+
+export const Detections = ({ detections, labels }) => (
+  (detections || []).map(({ label, rect }, i) => (
+    <div
+    className='rect'
+      key={i}
+      style={{
+        left: percent(clamp(rect.x1)),
+        width: percent(clamp(rect.x2 - rect.x1, 0, Math.min(1.0, 1.0 - rect.x1))),
+        top: percent(clamp(rect.y1)),
+        height: percent(clamp(rect.y2 - rect.y1, 0, Math.min(1.0, 1.0 - rect.y1))),
+      }}>
+      {labels && <span>{label.replace(/_/g, ' ')}</span>}
+    </div>
+  )
+))
+
+export const Progress = ({ current, total }) => (
+  <div className='progress'>
+    <div className='bar' style={{ width: Math.round(100 * current / total) + '%' }} />
+  </div>
+)