From facfcf91479f1961899adc04b7dac67fbf8d564b Mon Sep 17 00:00:00 2001 From: joaquinvanschoren Date: Sat, 4 Nov 2023 02:20:36 +0100 Subject: [PATCH] added citation requests and bibtex --- app/public/locales/en/common.json | 15 ++++-- app/src/components/Card.js | 12 +++-- app/src/components/Chip.js | 69 +++++++++++++++++++++------ app/src/pages/about.js | 5 +- app/src/pages/terms.js | 77 +++++++++++++++++++++++++------ app/src/theme/variants.js | 16 ++++--- 6 files changed, 149 insertions(+), 45 deletions(-) diff --git a/app/public/locales/en/common.json b/app/public/locales/en/common.json index 11ef9cfb..0129906b 100644 --- a/app/public/locales/en/common.json +++ b/app/public/locales/en/common.json @@ -103,7 +103,7 @@ "title": "Good at coding?", "text": "Perfect! Please see the issue trackers of the different OpenML\ncomponents that you can contribute to.", "chips": [ - "Developer docs", + "Docs", "Website", "REST API", "Python API", @@ -294,6 +294,7 @@ "terms": { "helmet": "Terms & Citation", "title": "Terms & Citation", + "bibtex_copied": "BibTex was copied to clipboard", "header": { "licence": "Licenses", "citation": "Citing OpenML", @@ -312,28 +313,32 @@ "title": "OpenML Platform", "text": "Joaquin Vanschoren, Jan N. van Rijn, Bernd Bischl, Luis Torgo. **OpenML: networked science in machine learning.** _SIGKDD Explorations 15(2), pp 49-60, 2013_", "chips": [ - "Paper" + "Paper", + "BibTex" ] }, "cite_python": { "title": "OpenML Python API", "text": "Matthias Feurer, Jan N. van Rijn, Arlind Kadra, Pieter Gijsbers, Neeratyoy Mallik, Sahithya Ravi, Andreas Mueller, Joaquin Vanschoren, Frank Hutter. **OpenML-Python: an extensible Python API for OpenML.** _JMLR 22(1), Art. 100, pp 4573-4577, 2021_", "chips": [ - "Paper" + "Paper", + "BibTex" ] }, "cite_r": { "title": "OpenML R API", "text": "Giuseppe Casalicchio, Jakob Bossek, Michel Lang, Dominik Kirchhoff, Pascal Kerschke, Benjamin Hofner, Heidi Seibold, Joaquin Vanschoren, Bernd Bischl. **OpenML: An R package to connect to the machine learning platform OpenML.** _Computational Statistics 32(3), pp 1-15, 2017_", "chips": [ - "Paper" + "Paper", + "BibTex" ] }, "cite_benchmark": { "title": "OpenML Benchmarking suites", "text": "Bernd Bischl, Giuseppe Casalicchio, Matthias Feurer, Pieter Gijsbers, Frank Hutter, Michel Lang, Rafael Gomes Mantovani, Jan N. van Rijn, Joaquin Vanschoren. **OpenML Benchmarking Suites.** _Advances in Neural Information Processing Systems (NeurIPS 2021), 2021_", "chips": [ - "Paper" + "Paper", + "BibTex" ] } } diff --git a/app/src/components/Card.js b/app/src/components/Card.js index 4f78788e..8ef4cc2a 100644 --- a/app/src/components/Card.js +++ b/app/src/components/Card.js @@ -27,6 +27,8 @@ const Card = styled(MuiCard)` ${spacing}; position: relative; box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.05); + display: flex; + flex-direction: column; &:after { content: " "; position: absolute; @@ -49,7 +51,9 @@ const Card = styled(MuiCard)` } `; -const CardContent = styled(MuiCardContent)``; +const CardContent = styled(MuiCardContent)` + margin-bottom: auto; +`; const CardActions = styled(MuiCardActions)` padding-left: 15px; `; @@ -94,10 +98,6 @@ const ButtonImage = styled.img` } `; -const copyText = (text) => { - navigator.clipboard.writeText(text); -}; - const InfoCard = ({ info }) => { const theme = useTheme(); const { t } = useTranslation(); @@ -157,6 +157,8 @@ const InfoCard = ({ info }) => { icon={chip.icon} text={t(`${info.id}.chips.${i}`)} target={chip.target} + copytext={chip.text} + copymessage={t(chip.message)} /> ))} {info.buttons?.map((button, i) => ( diff --git a/app/src/components/Chip.js b/app/src/components/Chip.js index 04e492af..b92b2af6 100644 --- a/app/src/components/Chip.js +++ b/app/src/components/Chip.js @@ -2,8 +2,8 @@ import React from "react"; import styled from "@emotion/styled"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Chip as MuiChip } from "@mui/material"; - +import { IconButton, Chip as MuiChip, Snackbar } from "@mui/material"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; const Chip = styled(MuiChip)` padding: 4px 4px; margin-right: 16px; @@ -17,18 +17,61 @@ const ListIcon = styled(FontAwesomeIcon)` font-weight: 800; `; -const ContactChip = ({ link, icon, text, target }) => { +const ContactChip = ({ link, icon, text, target, copytext, copymessage }) => { + const [open, setOpen] = React.useState(false); + + const handleClick = () => { + setOpen(true); + }; + + const handleClose = (even, reason) => { + if (reason === "clickaway") { + return; + } + setOpen(false); + }; + + const action = ( + + + + + + ); + + const copyText = (text) => { + if (text !== undefined) { + navigator.clipboard.writeText(text); + setOpen(true); + } + }; + return ( - } - component="a" - href={link} - label={text} - target={target} - clickable - color="primary" - //variant="outlined" - /> + + } + component="a" + href={link} + label={text} + target={target} + onClick={() => copyText(copytext)} + clickable + color="primary" + //variant="outlined" + /> + + ); }; diff --git a/app/src/pages/about.js b/app/src/pages/about.js index cf7152cb..e81467fc 100644 --- a/app/src/pages/about.js +++ b/app/src/pages/about.js @@ -50,6 +50,7 @@ import { faRProject, faSlack, faTwitter, + faXTwitter, } from "@fortawesome/free-brands-svg-icons"; import { purple, blue, red, green, pink, grey } from "@mui/material/colors"; @@ -339,8 +340,9 @@ function About() { size="medium" style={{ right: 16 }} href="https://twitter.com/intent/tweet?screen_name=open_ml" + target="_blank" > - + @@ -349,6 +351,7 @@ function About() { size="medium" style={{ backgroundColor: purple[500], right: 76 }} href="https://join.slack.com/t/openml/shared_invite/enQtODg4NjgzNTE4NjU3LTYwZDFhNzQ5NmE0NjIyNmM3NDMyMjFkZDQ0YWZkYWYxMTIxODFmMDhhMTUzMGYzMmM4NjIzYTZlYjBkOGE5MTQ" + target="_blank" > diff --git a/app/src/pages/terms.js b/app/src/pages/terms.js index 69a51c09..7bb872cd 100644 --- a/app/src/pages/terms.js +++ b/app/src/pages/terms.js @@ -12,15 +12,11 @@ import Wrapper from "../components/Wrapper"; import { useTranslation } from "next-i18next"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { - faBoltLightning, faBookOpen, faChartColumn, - faComments, faCopy, faHeart, faLayerGroup, - faPhoneAlt, - faR, faScaleBalanced, faUniversalAccess, } from "@fortawesome/free-solid-svg-icons"; @@ -31,7 +27,7 @@ import { faPython, faRProject, } from "@fortawesome/free-brands-svg-icons"; -import { blue, green, orange, purple, red } from "@mui/material/colors"; +import { blue, green, orange, purple, red, yellow } from "@mui/material/colors"; import Header from "../components/Header"; import InfoCard from "../components/Card"; export async function getStaticProps({ locale }) { @@ -74,7 +70,8 @@ const contact = { ], }; -const bibtex_openml = `@article{OpenML2013, +const bibtex = { + openml: `@article{OpenML2013, author = {Joaquin Vanschoren and Jan N. van Rijn and Bernd Bischl and Luis Torgo}, title = {OpenML: networked science in machine learning}, journal = {SIGKDD Explorations}, @@ -85,24 +82,61 @@ const bibtex_openml = `@article{OpenML2013, url = {http://doi.acm.org/10.1145/2641190.264119}, doi = {10.1145/2641190.2641198}, publisher = {ACM} -}`; + }`, + python: `@article{OpenMLPython2021, + author = {Matthias Feurer and Jan N. van Rijn and Arlind Kadra and Pieter Gijsbers and Neeratyoy Mallik and Sahithya Ravi and Andreas Mueller and Joaquin Vanschoren and Frank Hutter}, + title = {OpenML-Python: an extensible Python API for OpenML}, + journal = {arXiv}, + volume = {1911.02490}, + number = {}, + year = {2020}, + pages = {}, + url = {https://arxiv.org/pdf/1911.02490.pdf}, + doi = {}, + publisher = {} + }`, + r: ` + @article{OpenMLR2017, + author = {Giuseppe Casalicchio and Jakob Bossek and Michel Lang and Dominik Kirchhoff and Pascal Kerschke and Benjamin Hofner and Heidi Seibold and Joaquin Vanschoren and Bernd Bischl}, + title = {OpenML: An R package to connect to the machine learning platform OpenML}, + journal = {Computational Statistics}, + volume = {32}, + number = {3}, + year = {2017}, + pages = {1-15}, + url = {http://doi.acm.org/10.1007/s00180-017-0742-2}, + doi = {10.1007/s00180-017-0742-2}, + publisher = {Springer Nature} + }`, + benchmark: ` + @article{OpenMLSuites2021, + author = {Bernd Bischl and Giuseppe Casalicchio and Matthias Feurer and Pieter Gijsbers and Frank Hutter and Michel Lang and Rafael Gomes Mantovani and Jan N. van Rijn and Joaquin Vanschoren}, + title = {OpenML: A benchmarking layer on top of OpenML to quickly create, download, and share systematic benchmarks}, + journal = {NeurIPS}, + volume = {}, + number = {}, + year = {2021}, + pages = {}, + url = {https://openreview.net/forum?id=OCrD8ycKjG}, + doi = {}, + publisher = {} + }`, +}; const cite_openml = { id: "terms.cite_openml", icon: faLayerGroup, - iconColor: blue[500], + iconColor: green[500], chips: [ { link: "https://www.kdd.org/exploration_files/15-2-2013-12.pdf#page=51", icon: faBookOpen, target: "_blank", }, - ], - bibtex: [ { - bibtex: { bibtex_openml }, + text: bibtex.openml, + message: "terms.bibtex_copied", icon: faCopy, - target: "_blank", }, ], }; @@ -110,13 +144,18 @@ const cite_openml = { const cite_python = { id: "terms.cite_python", icon: faPython, - iconColor: blue[500], + iconColor: yellow[600], chips: [ { link: "https://jmlr2020.csail.mit.edu/papers/volume22/19-920/19-920.pdf", icon: faBookOpen, target: "_blank", }, + { + text: bibtex.python, + message: "terms.bibtex_copied", + icon: faCopy, + }, ], }; @@ -130,19 +169,29 @@ const cite_r = { icon: faBookOpen, target: "_blank", }, + { + text: bibtex.r, + message: "terms.bibtex_copied", + icon: faCopy, + }, ], }; const cite_benchmark = { id: "terms.cite_benchmark", icon: faChartColumn, - iconColor: blue[400], + iconColor: purple[400], chips: [ { link: "https://datasets-benchmarks-proceedings.neurips.cc/paper_files/paper/2021/hash/c7e1249ffc03eb9ded908c236bd1996d-Abstract-round2.html", icon: faBookOpen, target: "_blank", }, + { + text: bibtex.benchmark, + message: "terms.bibtex_copied", + icon: faCopy, + }, ], }; diff --git a/app/src/theme/variants.js b/app/src/theme/variants.js index d3541df1..203ebe74 100644 --- a/app/src/theme/variants.js +++ b/app/src/theme/variants.js @@ -9,6 +9,8 @@ import { grey, indigo, red, + lightBlue, + deepPurple, } from "@mui/material/colors"; import { THEMES } from "../constants"; import { @@ -52,18 +54,18 @@ const openmlColors = { task: yellow[800], flow: customBlue[800], run: red[400], - collections: purple[400], - benchmarks: pink[400], + collections: pink[400], + benchmarks: purple[400], tasktypes: orange[400], - measures: grey[500], + measures: lightBlue[500], docs: green[400], blog: yellow[700], apis: customBlue[800], contribute: red[400], - meet: purple[400], - about: pink[400], - terms: grey[500], - auth: grey[500], + meet: pink[400], + about: purple[400], + terms: lightBlue[500], + auth: deepPurple[500], }; const openmlIcons = {