Web-Frontend/client/src/components/Widgets/SeismicEvents.jsx

import VdapApi from '../../hooks/useVdapApi.js';
import { useMemo } from 'react';
import Plot from 'react-plotly.js';
import {Box, Flex, Spinner, Text} from "@chakra-ui/react";

export default function SeismicEvents({ settings, widgetID}) {
  const url = useMemo(() =>{
    if (settings?.startDate && settings?.endDate)
      return '/api/v2/seismic_events?start_date=' + settings?.startDate + '&end_date=' + settings?.endDate;
    else {
      const base_url = '/api/v2/seismic_events';
      let today = new Date();
      let sevenDaysAgo = new Date(today);
      sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);

      sevenDaysAgo = sevenDaysAgo.toLocaleDateString('en-CA');
      today = today.toLocaleDateString('en-CA');

      return base_url + '?start_date=' + sevenDaysAgo + '&end_date=' + today;
    }
  }, [settings?.startDate, settings?.endDate]);

  console.log(url);
  const { data: apiData, isLoading, error } = VdapApi(url);

  const plotTraces = useMemo(() => {
    if (!apiData || apiData.length === 0) return [];

    // Array of distinct Plotly shapes
    const Symbolway = [
      'circle', 'square', 'diamond',
      'triangle-up', 'triangle-down',
      'star', 'hexagram', 'pentagon',
      'hexagon', 'octagon', 'cross', 'x'
    ];

    // Sort data descending by seismic events count so smaller dots draw on top of larger ones
    const sortedData = [...apiData].sort((a, b) => b.number_events - a.number_events);

    // Efficiently group into Plotly traces by volcano
    const groupedData = sortedData.reduce((acc, curr) => {
      const name = curr.volcano_name || 'Unknown';
      if (!acc[name]) acc[name] = { x: [], y: [] };

      // Map the seismic-specific keys
      acc[name].x.push(new Date(curr.ts_epoch));
      acc[name].y.push(curr.number_events);
      return acc;
    }, {});

    return Object.keys(groupedData).map((volcanoName, index) => ({
      name: volcanoName,
      x: groupedData[volcanoName].x,
      y: groupedData[volcanoName].y,
      type: 'scatter',
      mode: 'markers',
      marker: {
        size: 7,
        line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
        symbol: Symbolway[index % Symbolway.length],
      },
      // Replicating the clean D3/Observable tooltip
      hovertemplate:
        `<b>${volcanoName}</b><br>` +
        'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
        'Number of Seismic Events: %{y}<extra></extra>'
    }));
  }, [apiData]);

  const layout = useMemo(() => {

    return {
      autosize: true,
      paper_bgcolor: 'transparent', // Let Chakra UI background show through
      plot_bgcolor: 'transparent',
      font: { color: '#d1d5db' }, // gray.300
      margin: { t: 40, r: 20, l: 20, b: 20 },
      // title: {
      //     text: '',
      //     font: { size: 16, color: 'white' },
      //     x: 0.05
      // },
      xaxis: {
        title: {
          text: 'Date (UTC)',
          font: { color: 'white', size: 12 }
        },
        type: 'date',
        tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
        gridcolor: '#4b5563',
        zerolinecolor: '#4b5563',
        automargin: true,
      },
      yaxis: {
        title: {
          text: 'Seismic Count',
          font: { color: 'white', size: 12 }
        },
        type: 'linear',
        gridcolor: '#4b5563',
        zerolinecolor: '#ffffff',
        automargin: true,
      },
      // legend: {
      //     orientation: 'h',
      //     y: -0.2,
      //     x: 0.5,
      //     xanchor: 'center'
      // },
      hovermode: 'closest',
      shapes: [
        {
          type: 'line',
          x0: 0,
          x1: 1,
          xref: 'paper', // Spans entire chart width
          y0: 0,
          y1: 0,
          yref: 'y',
          line: { color: 'white', width: 1 }
        }
      ],
    };
  }, []);

  if (isLoading) return (
    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
      <Spinner size="xl" color="blue.400" thickness="4px" />
    </Flex>
  );

  if (error) return (
    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
      <Text color="red.400">{error}</Text>
    </Flex>
  );

  if (plotTraces.length === 0) return (
    <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
      <Text color="gray.400">No data available for current filter.</Text>
    </Flex>
  );

  return (
    <Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
      <Plot
        data={plotTraces}
        layout={layout}
        useResizeHandler={true} // Essential for dashboard grid resizing!
        style={{ width: '100%', height: '100%' }}
        config={{ responsive: true, displayModeBar: true, displaylogo: false }}
      />
    </Box>
  );
}