Restructuring of components and cleanup of dataset page

app/src/components/Card.js

@@ -7,8 +7,6 @@ import { useTheme } from "@mui/material/styles";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import NextLink from "next/link";
 
-import Chip from "../components/Chip";
-
 import {
   Button,
   Card as MuiCard,
@@ -21,8 +19,13 @@ import {
   ListItemText as MuiListItemText,
   Typography as MuiTypography,
   useMediaQuery,
+  IconButton,
+  Chip as MuiChip,
+  Snackbar,
 } from "@mui/material";
 
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+
 const Card = styled(MuiCard)`
   ${spacing};
   position: relative;
@@ -76,19 +79,6 @@ const ListIcon = styled(FontAwesomeIcon)`
   margin-right: 10;
 `;
 
-const CardItem = ({ link, icon, color, text }) => {
-  return (
-    <ListItemButton href={link}>
-      <ListItemIcon>
-        <ListIcon icon={icon} size="2x" style={{ color: color }} />
-      </ListItemIcon>
-      <ListItemText>
-        <Markdown>{text}</Markdown>
-      </ListItemText>
-    </ListItemButton>
-  );
-};
-
 const TitleIcon = styled(FontAwesomeIcon)`
   padding-right: 15px;
 `;
@@ -107,6 +97,91 @@ const ButtonImage = styled.img`
   }
 `;
 
+const Chip = styled(MuiChip)`
+  padding: 4px 4px;
+  margin-right: 16px;
+  margin-bottom: 16px;
+  font-size: 100%;
+`;
+
+const CardItem = ({ link, icon, color, text }) => {
+  return (
+    <ListItemButton href={link}>
+      <ListItemIcon>
+        <ListIcon icon={icon} size="2x" style={{ color: color }} />
+      </ListItemIcon>
+      <ListItemText>
+        <Markdown>{text}</Markdown>
+      </ListItemText>
+    </ListItemButton>
+  );
+};
+
+export const ActionChip = ({
+  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 = (
+    <React.Fragment>
+      <IconButton
+        size="small"
+        aria-label="close"
+        color="inherit"
+        onClick={handleClose}
+      >
+        <FontAwesomeIcon icon={faXmark} size="lg" />
+      </IconButton>
+    </React.Fragment>
+  );
+
+  const copyText = (text) => {
+    if (text !== undefined) {
+      navigator.clipboard.writeText(text);
+      setOpen(true);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <Chip
+        icon={<ListIcon icon={icon} size="lg" style={{ marginRight: 0 }} />}
+        component="a"
+        href={link}
+        label={text}
+        target={target}
+        onClick={() => copyText(copytext)}
+        clickable
+        color="primary"
+        //variant="outlined"
+      />
+      <Snackbar
+        open={open}
+        autoHideDuration={6000}
+        onClose={handleClose}
+        message={copymessage}
+        action={action}
+      />
+    </React.Fragment>
+  );
+};
+
 const InfoCard = ({ info }) => {
   const theme = useTheme();
   const { t } = useTranslation();
@@ -160,7 +235,7 @@ const InfoCard = ({ info }) => {
             </NextLink>
           ))}
           {info.chips?.map((chip, i) => (
-            <Chip
+            <ActionChip
               key={chip.link + t(`${info.id}.chips.${i}`)}
               link={chip.link}
               icon={chip.icon}

app/src/components/MetaItems.js

@@ -14,6 +14,7 @@ import {
   faFlag,
   faHeart,
   faIdBadge,
+  faQuestion,
   faStar,
   faTable,
   faThumbsDown,

app/src/components/Property.js

@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { Tooltip } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const Icon = styled(FontAwesomeIcon)`
+  padding-right: 0.5em;
+`;
+
+const Property = ({ label, value, color, icon }) => {
+  return (
+    <Tooltip title={label} placement="top-start">
+      <span
+        style={{
+          paddingRight: 15,
+          paddingBottom: 5,
+          display: "inline-block",
+        }}
+      >
+        {icon && <Icon icon={icon} color={color} />}
+        {value}
+      </span>
+    </Tooltip>
+  );
+};
+
+export default Property;

app/src/components/pages/landing/Lifecycle.js → app/src/components/landing/Lifecycle.js

@@ -4,7 +4,7 @@ import { useTranslation } from "next-i18next";
 
 import { spacing } from "@mui/system";
 import { Grid, Container, Typography } from "@mui/material";
-import InfoCard from "../../Card";
+import InfoCard from "../Card";
 
 import { faCogs, faDatabase, faFlask } from "@fortawesome/free-solid-svg-icons";
 import { purple, blue, red, yellow, green, orange } from "@mui/material/colors";

app/src/pages/about.js

@@ -53,7 +53,7 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 
 import { purple, blue, red, green, pink, grey } from "@mui/material/colors";
-import Chip from "../components/Chip";
+import { ActionChip } from "../components/Card";
 
 // Server-side translation
 import { useTranslation } from "next-i18next";
@@ -501,7 +501,7 @@ function About() {
                   </ResultsWrapper>
                 </SearchProvider>
               </Grid>
-              <Chip
+              <ActionChip
                 key="join_core"
                 link="https://docs.openml.org/Governance/"
                 icon={faUsers}

app/src/pages/apis.js

@@ -52,7 +52,7 @@ SyntaxHighlighter.registerLanguage("java", java);
 import SwaggerUI from "swagger-ui-react";
 import "swagger-ui-react/swagger-ui.css";
 import "swagger-ui-themes/themes/3.x/theme-material.css";
-import StyledSwaggerUI from "../components/pages/apis/SwaggerUI";
+import StyledSwaggerUI from "../components/apis/SwaggerUI";
 
 // Server-side translation
 import { useTranslation } from "next-i18next";
@@ -67,10 +67,10 @@ export async function getStaticProps({ locale }) {
 }
 
 // Code examples
-import * as PythonExamples from "../components/pages/apis/pythonCodeExamples";
-import * as RExamples from "../components/pages/apis/rCodeExamples";
-import * as JuliaExamples from "../components/pages/apis/juliaCodeExamples";
-import * as JavaExamples from "../components/pages/apis/javaCodeExamples";
+import * as PythonExamples from "../components/apis/pythonCodeExamples";
+import * as RExamples from "../components/apis/rCodeExamples";
+import * as JuliaExamples from "../components/apis/juliaCodeExamples";
+import * as JavaExamples from "../components/apis/javaCodeExamples";
 import InfoCard from "../components/Card";
 import { faRust } from "@fortawesome/free-brands-svg-icons";
 import Wrapper from "../components/Wrapper";