package.json

@@ -8,8 +8,7 @@
     "react": "^16.10.2",
     "react-bulma-components": "3.1.3",
     "react-dom": "^16.10.2",
-    "react-scripts": "3.2.0",
-    "transformation-matrix": "^2.1.1"
+    "react-scripts": "3.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -13,6 +13,14 @@
   text-align: center;
 }
 
+.title {
+  color: #fff;
+}
+
+.subtitle {
+  color: #aaa;
+}
+
 .value {
   text-align: center;
   border: 1px solid #888;

src/App.js

@@ -3,9 +3,7 @@ import moment from 'moment';
 import './App.css';
 import {
   Columns,
-  Footer,
   Heading,
-  Table,
 } from 'react-bulma-components';
 
 
@@ -15,7 +13,7 @@ const MAX_ZOOM_FACTOR = 32;
 
 const Sidebar = (props) => {
   let {
-    renderTimeSeconds, binary, binaryMax, scene, imageMetadata, zoomFactor, mouseX, mouseY,
+    binary, binaryMax, imageMetadata, zoomFactor, x, y,
     onZoom,
   } = props;
   let samples = imageMetadata.map((md) => {
@@ -23,9 +21,13 @@ const Sidebar = (props) => {
     if (pix === undefined) { return <p key={md.name}>Loading...</p>; }
     let max = binaryMax[md.name];
     let [w, h] = md.size;
-    let xOff = mouseX; // Math.min(w, Math.max(0, Math.round(x*w)));
-    let yOff = mouseY; // Math.min(h, Math.max(0, Math.round(y*h)));
+    let xOff = Math.min(w, Math.max(0, Math.round(x*w)));
+    let yOff = Math.min(h, Math.max(0, Math.round(y*h)));
     let v = pix[xOff+yOff*w];
+    if (v === undefined) {
+      console.log(`${x} ${y} ${w} ${h} ${xOff} ${yOff} ${v} ${pix.length}`);
+      return <p key={md.name}>Loading...</p>;
+    }
     let color = "#fff";
     let rgb = "";
     let value = "";
@@ -33,53 +35,23 @@ const Sidebar = (props) => {
       let r = Math.round(v[0]*255);
       let g = Math.round(v[1]*255);
       let b = Math.round(v[2]*255);
-      value = `${r}, ${g}, ${b}`;
-      rgb = `rgb(${value})`;
+      rgb = `rgb(${r}, ${g}, ${b})`;
       color = `rgb(${255^r}, ${255^g}, ${255^b})`;
+      value = rgb;
     } else {
       let c = 255*v/max;
       rgb = `rgb(${c}, ${c}, ${c})`;
       color = `rgb(${255^c}, ${255^c}, ${255^c})`;
       value = v;
     }
-    return <li className="sample" key={md.name}>
+    return <div className="sample" key={md.name}>
       <p>{md.name}</p>
       <p className="value" style={{
         color,
         backgroundColor: rgb,
       }}>{value}</p>
-    </li>
+    </div>
   });
-  let sceneInfo = <ul className="menu-list">
-    <Table>
-      <tbody>
-        <tr>
-          <td>render time</td>
-          <td>{renderTimeSeconds}s</td>
-        </tr>
-        <tr>
-          <td>subsamples</td>
-          <td>{scene.subsamples || "default"}</td>
-        </tr>
-        <tr>
-          <td>adaptive subsampling</td>
-          <td>{scene.adaptiveSubsampling || "default"}</td>
-        </tr>
-        <tr>
-          <td>numThreads</td>
-          <td>{scene.numThreads || "default"}</td>
-        </tr>
-        <tr>
-          <td>width</td>
-          <td>{scene.width}</td>
-        </tr>
-        <tr>
-          <td>height</td>
-          <td>{scene.height}</td>
-        </tr>
-      </tbody>
-    </Table>
-  </ul>;
   return <aside className="menu">
     <p className="menu-label">
       Controls
@@ -100,17 +72,10 @@ const Sidebar = (props) => {
     <p className="menu-label">
       Samples
     </p>
-    <ul className="menu-list">
-      {samples}
-    </ul>
-    <p className="menu-label">
-      Scene
-    </p>
-    {sceneInfo}
+    {samples}
   </aside>;
 }
 
-const ELEMENT_WIDTH = 384;
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -120,13 +85,10 @@ class App extends React.Component {
       binaryMax: {},
       isFetching: false,
       isFrozen: false,
-      isMouseDown: false,
-      isZoomed: true,
+      isZoomed: false,
       zoomFactor: 4,
-      mouseX: 0,
-      mouseY: 0,
-      offsetX: -1.5*ELEMENT_WIDTH,
-      offsetY: -1.5*ELEMENT_WIDTH,
+      x: 0,
+      y: 0,
     };
   }
   componentDidMount() {
@@ -139,6 +101,7 @@ class App extends React.Component {
   fetchTracerData() {
     this.setState({...this.state, isFetching: true})
     const max = (acc, cur) => Math.max(acc, cur);
+    // console.log(array1.reduce(max));
     fetch(DATA_URL)
       .then(response => response.json())
       .then(result => {
@@ -154,6 +117,7 @@ class App extends React.Component {
                 let curBinary = this.state.binary;
                 let curBinaryMax = this.state.binaryMax;
                 let binaryMax = result.reduce(max);
+                console.log(`${md.name} ${binaryMax}`);
                 this.setState({
                   binary: {
                     [md.name]: result,
@@ -180,110 +144,73 @@ class App extends React.Component {
       binaryMax,
       data,
       isFrozen,
-      isMouseDown,
       isZoomed,
-      mouseX,
-      mouseY,
-      offsetX,
-      offsetY,
+      x,
+      y,
       zoomFactor,
     } = this.state;
     let mainContent = <h1>Loading</h1>;
     let sidebarContent = <h1>Loading</h1>;
     if (data !== null) {
-      let {timestamp, renderTimeSeconds, imageMetadata, scene} = data;
+      let {timestamp, imageMetadata} = data;
+      const mouseClick = (e) => {
+        console.log('isFrozen', isFrozen, 'this.state.isFrozen', this.state.isFrozen);
+        this.setState({isFrozen: !this.state.isFrozen});
+      };
       const mouseEnter = (e) => {
         if (isFrozen) {
           return;
         }
         this.setState({isZoomed: true});
       };
+      const mouseScroll = (e) => {
+        let delta = parseFloat(-e.deltaY/100.0);
+        let zoomFactor = delta + this.state.zoomFactor;
+        if (zoomFactor < 1) { zoomFactor = 1; }
+        if (zoomFactor > MAX_ZOOM_FACTOR) {
+          zoomFactor = MAX_ZOOM_FACTOR;
+        }
+        this.setState({
+          zoomFactor: zoomFactor,
+          isZoomed: true
+        });
+      };
       const mouseLeave = (e) => {
-        this.setState({isMouseDown: false});
+        if (isFrozen) {
+          return;
+        }
+        this.setState({isZoomed: false});
       };
       const onZoom = (e) => this.setState({
           zoomFactor: Number(e.target.value)
       });
 
       images = imageMetadata.map((metadata) => {
-        let {name, ratio, image, size} = metadata;
-        let width = ELEMENT_WIDTH;
+        let {name, ratio, image} = metadata;
+        let width = 384;
         let height = (ratio * width).toFixed();
         let url = ROOT + image + '?t=' + timestamp;
-
-        const clamp = (offsetX, offsetY) => {
-          let minX = width - width * zoomFactor;
-          let minY = height - height * zoomFactor;
-          let maxX = 0;//width * zoomFactor - width;
-          let maxY = 0;//height * zoomFactor - height;
-          offsetX = Math.max(minX, Math.min(maxX, offsetX));
-          offsetY = Math.max(minY, Math.min(maxY, offsetY));
-          this.setState({offsetX, offsetY});
-        };
-
-        const pointerDown = (e) => {
-          // TODO(wathiede): figure out how to grab a ref and
-          // setPointerCapture on that.
-          //this.setPointerCapture(e.pointerId);
-          this.setState({isMouseDown: true});
-        };
-
-        const pointerUp = (e) => {
-          // TODO(wathiede): figure out how to grab a ref and
-          // releasePointerCapture on that.
-          //this.releasePointerCapture(e.pointerId);
-          this.setState({isMouseDown: false});
-        };
-
-        const pointerMove = (e) => {
-          if (isMouseDown) {
-            offsetX += e.movementX;
-            offsetY += e.movementY;
-            clamp(offsetX, offsetY);
-
-          } else {
-            let rect = e.currentTarget.getBoundingClientRect();
-            let screenX = e.clientX - rect.left;
-            let screenY = e.clientY - rect.top;
-            let viewW = size[0] / zoomFactor;
-            let viewH = size[1] / zoomFactor;
-            let xOff = (-offsetX*size[0])/(zoomFactor * width) + (screenX / width) * viewW;
-            let yOff = (-offsetY*size[1])/(zoomFactor * height) + (screenY / height) * viewH;
-            this.setState({mouseX: Math.round(xOff), mouseY: Math.round(yOff)});
+        const mouseMove = (e) => {
+          if (isFrozen) {
+            return;
           }
-          e.preventDefault();
-        };
-
-        const mouseScroll = (e) => {
-          let localOffsetX = this.state.offsetX;
-          let localOffsetY = this.state.offsetY;
-          let delta = parseFloat(-e.deltaY/100.0);
-          let zoomFactor = delta + this.state.zoomFactor;
-          if (zoomFactor < 1) { zoomFactor = 1; }
-          if (zoomFactor > MAX_ZOOM_FACTOR) {
-            zoomFactor = MAX_ZOOM_FACTOR;
-          }
-          this.setState({
-            zoomFactor: zoomFactor,
-            isZoomed: true
-          });
-
-          clamp(offsetX, offsetY);
+          let rect = e.currentTarget.getBoundingClientRect();
+          let x = e.clientX - rect.left;
+          let y = e.clientY - rect.top;
+          this.setState({x: x/width, y: y/height});
         };
         let style = {
           width: width + 'px',
           height: height + 'px',
           imageRendering: isZoomed ? 'pixelated' : 'auto',
           backgroundSize: isZoomed ? zoomFactor * width + 'px ' + zoomFactor * height + 'px' : 'contain',
-          backgroundPosition: isZoomed ? offsetX + 'px ' + offsetY + 'px' : 'center center',
+          backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center',
         };
-        console.log('offset', offsetX, offsetY);
         return (
           <div key={name}
-            onPointerDown={pointerDown}
-            onPointerUp={pointerUp}
-            onPointerMove={pointerMove}
-            //onMouseEnter={mouseEnter}
+            onClick={mouseClick}
+            onMouseMove={mouseMove}
+            onMouseEnter={mouseEnter}
             onMouseLeave={mouseLeave}
             onWheel={mouseScroll}
             className="frame"
@@ -303,19 +230,16 @@ class App extends React.Component {
       </div>;
 
       sidebarContent = <Sidebar
-        scene={scene}
-        renderTimeSeconds={renderTimeSeconds}
         imageMetadata={imageMetadata}
         zoomFactor={zoomFactor}
-        mouseX={mouseX}
-        mouseY={mouseY}
+        x={x} y={y}
         binary={binary}
         binaryMax={binaryMax}
         onZoom={onZoom} />;
     }
     return (
       <Columns>
-        <Columns.Column size="one-quarter">
+        <Columns.Column size="one-fifth">
           {sidebarContent}
         </Columns.Column>
         <Columns.Column>

src/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'react-bulma-components/dist/react-bulma-components.min.css';
-import './bulmaswatch.min.css';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';

yarn.lock

@@ -8268,10 +8268,6 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-transformation-matrix@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/transformation-matrix/-/transformation-matrix-2.1.1.tgz#50c1cf4049ac9a2c778eda62bb404e158723657d"
-
 ts-pnp@1.1.4, ts-pnp@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.4.tgz#ae27126960ebaefb874c6d7fa4729729ab200d90"