frontend/src/pages/QuotePage/QuotePage.js

import React from "react";
import {
  Box,
  Typography,
  Paper,
  IconButton,
  Tooltip,
  Alert,
  Link,
} from "@mui/material";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import PageHeader from "../../components/shared/PageHeader";

const citations = [
  {
    title: "Braindecode: A Deep Learning Toolbox for EEG Decoding",
    authors:
      "Robin Tibor Schirrmeister, Jost Tobias Springenberg, Lukas Dominique Josef Fiederer, Martin Glasstetter, Katharina Eggensperger, Michael Tangermann, Frank Hutter, Wolfram Burgard, Tonio Ball",
    citation: `@article{schirrmeister2017deep,
  title={Deep learning with convolutional neural networks for EEG decoding and visualization},
  author={Schirrmeister, Robin Tibor and Springenberg, Jost Tobias and Fiederer, Lukas Dominique Josef and Glasstetter, Martin and Eggensperger, Katharina and Tangermann, Michael and Hutter, Frank and Burgard, Wolfram and Ball, Tonio},
  journal={Human brain mapping},
  volume={38},
  number={11},
  pages={5391--5420},
  year={2017},
  publisher={Wiley Online Library}
}`,
    url: "https://onlinelibrary.wiley.com/doi/full/10.1002/hbm.23730",
    type: "main",
  },
];

const benchmarks = [
  {
    title: "BCIC-2a: BCI Competition IV Dataset 2a",
    authors: "Brunner et al.",
    citation: `@article{brunner2008bci,
  title={BCI Competition 2008--Graz data set A},
  author={Brunner, Clemens and Leeb, Robert and M{\\\"u}ller-Putz, Gernot and Schl{\\\"o}gl, Alois and Pfurtscheller, Gert},
  journal={Institute for Knowledge Discovery (Laboratory of Brain-Computer Interfaces), Graz University of Technology},
  volume={16},
  pages={1--6},
  year={2008}
}`,
  },
  {
    title: "PhysioNet Motor Imagery",
    authors: "Schalk et al.",
    citation: `@article{schalk2004bci2000,
  title={BCI2000: a general-purpose brain-computer interface (BCI) system},
  author={Schalk, Gerwin and McFarland, Dennis J and Hinterberger, Thilo and Birbaumer, Niels and Wolpaw, Jonathan R},
  journal={IEEE Transactions on biomedical engineering},
  volume={51},
  number={6},
  pages={1034--1043},
  year={2004},
  publisher={IEEE}
}`,
  },
  {
    title: "ISRUC-SLEEP: Sleep Staging Dataset",
    authors: "Khalighi et al.",
    citation: `@article{khalighi2016isruc,
  title={ISRUC-Sleep: A comprehensive public dataset for sleep researchers},
  author={Khalighi, Sirvan and Sousa, Teresa and Santos, Jo{\\~a}o M and Nunes, Urbano},
  journal={Computer methods and programs in biomedicine},
  volume={124},
  pages={180--192},
  year={2016},
  publisher={Elsevier}
}`,
  },
  {
    title: "TUAB: TUH EEG Abnormal Corpus",
    authors: "Lopez de Diego et al.",
    citation: `@inproceedings{lopez2017automated,
  title={Automated interpretation of abnormal adult electroencephalograms},
  author={Lopez de Diego, Silvia and Obeid, Iyad and Bhatt, Priyanka and Bhatt, Sagar and Jacobson, Douglas and Picone, Joseph},
  year={2017}
}`,
  },
  {
    title: "CHB-MIT: Scalp EEG Database",
    authors: "Shoeb",
    citation: `@phdthesis{shoeb2009application,
  title={Application of machine learning to epileptic seizure onset detection and treatment},
  author={Shoeb, Ali Hossam},
  year={2009},
  school={Massachusetts Institute of Technology}
}`,
  },
  {
    title: "FACED: Emotion Recognition Dataset",
    authors: "Chen et al.",
    citation: `@article{chen2023large,
  title={A large finer-grained affective computing EEG dataset},
  author={Chen, Jingjing and Wang, Xiaobin and Huang, Chen and Hu, Xin and Shen, Xinke and Li, Dan},
  journal={Scientific Data},
  volume={10},
  number={1},
  pages={740},
  year={2023},
  publisher={Nature Publishing Group UK London}
}`,
    url: "https://www.nature.com/articles/s41597-023-02650-w",
  },
  {
    title: "SEED-V: Emotion Recognition with Video Stimuli",
    authors: "Liu et al.",
    citation: `@article{liu2021comparing,
  title={Comparing recognition performance and robustness of multimodal deep learning models for multimodal emotion recognition},
  author={Liu, Wei and Qiu, Jie-Lin and Zheng, Wei-Long and Lu, Bao-Liang},
  journal={IEEE Transactions on Cognitive and Developmental Systems},
  volume={14},
  number={2},
  pages={715--729},
  year={2021},
  publisher={IEEE}
}`,
  },
];

