@uoa-css-lab/duckscatter 1.3.0

package/examples/next/app/components/ScatterPlotCanvas.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useRef, useEffect, useCallback, useState } from 'react';
+import { useScatterPlot } from '../context/ScatterPlotContext';
+import { HoverInfoDisplay } from './HoverInfoDisplay';
+
+export function ScatterPlotCanvas() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { initializePlot, plot, state } = useScatterPlot();
+  const initializedRef = useRef(false);
+  const isDraggingRef = useRef(false);
+  const lastMouseRef = useRef({ x: 0, y: 0 });
+  const [mousePosition, setMousePosition] = useState<{ x: number; y: number } | null>(null);
+
+  useEffect(() => {
+    if (canvasRef.current && !initializedRef.current) {
+      initializedRef.current = true;
+      initializePlot(canvasRef.current);
+    }
+  }, [initializePlot]);
+
+  const handleResize = useCallback(() => {
+    if (!containerRef.current || !canvasRef.current || !plot) return;
+
+    const { width, height } = containerRef.current.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+
+    canvasRef.current.width = width * dpr;
+    canvasRef.current.height = height * dpr;
+    canvasRef.current.style.width = `${width}px`;
+    canvasRef.current.style.height = `${height}px`;
+
+    plot.resize(width * dpr, height * dpr);
+  }, [plot]);
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, [handleResize]);
+
+  // Zoom with wheel
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !plot) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const dpr = window.devicePixelRatio || 1;
+
+      const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
+      const newZoom = plot.getZoom() * zoomFactor;
+      plot.zoomToPoint(newZoom, x * dpr, y * dpr);
+      plot.render();
+    };
+
+    canvas.addEventListener('wheel', handleWheel, { passive: false });
+    return () => canvas.removeEventListener('wheel', handleWheel);
+  }, [plot]);
+
+  // Pan with mouse drag
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !plot) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      isDraggingRef.current = true;
+      lastMouseRef.current = { x: e.clientX, y: e.clientY };
+      canvas.style.cursor = 'grabbing';
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDraggingRef.current) return;
+      const dx = e.clientX - lastMouseRef.current.x;
+      const dy = e.clientY - lastMouseRef.current.y;
+      lastMouseRef.current = { x: e.clientX, y: e.clientY };
+
+      const rect = canvas.getBoundingClientRect();
+      // Convert pixel delta to clip space delta (-1 to 1)
+      const clipDx = (dx / rect.width) * 2;
+      const clipDy = -(dy / rect.height) * 2; // Y is inverted
+      plot.pan(clipDx, clipDy);
+      plot.render();
+    };
+
+    const handleMouseUp = () => {
+      isDraggingRef.current = false;
+      canvas.style.cursor = 'grab';
+    };
+
+    canvas.addEventListener('mousedown', handleMouseDown);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    canvas.style.cursor = 'grab';
+
+    return () => {
+      canvas.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [plot]);
+
+  // Track mouse position for hover tooltip
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+
+    const handleMouseLeave = () => {
+      setMousePosition(null);
+    };
+
+    container.addEventListener('mousemove', handleMouseMove);
+    container.addEventListener('mouseleave', handleMouseLeave);
+
+    return () => {
+      container.removeEventListener('mousemove', handleMouseMove);
+      container.removeEventListener('mouseleave', handleMouseLeave);
+    };
+  }, []);
+
+  return (
+    <div ref={containerRef} className="absolute inset-0">
+      <canvas ref={canvasRef} className="block w-full h-full" />
+      {state.hoveredPoint && mousePosition && (
+        <HoverInfoDisplay mousePosition={mousePosition} />
+      )}
+      {state.isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/50">
+          <span className="text-white">Loading...</span>
+        </div>
+      )}
+      {state.error && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/80">
+          <div className="text-red-500 p-4 max-w-md text-center">
+            <p className="font-bold">Error</p>
+            <p>{state.error}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/examples/next/app/components/SearchBox.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useScatterPlot } from '../context/ScatterPlotContext';
+
+export function SearchBox() {
+  const [value, setValue] = useState('');
+  const { updateSearch } = useScatterPlot();
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    debounceRef.current = setTimeout(() => {
+      updateSearch(value);
+    }, 300);
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [value, updateSearch]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="text-sm font-medium text-zinc-700">Search Words</label>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="Filter by word..."
+        className="px-3 py-2 bg-white border border-zinc-300 rounded text-zinc-800 text-sm"
+      />
+      {value && (
+        <button
+          onClick={() => setValue('')}
+          className="text-xs text-zinc-500 hover:text-zinc-800 self-start"
+        >
+          Clear filter
+        </button>
+      )}
+    </div>
+  );
+}

