Auto zoom all images on hover.

src/App.css

@@ -1,22 +1,13 @@
+html, body, #root {
+  background-color: #000;
+  color: #fff;
+  height: 100%;
+}
+
 .App {
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #09d3ac;
+.frame {
+  display: inline-block;
 }

src/App.js

@@ -1,26 +1,106 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+const ROOT = process.env.PUBLIC_URL + '/tracer/';
+const DATA_URL = ROOT + 'data.json';
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: null,
+      isFetching: false,
+      isZoomed: false,
+      zoomFactor: 16,
+      x: 0,
+      y: 0,
+    };
+  }
+  componentDidMount() {
+    this.fetchTracerData()
+    this.timer = setInterval(() => this.fetchTracerData(), 1000);
+  }
+  componentWillUnmount() {
+    this.timer = null;
+  }
+  fetchTracerData() {
+    this.setState({...this.state, isFetching: true})
+    fetch(DATA_URL)
+      .then(response => response.json())
+      .then(result => this.setState({data: result, isFetching: false}))
+      .catch(e => console.log(e));
+  }
+  render() {
+    let imgs = [];
+    let {
+      data,
+      isZoomed,
+      x,
+      y,
+      zoomFactor,
+    } = this.state;
+    if (data !== null) {
+      let {ratio, timestamp, images, size} = data;
+      console.log('size', size);
+      let width = 512;
+      let height = (ratio * width).toFixed();
+      const mouseEnter = (e) => {
+        console.log('mouseEnter');
+        this.setState({isZoomed: true});
+      };
+      const mouseLeave = (e) => {
+        console.log('mouseLeave');
+        this.setState({isZoomed: false});
+      };
+      const mouseMove = (e) => {
+        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 * size[0] + 'px ' + zoomFactor * size[1] + 'px' : 'contain',
+        backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center',
+      };
+      console.log('isZoomed', isZoomed);
+      imgs = images.map((name) => {
+        let url = ROOT + name + '?t=' + timestamp;
+        return (
+          <div key={name}
+            onMouseMove={mouseMove}
+            onMouseEnter={mouseEnter}
+            onMouseLeave={mouseLeave}
+            className="frame"
+             style={{backgroundImage: 'url("' + url + '")', ...style}}>
+        </div>)
+      });
+    }
+    return (
+      <div>
+        <div className="controls">
+          <label>
+            Zoom:
+            <input
+              id="zoom"
+              type="range"
+              min="1" max="64"
+              value={zoomFactor}
+              onChange={(e) => this.setState({
+                zoomFactor: e.target.value
+              })}
+              step="1"/>
+          </label>
+          {zoomFactor}
+        </div>
+        <div className="App">
+            {imgs}
+        </div>
+      </div>
+    );
+  }
 }
 
 export default App;