> ## Documentation Index
> Fetch the complete documentation index at: https://data.avert.ldeo.columbia.edu/llms.txt
> Use this file to discover all available pages before exploring further.

# OKCE

> Okmok Cone E

export const SoilTempChart = ({volcano, station, availableYears = [], defaultYear}) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [selectedYear, setSelectedYear] = useState(defaultYear || (availableYears.length > 0 ? availableYears[0] : new Date().getFullYear()));
  console.log("SoilTempChart props:", {
    volcano,
    station,
    availableYears,
    defaultYear
  });
  const volcanoName = volcano || "okmok";
  const stationName = station || "okce";
  const years = useMemo(() => availableYears, [availableYears]);
  const chartId = `soil-temp-chart-${volcanoName}-${stationName}`;
  const triggerBlobDownload = async (url, filename) => {
    try {
      const response = await fetch(url, {
        method: "GET",
        mode: "cors",
        headers: {
          Accept: "application/octet-stream, application/csv, */*"
        }
      });
      if (!response.ok) throw new Error("Download failed");
      const blob = await response.blob();
      const cd = response.headers.get("content-disposition");
      if (cd) {
        const match = cd.match(/filename=([^;]+)$/i);
        if (match && match[1]) filename = match[1].replace(/\"/g, "").trim();
      }
      const href = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = href;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(href);
    } catch (e) {
      console.error("Download failed:", e);
      alert("Failed to download file. Please try again.");
    }
  };
  const renderChart = (data, yearForDownload) => {
    if (typeof window !== "undefined" && window.Plotly) {
      const chartDiv = document.getElementById(chartId);
      if (chartDiv) {
        const config = {
          ...data.chart_config.config,
          modeBarButtonsToAdd: [{
            name: "Download Year CSV",
            icon: window.Plotly.Icons.disk || window.Plotly.Icons.camera,
            click: () => {
              const url = `https://avert.ldeo.columbia.edu/api/download-year-processed-csv/soil-temp/${volcanoName}/${stationName}?year=${yearForDownload}`;
              const fname = `${volcanoName}_${stationName}_${yearForDownload}_temp_processed.csv`;
              triggerBlobDownload(url, fname);
            }
          }],
          modeBarButtonsToRemove: [...data.chart_config.config?.modeBarButtonsToRemove || [], "zoom2d", "autoScale2d"]
        };
        const layout = {
          ...data.chart_config.layout,
          height: 600,
          paper_bgcolor: "rgba(0,0,0,0)",
          plot_bgcolor: "rgba(0,0,0,0)"
        };
        try {
          window.Plotly.newPlot(chartDiv, data.chart_config.data, layout, config);
        } catch (error) {
          console.error("Error rendering chart:", error);
        }
      }
    }
  };
  useEffect(() => {
    const loadPlotlyAndFetchData = async () => {
      setLoading(true);
      setError(null);
      if (typeof window !== "undefined" && !window.Plotly) {
        await new Promise((resolve, reject) => {
          const script = document.createElement("script");
          script.src = "https://cdn.plot.ly/plotly-2.35.2.min.js";
          script.onload = () => resolve();
          script.onerror = () => reject(new Error("Failed to load Plotly"));
          document.head.appendChild(script);
        });
      }
      try {
        const url = `https://avert.ldeo.columbia.edu/api/generate-interactive-chart/soil-temp/${volcanoName}/${stationName}?year=${selectedYear}`;
        const response = await fetch(url, {
          method: "POST",
          mode: "cors",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json"
          }
        });
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        const data = await response.json();
        if (data.success) {
          setTimeout(() => renderChart(data, selectedYear), 200);
        } else {
          throw new Error("Failed to generate chart");
        }
      } catch (err) {
        setError(err.message);
        console.error("Error:", err);
      } finally {
        setLoading(false);
      }
    };
    loadPlotlyAndFetchData();
  }, [selectedYear, volcanoName, stationName]);
  if (loading) {
    return <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#0B1D26]"></div>
        <p className="ml-4 text-gray-600 dark:text-gray-300">
          Loading chart data...
        </p>
      </div>;
  }
  if (error) {
    return <div className="text-red-500 p-4 border border-red-300 rounded-md bg-red-50 dark:bg-red-900 dark:border-red-700">
        <p>{error}</p>
      </div>;
  }
  return <div className="border border-zinc-950/20 dark:border-white/20 rounded-xl overflow-hidden relative">
      <div className="bg-zinc-50 dark:bg-zinc-900 px-4 py-3 border-b border-zinc-950/20 dark:border-white/20">
        <div className="flex items-center justify-between">
          <div className="text-sm font-medium text-zinc-950 dark:text-white">
            [{selectedYear}] Soil Temperature Monitoring -{" "}
            {stationName.toUpperCase()} ({volcanoName.toUpperCase()})
          </div>
          <select value={selectedYear} onChange={e => setSelectedYear(parseInt(e.target.value))} className="text-xs px-2 py-1 border border-zinc-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-800">
            {years.map(yearOption => <option key={yearOption} value={yearOption}>
                {yearOption}
              </option>)}
          </select>
        </div>
      </div>
      <div id={chartId} style={{
    width: "100%",
    height: "600px"
  }} className="relative"></div>
      <div className="px-4 py-3 bg-zinc-50 dark:bg-zinc-900 border-t border-zinc-950/20 dark:border-white/20 flex items-center justify-between">
        <div className="text-xs text-zinc-600 dark:text-zinc-300">
          Download processed temperature data across all available years (CSV)
        </div>
        <button onClick={() => triggerBlobDownload(`https://avert.ldeo.columbia.edu/api/download-all-years-processed-csv/soil-temp/${volcanoName}/${stationName}`, `${volcanoName}_${stationName}_all_years_temp_processed.csv`)} className="text-xs px-3 py-1 rounded bg-[#0B1D26] text-white hover:bg-[#0B1D26]/80">
          Download all-years (.csv)
        </button>
      </div>

      {}
      <style>{`
        #${chartId} .modebar-group {
          display: flex !important;
          flex-direction: column !important;
        }
      `}</style>
    </div>;
};

Raw data can be visualized and downloaded using the plot tool below.

<SoilTempChart volcano="okmok" station="okce" availableYears={[2026, 2025, 2024, 2023, 2022, 2021]} defaultYear={2026} />