GUI updates and styles

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "electron/app/player51"]
+	path = electron/app/player51
+	url = git@github.com:voxel51/player51.git

electron/app/Routes.tsx

@@ -13,9 +13,9 @@ export default function Routes() {
       <Switch>
         <Route path={routes.LOADING} exact component={Loading} />
         <Route path={routes.SETUP} exact component={Setup} />
-        <Route path={routes.DATASET} exact component={Dataset} />
-        <Route path={routes.LIST} exact component={Dataset} />
-        <Route path={routes.CHARTS} exact component={Dataset} />
+        <Route path={routes.SAMPLES} exact component={Dataset} />
+        <Route path={routes.FIELDS} exact component={Dataset} />
+        <Route path={routes.DATASET} component={Dataset} />
       </Switch>
     </App>
   );

electron/app/app.global.css

@@ -2,13 +2,11 @@
  * @NOTE: Prepend a `~` to css file paths that are in your node_modules
  *        See https://github.com/webpack-contrib/sass-loader#imports
  */
-@import "~semantic-ui-css/semantic.min.css";
+@import "./player51/src/css/player51.css";
 
 body {
   position: relative;
-  color: black;
   height: 100vh;
-  background-color: white;
 }
 
 #root {
@@ -22,3 +20,48 @@ body {
 .search > .ui.input {
   width: 100%;
 }
+
+.sample {
+  position: relative;
+}
+
+.sample-info {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  display: block;
+  z-index: 100;
+  overflow-y: hidden;
+}
+
+.sample:hover > .sample-info {
+  top: 100%;
+  height: auto;
+}
+
+.sample-info > .menu {
+  background: hsla(210, 20%, 23%, 0.6) !important;
+}
+
+.sample-info > .menu > .item {
+  white-space: nowrap;
+  overflow-x: hidden;
+}
+
+.sample:not(:hover) .sample-info > .menu > .item:before {
+  background: none !important;
+}
+
+.sample:hover > .sample-info > .menu > .item {
+  overflow-x: auto;
+}
+
+.sample:hover > .sample-info {
+  background: hsla(210, 20%, 23%, 1);
+  z-index: 101;
+}
+
+.hide-info .sample:not(:hover) .sample-info {
+  display: none !important;
+}

electron/app/components/Labels.tsx → electron/app/components/Fields.tsx

@@ -8,7 +8,7 @@ import connect from "../utils/connect";
 
 class CustomizedAxisTick extends PureComponent {
   render() {
-    const { x, y, stroke, payload } = this.props;
+    const { x, y, stroke, payload, fill } = this.props;
 
     return (
       <g transform={`translate(${x},${y})`}>
@@ -17,7 +17,7 @@ class CustomizedAxisTick extends PureComponent {
           y={0}
           dy={16}
           textAnchor="end"
-          fill="#666"
+          fill={fill}
           transform="rotate(-80)"
         >
           {payload.value}
@@ -31,14 +31,16 @@ const Histogram = connect(({ data, name }) => {
   const barWidth = 30;
   const [rightMargin, setRightMargin] = useState(0);
   const container = useRef(null);
+  const stroke = "hsl(210, 20%, 90%)";
+  const fill = stroke;
 
   return (
     <Segment style={{ overflowY: "auto" }}>
       <Header as="h3">{name}</Header>
       <BarChart
         ref={container}
         height={500}
-        width={data.length * (barWidth + 20)}
+        width={data.length * (barWidth + 20 + 36.5)}
         barCategoryGap={"20px"}
         data={data}
         margin={{ top: 0, left: 0, bottom: 0, right: rightMargin + 5 }}
@@ -47,11 +49,17 @@ const Histogram = connect(({ data, name }) => {
           dataKey="label"
           type="category"
           interval={0}
-          height={150}
+          height={100}
           axisLine={false}
-          tick={<CustomizedAxisTick />}
+          tick={<CustomizedAxisTick {...{ fill }} />}
+          tickLine={{ stroke }}
+        />
+        <YAxis
+          dataKey="count"
+          axisLine={false}
+          tick={{ fill }}
+          tickLine={{ stroke }}
         />
-        <YAxis dataKey="count" axisLine={false} />
         <Bar dataKey="count" fill="rgb(255, 109, 4)" barSize={barWidth} />
       </BarChart>
     </Segment>
@@ -60,14 +68,13 @@ const Histogram = connect(({ data, name }) => {
 
 const Charts = (props) => {
   const { state, port } = props;
-  const hasDataset = Boolean(state && state.dataset);
   const socket = getSocket(port, "state");
   const [initialLoad, setInitialLoad] = useState(true);
   const [loading, setLoading] = useState(true);
   const [data, setData] = useState([]);
 
   const getData = () => {
-    socket.emit("get_label_distributions", "", (data) => {
+    socket.emit("get_field_distributions", "", (data) => {
       setInitialLoad(false);
       setLoading(false);
       setData(data);
@@ -86,10 +93,11 @@ const Charts = (props) => {
   if (loading) {
     return <Loader />;
   }
+
   return (
     <>
-      {data.map((chart) => {
-        return <Histogram data={chart.labels} name={chart._id} />;
+      {data.map((chart, i) => {
+        return <Histogram key={i} data={chart.labels} name={chart._id} />;
       })}
     </>
   );

electron/app/components/InfoItem.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Menu } from "semantic-ui-react";
+
+export default ({ k, v }) => (
+  <Menu.Item as="span">
+    {k} &middot; <code>{v}</code>
+  </Menu.Item>
+);

electron/app/components/LocalInstructions.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Header, Divider } from "semantic-ui-react";
+
+import CodeBlock from "./CodeBlock";
+import pySnippet from "../snippets/local.py";
+
+export default () => (
+  <>
+    <Header as="h3">Local sessions</Header>
+    <Divider />
+    <p>
+      The following demonstrates how to connect to a local session from a python
+      shell.
+    </p>
+    <CodeBlock language="python">{pySnippet}</CodeBlock>
+  </>
+);

electron/app/components/Player51.tsx

@@ -0,0 +1,81 @@
+import _ from "lodash";
+import React, { useState, useEffect } from "react";
+import Player51 from "../player51/build/cjs/player51.min.js";
+
+import clickHandler from "../utils/click.ts";
+
+const PARSERS = {
+  Classification: [
+    "attrs",
+    (name, obj) => {
+      return {
+        type: "eta.core.data.CategoricalAttribute",
+        name: name,
+        confidence: obj.confidence,
+        value: obj.label,
+      };
+    },
+  ],
+  Detection: [
+    "objects",
+    (g, obj) => {
+      const bb = obj.bounding_box;
+      return {
+        type: "eta.core.objects.DetectedObject",
+        label: `${g}:${obj.label}`,
+        confidence: obj.confidence,
+        bounding_box: {
+          top_left: { x: bb[0], y: bb[1] },
+          bottom_right: { x: bb[0] + bb[2], y: bb[1] + bb[3] },
+        },
+      };
+    },
+  ],
+};
+
+const loadOverlay = (sample) => {
+  const imgLabels = { attrs: { attrs: [] }, objects: { objects: [] } };
+  for (const i in sample) {
+    if (_.indexOf(["metadata", "_id", "tags", "filepath"], i) >= 0) {
+      continue;
+    }
+    const field = sample[i];
+    if (field._cls === "Detections") {
+      for (const j in field.detections) {
+        const detection = field.detections[j];
+        const [key, fn] = PARSERS[detection._cls];
+        imgLabels[key][key].push(fn(i, detection));
+      }
+      continue;
+    }
+    const [key, fn] = PARSERS[field._cls];
+    imgLabels[key][key].push(fn(i, field));
+  }
+  return imgLabels;
+};
+
+export default ({ thumbnail, sample, src, style, onClick, onDoubleClick }) => {
+  const overlay = loadOverlay(sample);
+  const id = sample._id.$oid;
+
+  const [handleClick, handleDoubleClick] = clickHandler(onClick, onDoubleClick);
+  const [player, setPlayer] = useState(
+    new Player51({
+      media: {
+        src: src,
+        type: "image/jpg",
+      },
+      overlay: overlay,
+    })
+  );
+  const props = thumbnail
+    ? { onClick: handleClick, onDoubleClick: handleDoubleClick }
+    : {};
+  useEffect(() => {
+    if (thumbnail) {
+      player.thumbnailMode();
+    }
+    player.render(id);
+  }, []);
+  return <div id={id} style={style} {...props} />;
+};

electron/app/components/PortForm.tsx

@@ -4,7 +4,6 @@ import { Input, Label } from "semantic-ui-react";
 
 import connect from "../utils/connect";
 import { getSocket, useSubscribe } from "../utils/socket";
-import CodeBlock from "./CodeBlock";
 
 export default connect(({ connected, port, setResult }) => {
   const [initialState, setInitialState] = useState({ port, connected });

electron/app/components/RemoteInstructions.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Header, Divider } from "semantic-ui-react";
+
+import CodeBlock from "./CodeBlock";
+import bashSnippet from "../snippets/remote.bash";
+import pySnippet from "../snippets/remote.py";
+
+export default () => (
+  <>
+    <Header as="h3">Remote sessions</Header>
+    <Divider />
+    <p>
+      If you would like to connect to a remote session, you'll have to configure
+      port forwarding on your local machine.
+    </p>
+    <Header as="h4">On your remote machine</Header>
+    <Divider />
+    <CodeBlock language="python">{pySnippet}</CodeBlock>
+    <Header as="h4">On your local machine</Header>
+    <Divider />
+    <CodeBlock language="bash">{bashSnippet}</CodeBlock>
+
+    <Header as="h4">Port configuration</Header>
+    <Divider />
+    <p>
+      The default FiftyOne port is <code>5151</code>. You can configure at
+      anytime using the settings tab.
+    </p>
+  </>
+);

electron/app/components/Sample.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from "react";
+import { Menu } from "semantic-ui-react";
+
+import { updateState } from "../actions/update";
+import InfoItem from "./InfoItem";
+import Player51 from "./Player51";
+import { getSocket } from "../utils/socket";
+import connect from "../utils/connect";
+
+const Sample = ({ dispatch, sample, port, setSelected, selected, setView }) => {
+  const host = `http://127.0.0.1:${port}`;
+  const src = `${host}?path=${sample.filepath}`;
+  const socket = getSocket(port, "state");
+  const id = sample._id.$oid;
+  const s = sample;
+
+  const handleClick = () => {
+    const newSelected = { ...selected };
+    const event = newSelected[id] ? "remove_selection" : "add_selection";
+    newSelected[id] = newSelected[id] ? false : true;
+    setSelected(newSelected);
+    socket.emit(event, id, (data) => {
+      dispatch(updateState(data));
+    });
+  };
+
+  return (
+    <div
+      className="sample"
+      style={{
+        marginTop: selected[id] ? 0 : "2px",
+        border: selected[id] ? "2px solid rgb(255, 109, 4)" : "none",
+      }}
+    >
+      <Player51
+        src={src}
+        style={{
+          width: "100%",
+          position: "relative",
+        }}
+        sample={sample}
+        onClick={() => handleClick()}
+        onDoubleClick={() => setView({ visible: true, sample })}
+        thumbnail={true}
+      />
+      <div className="sample-info">
+        <Menu vertical style={{ width: "100%", height: "100%" }}>
+          <InfoItem k="id" v={s._id.$oid} />
+          <InfoItem k="filepath" v={s.filepath} />
+          <InfoItem k="tags" v={JSON.stringify(s.tags, 2)} />
+          <InfoItem k="metadata" v={JSON.stringify(s.metadata, 2)} />
+          {Object.keys(s).map((k, i) => {
+            if (s[k] && s[k]._cls === "Classification") {
+              return <InfoItem key={i} k={k} v={s[k].label} />;
+            } else if (s[k] && s[k]._cls === "Detections") {
+              const l = s[k].detections.length;
+              return (
+                <InfoItem
+                  key={i}
+                  k={k}
+                  v={`${l} detection${l === 1 ? "" : "s"}`}
+                />
+              );
+            }
+          })}
+        </Menu>
+      </div>
+    </div>
+  );
+};
+
+export default connect(Sample);