const frameworks = [
  {
    title: "MOABB: Mother of All BCI Benchmarks",
    authors: "Jayaram, Barachant",
    citation: `@article{jayaram2018moabb,
  title={MOABB: trustworthy algorithm benchmarking for BCIs},
  author={Jayaram, Vinay and Barachant, Alexandre},
  journal={Journal of neural engineering},
  volume={15},
  number={6},
  pages={066011},
  year={2018},
  publisher={IOP Publishing}
}`,
    url: "https://moabb.neurotechx.com",
  },
  {
    title: "PEFT: Parameter-Efficient Fine-Tuning",
    authors: "Mangrulkar et al.",
    citation: `@misc{peft2024,
  title={PEFT: State-of-the-art Parameter-Efficient Fine-Tuning methods},
  author={Sourab Mangrulkar and Sylvain Gugger and Lysandre Debut and Younes Belkada and Sayak Paul and Benjamin Bossan},
  year={2024},
  howpublished={\\url{https://github.com/huggingface/peft}}
}`,
    url: "https://huggingface.co/docs/peft",
  },
];

const CitationBlock = ({ citation, title, authors, url, type }) => {
  const handleCopy = () => {
    navigator.clipboard.writeText(citation);
  };

  return (
    <Paper
      elevation={0}
      sx={{
        p: 3,
        border: "1px solid",
        borderColor: "grey.200",
        backgroundColor: "transparent",
        borderRadius: 2,
        position: "relative",
      }}
    >
      <Box sx={{ mb: 2 }}>
        <Typography variant="h6" sx={{ mb: 0.5 }}>
          {title}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {authors}
        </Typography>
        {url && (
          <Link
            href={url}
            target="_blank"
            rel="noopener noreferrer"
            sx={{ fontSize: "0.875rem", display: "block", mt: 0.5 }}
          >
            View paper
          </Link>
        )}
      </Box>
      <Box
        sx={{
          backgroundColor: "grey.900",
          borderRadius: 1,
          p: 2,
          position: "relative",
        }}
      >
        <Tooltip title="Copy citation" placement="top">
          <IconButton
            onClick={handleCopy}
            size="small"
            sx={{
              position: "absolute",
              top: 8,
              right: 8,
              color: "grey.500",
              "&:hover": {
                color: "grey.300",
              },
            }}
          >
            <ContentCopyIcon fontSize="small" />
          </IconButton>
        </Tooltip>
        <Box
          component="pre"
          sx={{
            margin: 0,
            color: "#fff",
            fontSize: "0.875rem",
            fontFamily: "monospace",
            whiteSpace: "pre",
            textAlign: "left",
            overflow: "auto",
          }}
        >
          <code>{citation}</code>
        </Box>
      </Box>
    </Paper>
  );
};

function QuotePage() {
  return (
    <Box sx={{ width: "100%", maxWidth: 1200, margin: "0 auto", py: 4, px: 0 }}>
      <PageHeader
        title="Citation Information"
        subtitle="How to cite the EEG Finetune Arena in your work"
      />

      <Alert severity="info" sx={{ mb: 4 }}>
        <Typography variant="body2">
          The citations below include the core library, the individual EEG
          benchmark datasets, and the evaluation frameworks used in our
          benchmark suite.
        </Typography>
      </Alert>

      <Box sx={{ mb: 6 }}>
        <Typography variant="h5" sx={{ mb: 3 }}>
          EEG Finetune Arena
        </Typography>
        <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
          {citations.map((citation, index) => (
            <CitationBlock key={index} {...citation} />
          ))}
        </Box>
      </Box>

      <Box sx={{ mb: 6 }}>
        <Typography variant="h5" sx={{ mb: 3 }}>
          EEG Benchmark Datasets
        </Typography>
        <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
          {benchmarks.map((benchmark, index) => (
            <CitationBlock key={index} {...benchmark} />
          ))}
        </Box>
      </Box>

      <Box>
        <Typography variant="h5" sx={{ mb: 3 }}>
          Evaluation Frameworks
        </Typography>
        <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
          {frameworks.map((framework, index) => (
            <CitationBlock key={index} {...framework} />
          ))}
        </Box>
      </Box>
    </Box>
  );
}

export default QuotePage;