CORE-1967 Update LocalContexts details dialog and icon display

Improved the LocalContexts label/notice icon sizing. Added a link to the LocalContextsHub project in the details dialog.
cyverse-de · Feb 15, 2024 · 3fac779 · 3fac779
1 parent 7095bc3
commit 3fac779
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/public/static/locales/en/localcontexts.json b/public/static/locales/en/localcontexts.json
@@ -0,0 +1,3 @@
+{
+    "projectMoreInfoWithLink": "For more information on the <ExternalLink href=\"https://localcontexts.org\">Local Contexts</ExternalLink> project for this data, please visit the project's page: <ProjectLink>{{projectTitle}}</ProjectLink>"
+}
diff --git a/src/components/metadata/LocalContextsLabelDisplay.js b/src/components/metadata/LocalContextsLabelDisplay.js
@@ -12,7 +12,10 @@ import {
     useTheme,
 } from "@mui/material";
 
+import { Trans, useTranslation } from "i18n";
+
 import DEDialog from "components/utils/DEDialog";
+import ExternalLink from "components/utils/ExternalLink";
 
 import {
     LOCAL_CONTEXTS_QUERY_KEY,
@@ -26,7 +29,9 @@ const sizeToSpacing = (size, theme) =>
         ? theme.spacing(3)
         : theme.spacing(5);
 
-const LocalContextsLabel = ({ baseId, label, size = "medium" }) => {
+const LocalContextsLabel = ({ baseId, label, project, size = "medium" }) => {
+    const { t } = useTranslation("localcontexts");
+
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const theme = useTheme();
     const labelURI = label.svg_url || label.img_url;
@@ -38,7 +43,8 @@ const LocalContextsLabel = ({ baseId, label, size = "medium" }) => {
                     <img
                         alt={label.name}
                         src={labelURI}
-                        width={sizeToSpacing(size, theme)}
+                        width="auto"
+                        height={sizeToSpacing(size, theme)}
                     />
                 </IconButton>
             </Tooltip>
@@ -48,19 +54,44 @@ const LocalContextsLabel = ({ baseId, label, size = "medium" }) => {
                 title={label.name}
                 onClose={() => setDialogOpen(false)}
             >
-                <Card sx={{ display: "flex" }}>
-                    <CardMedia
-                        component="img"
-                        title={label.name}
-                        image={labelURI}
-                        sx={{
-                            width: theme.spacing(16),
-                            height: theme.spacing(16),
-                        }}
-                    />
+                <Card>
+                    <Stack direction={"row"}>
+                        <CardMedia
+                            component="img"
+                            title={label.name}
+                            image={labelURI}
+                            sx={{
+                                width: "auto",
+                                height: theme.spacing(16),
+                            }}
+                        />
+                        <CardContent>
+                            <Typography
+                                sx={{
+                                    mb: theme.spacing(2),
+                                    textWrap: "balance",
+                                }}
+                            >
+                                {label.label_text || label.default_text}
+                            </Typography>
+                        </CardContent>
+                    </Stack>
+
                     <CardContent>
-                        <Typography sx={{ textWrap: "balance" }}>
-                            {label.default_text}
+                        <Typography>
+                            <Trans
+                                t={t}
+                                i18nKey="projectMoreInfoWithLink"
+                                values={{ projectTitle: project.title }}
+                                components={{
+                                    ExternalLink: <ExternalLink />,
+                                    ProjectLink: (
+                                        <ExternalLink
+                                            href={project.project_page}
+                                        />
+                                    ),
+                                }}
+                            />
                         </Typography>
                     </CardContent>
                 </Card>
@@ -113,6 +144,7 @@ const LocalContextsLabelDisplay = ({ rightsURI, size = "medium" }) => {
                     baseId={label.unique_id || label.img_url}
                     size={size}
                     label={label}
+                    project={project}
                 />
             ))}
         </Stack>

diff --git a/src/pages/data/ds/[...pathItems].js b/src/pages/data/ds/[...pathItems].js
@@ -205,6 +205,7 @@ export async function getServerSideProps(context) {
             title,
             ...(await serverSideTranslations(locale, [
                 "data",
+                "localcontexts",
                 "metadata",
                 "upload",
                 "urlImport",