with average line

Author: rinriko

package-lock.json

@@ -28,7 +28,8 @@
     "react-dom": "^19.0.0",
     "react-plotly.js": "^2.6.0",
     "react-rnd": "^10.5.2",
-    "react-router-dom": "^7.6.2"
+    "react-router-dom": "^7.6.2",
+    "react-zoom-pan-pinch": "^3.7.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

package.json

@@ -0,0 +1,17 @@
+{
+  "width": 160,
+  "height": 160,
+  "dtype": "float32_le",
+  "order": "row-major",
+  "norm": {
+    "kind": "linear",
+    "source": "zscale",
+    "vmin": -2.5081933540227115,
+    "vmax": 3.165679448851614
+  },
+  "arcsec_per_pix": 0.06242396026470463,
+  "center_px": [
+    70.17383946424924,
+    112.1276696930126
+  ]
+}

public/data/slice50.bin

@@ -0,0 +1,236 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+
+type Meta = {
+  width: number;
+  height: number;
+  dtype: 'float32_le';
+  order: 'row-major';
+  norm?: { kind: 'linear'; source: 'zscale'; vmin: number; vmax: number };
+  arcsec_per_pix?: number | null;
+  center_px?: [number, number] | null;
+};
+
+/** simple viridis colormap (256 RGB tuples, 0–255 range) */
+const VIRIDIS = (() => {
+  const hex = [
+    '#440154','#482878','#3E4989','#31688E','#26828E','#1F9E89',
+    '#35B779','#6CCE59','#B4DE2C','#FDE725'
+  ];
+  const stops = hex.map(h => {
+    const v = parseInt(h.slice(1), 16);
+    return [(v >> 16) & 255, (v >> 8) & 255, v & 255];
+  });
+  // interpolate between 10 stops → 256
+  const arr: [number, number, number][] = [];
+  for (let i = 0; i < 256; i++) {
+    const t = i / 255 * (stops.length - 1);
+    const i0 = Math.floor(t);
+    const i1 = Math.min(i0 + 1, stops.length - 1);
+    const f = t - i0;
+    const c0 = stops[i0], c1 = stops[i1];
+    arr.push([
+      Math.round(c0[0] + f * (c1[0] - c0[0])),
+      Math.round(c0[1] + f * (c1[1] - c0[1])),
+      Math.round(c0[2] + f * (c1[2] - c0[2]))
+    ]);
+  }
+  return arr;
+})();
+
+export default function JWSTBinPage() {
+  const binUrl = '/data/slice50.bin';
+  const metaUrl = '/data/slice50.meta.json';
+
+  const [meta, setMeta] = useState<Meta | null>(null);
+  const [buf, setBuf] = useState<Float32Array | null>(null);
+  const [center, setCenter] = useState<[number, number] | null>(null);
+
+  const [useArcsec, setUseArcsec] = useState(false);
+  const [rIn, setRIn] = useState(10);
+  const [rOut, setROut] = useState(30);
+  const [colorMap, setColorMap] = useState<'gray' | 'viridis'>('viridis');
+
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      const m: Meta = await (await fetch(metaUrl)).json();
+      if (!alive) return;
+      setMeta(m);
+      setCenter(m.center_px ?? null);
+      const ab = await (await fetch(binUrl)).arrayBuffer();
+      if (!alive) return;
+      setBuf(new Float32Array(ab));
+    })();
+    return () => { alive = false; };
+  }, [binUrl, metaUrl]);
+
+  useEffect(() => {
+    if (!meta || !buf || !canvasRef.current) return;
+    const { width, height } = meta;
+    const cv = canvasRef.current;
+    cv.width = width;
+    cv.height = height;
+
+    const ctx = cv.getContext('2d');
+    if (!ctx) return;
+
+    let vmin = meta.norm?.vmin ?? Infinity;
+    let vmax = meta.norm?.vmax ?? -Infinity;
+    if (meta.norm == null) {
+      for (const v of buf) {
+        if (!Number.isFinite(v)) continue;
+        if (v < vmin) vmin = v;
+        if (v > vmax) vmax = v;
+      }
+      if (vmax <= vmin) vmax = vmin + 1e-6;
+    }
+
+    const img = ctx.createImageData(width, height);
+    const out = img.data;
+
+    for (let i = 0, j = 0; i < buf.length; i++, j += 4) {
+      const v = buf[i];
+      let t = (v - vmin) / (vmax - vmin);
+      if (!Number.isFinite(t)) t = 0;
+      if (t < 0) t = 0;
+      if (t > 1) t = 1;
+
+      let r: number, g: number, b: number;
+      if (colorMap === 'gray') {
+        const x = Math.round(t * 255);
+        r = g = b = x;
+      } else {
+        const c = VIRIDIS[Math.round(t * 255)];
+        [r, g, b] = c;
+      }
+      out[j + 0] = r;
+      out[j + 1] = g;
+      out[j + 2] = b;
+      out[j + 3] = 255;
+    }
+    ctx.putImageData(img, 0, 0);
+  }, [meta, buf, colorMap]);
+
+  function handleClick(e: React.MouseEvent) {
+    if (!meta || !canvasRef.current) return;
+    const rect = canvasRef.current.getBoundingClientRect();
+    const dispX = e.clientX - rect.left;
+    const dispY = e.clientY - rect.top;
+    const sx = meta.width / rect.width;
+    const sy = meta.height / rect.height;
+    setCenter([dispX * sx, dispY * sy]);
+  }
+
+  function Overlay() {
+    if (!meta || !center || !canvasRef.current) return null;
+    const dispW = canvasRef.current.clientWidth;
+    const dispH = canvasRef.current.clientHeight;
+    const sx = dispW / meta.width;
+    const sy = dispH / meta.height;
+
+    const rInPx =
+      useArcsec && meta.arcsec_per_pix ? rIn / meta.arcsec_per_pix : rIn;
+    const rOutPx =
+      useArcsec && meta.arcsec_per_pix ? rOut / meta.arcsec_per_pix : rOut;
+
+    return (
+      <svg
+        className="absolute inset-0 pointer-events-none"
+        viewBox={`0 0 ${dispW} ${dispH}`}
+        preserveAspectRatio="none"
+      >
+        {rOutPx > 0 && (
+          <circle
+            cx={center[0] * sx}
+            cy={center[1] * sy}
+            r={rOutPx * sx}
+            fill="none"
+            stroke="white"
+            strokeWidth={2}
+          />
+        )}
+        {rInPx > 0 && (
+          <circle
+            cx={center[0] * sx}
+            cy={center[1] * sy}
+            r={rInPx * sx}
+            fill="none"
+            stroke="white"
+            strokeWidth={1.5}
+            strokeDasharray="6 4"
+          />
+        )}
+      </svg>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl p-6 space-y-6">
+      <h1 className="text-xl font-semibold">JWST Flux Slice Viewer</h1>
+
+      <div className="flex flex-wrap items-center gap-4">
+        <label className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={useArcsec}
+            onChange={(e) => setUseArcsec(e.target.checked)}
+          />
+          <span className="text-sm">Use arcsec for radii</span>
+        </label>
+
+        <label className="flex items-center gap-2">
+          <span className="text-sm">r_in:</span>
+          <input
+            className="border rounded p-1 w-16 text-center"
+            type="number"
+            value={rIn}
+            onChange={(e) => setRIn(Number(e.target.value))}
+          />
+        </label>
+        <label className="flex items-center gap-2">
+          <span className="text-sm">r_out:</span>
+          <input
+            className="border rounded p-1 w-16 text-center"
+            type="number"
+            value={rOut}
+            onChange={(e) => setROut(Number(e.target.value))}
+          />
+        </label>
+
+        <button
+          onClick={() => setColorMap((c) => (c === 'gray' ? 'viridis' : 'gray'))}
+          className="px-3 py-1 rounded bg-slate-700 text-white hover:bg-slate-600 text-sm"
+        >
+          Toggle Colormap ({colorMap})
+        </button>
+      </div>
+
+      <div className="relative w-full border rounded bg-black flex justify-center items-center overflow-hidden">
+        <TransformWrapper initialScale={2.5} minScale={0.5} maxScale={15} wheel={{ step: 0.15 }}>
+          <TransformComponent wrapperClass="w-full h-full flex justify-center">
+            <div className="relative" style={{ width: '800px', height: '800px' }} onClick={handleClick}>
+              <canvas ref={canvasRef} className="w-full h-full block select-none" />
+              <Overlay />
+            </div>
+          </TransformComponent>
+        </TransformWrapper>
+      </div>
+
+      <div className="text-sm text-gray-300">
+        {center
+          ? <>Center: ({center[0].toFixed(2)}, {center[1].toFixed(2)}) px</>
+          : <>Center: not set (click image)</>}
+      </div>
+      {meta?.arcsec_per_pix && (
+        <div className="text-sm text-gray-400">
+          Pixel scale ≈ {meta.arcsec_per_pix.toFixed(3)} arcsec/pixel
+        </div>
+      )}
+    </div>
+  );
+}