package/examples/next/app/components/Slider.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+
+interface SliderProps {
+  /** ラベルテキスト */
+  label: string;
+  /** 最小値 */
+  min: number;
+  /** 最大値 */
+  max: number;
+  /** ステップ値 */
+  step: number;
+  /** 初期値 */
+  defaultValue: number;
+  /** 値変更時のコールバック */
+  onChange: (value: number) => void;
+  /** 値のパース関数（デフォルト: parseFloat） */
+  parseValue?: (v: string) => number;
+  /** 表示用のフォーマット関数（デフォルト: 小数点2桁） */
+  formatValue?: (v: number) => string;
+  /** 左端のラベル */
+  minLabel?: string;
+  /** 右端のラベル */
+  maxLabel?: string;
+}
+
+/**
+ * 汎用スライダーコンポーネント
+ */
+export function Slider({
+  label,
+  min,
+  max,
+  step,
+  defaultValue,
+  onChange,
+  parseValue = parseFloat,
+  formatValue = (v) => v.toFixed(2),
+  minLabel,
+  maxLabel,
+}: SliderProps) {
+  const [value, setValue] = useState(defaultValue);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = parseValue(e.target.value);
+      setValue(newValue);
+      onChange(newValue);
+    },
+    [onChange, parseValue]
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="text-sm font-medium text-zinc-700">
+        {label}: {formatValue(value)}
+      </label>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={handleChange}
+        className="w-full h-2 bg-zinc-200 rounded-lg appearance-none cursor-pointer accent-blue-500"
+      />
+      {(minLabel || maxLabel) && (
+        <div className="flex justify-between text-xs text-zinc-500">
+          <span>{minLabel ?? min}</span>
+          <span>{maxLabel ?? max}</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/examples/next/app/components/StatsDisplay.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useScatterPlot } from '../context/ScatterPlotContext';
+
+export function StatsDisplay() {
+  const { state } = useScatterPlot();
+
+  if (state.pointCount === null) return null;
+
+  return (
+    <span className="text-sm text-zinc-500">
+      {state.pointCount.toLocaleString()} points
+    </span>
+  );
+}

package/examples/next/app/components/TimeFilterSlider.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useScatterPlot } from '../context/ScatterPlotContext';
+
+export function TimeFilterSlider() {
+  const { state, updateTimeFilter } = useScatterPlot();
+  const { timeRange } = state;
+
+  const [minValue, setMinValue] = useState<number>(0);
+  const [maxValue, setMaxValue] = useState<number>(0);
+  const [prevTimeRange, setPrevTimeRange] = useState(timeRange);
+
+  // timeRangeが変更されたら値を更新（レンダー中のステート更新パターン）
+  if (timeRange !== prevTimeRange) {
+    setPrevTimeRange(timeRange);
+    if (timeRange) {
+      setMinValue(timeRange.min);
+      setMaxValue(timeRange.max);
+    }
+  }
+
+  const handleMinChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newMin = parseFloat(e.target.value);
+      // maxValueを超えないように制限
+      const clampedMin = Math.min(newMin, maxValue);
+      setMinValue(clampedMin);
+      updateTimeFilter(clampedMin, maxValue);
+    },
+    [maxValue, updateTimeFilter]
+  );
+
+  const handleMaxChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newMax = parseFloat(e.target.value);
+      // minValueを下回らないように制限
+      const clampedMax = Math.max(newMax, minValue);
+      setMaxValue(clampedMax);
+      updateTimeFilter(minValue, clampedMax);
+    },
+    [minValue, updateTimeFilter]
+  );
+
+  const handleReset = useCallback(() => {
+    if (timeRange) {
+      setMinValue(timeRange.min);
+      setMaxValue(timeRange.max);
+      updateTimeFilter(null, null);
+    }
+  }, [timeRange, updateTimeFilter]);
+
+  // 日時フォーマット関数（UNIXタイムスタンプ秒 → 日付文字列）
+  const formatTime = (timestamp: number) => {
+    // タイムスタンプが大きい場合はミリ秒として扱う
+    const ts = timestamp > 1e12 ? timestamp : timestamp * 1000;
+    return new Date(ts).toLocaleDateString('ja-JP', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  // 範囲が未取得の場合は非表示
+  if (!timeRange) {
+    return null;
+  }
+
+  // 選択範囲の割合を計算（トラックのハイライト用）
+  const range = timeRange.max - timeRange.min;
+  const minPercent = range > 0 ? ((minValue - timeRange.min) / range) * 100 : 0;
+  const maxPercent = range > 0 ? ((maxValue - timeRange.min) / range) * 100 : 100;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex justify-between items-center">
+        <label className="text-sm font-medium text-zinc-700">Time Filter</label>
+        <button
+          onClick={handleReset}
+          className="text-xs text-zinc-500 hover:text-zinc-800 underline"
+        >
+          Reset
+        </button>
+      </div>
+
+      <div className="relative h-6">
+        {/* トラック背景 */}
+        <div className="absolute top-1/2 -translate-y-1/2 w-full h-2 bg-zinc-200 rounded-lg" />
+
+        {/* 選択範囲ハイライト */}
+        <div
+          className="absolute top-1/2 -translate-y-1/2 h-2 bg-blue-500 rounded-lg"
+          style={{
+            left: `${minPercent}%`,
+            width: `${maxPercent - minPercent}%`,
+          }}
+        />
+
+        {/* 最小値スライダー */}
+        <input
+          type="range"
+          min={timeRange.min}
+          max={timeRange.max}
+          step={(timeRange.max - timeRange.min) / 1000}
+          value={minValue}
+          onChange={handleMinChange}
+          className="absolute w-full h-2 top-1/2 -translate-y-1/2 appearance-none bg-transparent pointer-events-none
+            [&::-webkit-slider-thumb]:pointer-events-auto
+            [&::-webkit-slider-thumb]:w-4
+            [&::-webkit-slider-thumb]:h-4
+            [&::-webkit-slider-thumb]:appearance-none
+            [&::-webkit-slider-thumb]:bg-blue-500
+            [&::-webkit-slider-thumb]:rounded-full
+            [&::-webkit-slider-thumb]:cursor-pointer
+            [&::-webkit-slider-thumb]:shadow-md
+            [&::-webkit-slider-thumb]:border-2
+            [&::-webkit-slider-thumb]:border-white
+            [&::-moz-range-thumb]:pointer-events-auto
+            [&::-moz-range-thumb]:w-4
+            [&::-moz-range-thumb]:h-4
+            [&::-moz-range-thumb]:appearance-none
+            [&::-moz-range-thumb]:bg-blue-500
+            [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:cursor-pointer
+            [&::-moz-range-thumb]:shadow-md
+            [&::-moz-range-thumb]:border-2
+            [&::-moz-range-thumb]:border-white"
+        />
+
+        {/* 最大値スライダー */}
+        <input
+          type="range"
+          min={timeRange.min}
+          max={timeRange.max}
+          step={(timeRange.max - timeRange.min) / 1000}
+          value={maxValue}
+          onChange={handleMaxChange}
+          className="absolute w-full h-2 top-1/2 -translate-y-1/2 appearance-none bg-transparent pointer-events-none
+            [&::-webkit-slider-thumb]:pointer-events-auto
+            [&::-webkit-slider-thumb]:w-4
+            [&::-webkit-slider-thumb]:h-4
+            [&::-webkit-slider-thumb]:appearance-none
+            [&::-webkit-slider-thumb]:bg-blue-500
+            [&::-webkit-slider-thumb]:rounded-full
+            [&::-webkit-slider-thumb]:cursor-pointer
+            [&::-webkit-slider-thumb]:shadow-md
+            [&::-webkit-slider-thumb]:border-2
+            [&::-webkit-slider-thumb]:border-white
+            [&::-moz-range-thumb]:pointer-events-auto
+            [&::-moz-range-thumb]:w-4
+            [&::-moz-range-thumb]:h-4
+            [&::-moz-range-thumb]:appearance-none
+            [&::-moz-range-thumb]:bg-blue-500
+            [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:cursor-pointer
+            [&::-moz-range-thumb]:shadow-md
+            [&::-moz-range-thumb]:border-2
+            [&::-moz-range-thumb]:border-white"
+        />
+      </div>
+
+      {/* 日時表示 */}
+      <div className="flex justify-between text-xs text-zinc-500">
+        <span>{formatTime(minValue)}</span>
+        <span>{formatTime(maxValue)}</span>
+      </div>
+    </div>
+  );
+}