import MapLayout from "@/components/map/Layout";
import CustomToolbar from "@/components/common/CustomToolbar";
import CustomClock from "@/components/common/CustomClock";
import TextInfoPanel from "@/components/common/TextInfoPanel";
import CustomFlyTo from "./CustomFlyTo";
import FormPanel from "./FormPanel";
import ChartPanel from "./ChartPanel";
import RectangleLayer from "./RectangleLayer";
import { useState } from "react";
import Legend from "./Legend";

export default function DomainFour() {
  const [show, setShow] = useState(false);

  return (
    <MapLayout>
      <div className="title">三极联动影响青藏高原上层温度</div>
      <CustomToolbar />
      <CustomClock />
      <CustomFlyTo />
      <div className="left-panel one">
        <TextInfoPanel
          content={`利用ERA5再分析数据，通过XGBoost和LightGBM方法对青藏高原对流层温度异常进行预测，结果表明该温度异常主要受地球三极信号影响，机器学习方法的高预测性对于南亚高压和亚洲夏季降水有重要指示意义。机器学习的方法描述：
XGBoos是基于梯度提升决策树方法的分类和回归模型。 LightGBM也是一种基于树的梯度提升方法，可以解决高维输入变量问题。这两个机器学习模型由许多简单的弱学习器（也称为小回归模型）组成，最终的预测是所有弱学习器的预测的加权和。 此外，作为Boosting树模型，XGBoost和LightGBM对多重共线性不敏感，这减少了特征的同时交互，提高了预测能力。`}
        />
      </div>
      <div className="right-panel">
        <div className="top-panel">
          <FormPanel setShow={setShow} />
        </div>
        <div className="bottom-panel">{show && <ChartPanel />}</div>
      </div>
      <Legend />
      <RectangleLayer />
    </MapLayout>
  );
}