Use XOR for font coloring. Scale greyscale color swatch correctly.

src/App.js

@@ -12,10 +12,14 @@ const DATA_URL = ROOT + 'data.json';
 const MAX_ZOOM_FACTOR = 32;
 
 const Sidebar = (props) => {
-  let {binary, imageMetadata, zoomFactor, x, y, onZoom} = props;
+  let {
+    binary, binaryMax, imageMetadata, zoomFactor, x, y,
+    onZoom,
+  } = props;
   let samples = imageMetadata.map((md) => {
     let pix = binary[md.name];
     if (pix === undefined) { return <p key={md.name}>Loading...</p>; }
+    let max = binaryMax[md.name];
     let [w, h] = md.size;
     let xOff = Math.min(w, Math.max(0, Math.round(x*w)));
     let yOff = Math.min(h, Math.max(0, Math.round(y*h)));
@@ -24,6 +28,7 @@ const Sidebar = (props) => {
       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 = "";
     if (md.format === "RGB01") {
@@ -31,14 +36,20 @@ const Sidebar = (props) => {
       let g = Math.round(v[1]*255);
       let b = Math.round(v[2]*255);
       rgb = `rgb(${r}, ${g}, ${b})`;
+      color = `rgb(${255^r}, ${255^g}, ${255^b})`;
       value = rgb;
     } else {
-      rgb = `rgb(${v}, ${v}, ${v})`;
+      let c = 255*v/max;
+      rgb = `rgb(${c}, ${c}, ${c})`;
+      color = `rgb(${255^c}, ${255^c}, ${255^c})`;
       value = v;
     }
     return <div className="sample" key={md.name}>
       <p>{md.name}</p>
-      <p className="value" style={{backgroundColor: rgb}}>{value}</p>
+      <p className="value" style={{
+        color,
+        backgroundColor: rgb,
+      }}>{value}</p>
     </div>
   });
   return <aside className="menu">
@@ -71,6 +82,7 @@ class App extends React.Component {
     this.state = {
       data: null,
       binary: {},
+      binaryMax: {},
       isFetching: false,
       isFrozen: false,
       isZoomed: false,
@@ -88,6 +100,8 @@ 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 => {
@@ -101,10 +115,19 @@ class App extends React.Component {
               .then(response => response.json())
               .then(result => {
                 let curBinary = this.state.binary;
-                this.setState({binary: {
+                let curBinaryMax = this.state.binaryMax;
+                let binaryMax = result.reduce(max);
+                console.log(`${md.name} ${binaryMax}`);
+                this.setState({
+                  binary: {
                     [md.name]: result,
                     ...curBinary
-                }});
+                  },
+                  binaryMax: {
+                    [md.name]: binaryMax,
+                    ...curBinaryMax
+                  }
+                });
               })
               .catch(e => console.log(e));
           });
@@ -118,6 +141,7 @@ class App extends React.Component {
     let images = [];
     let {
       binary,
+      binaryMax,
       data,
       isFrozen,
       isZoomed,
@@ -206,6 +230,7 @@ class App extends React.Component {
         zoomFactor={zoomFactor}
         x={x} y={y}
         binary={binary}
+        binaryMax={binaryMax}
         onZoom={onZoom} />;
     }
     return (