Merge pull request #138 from visualize-admin/feat/add-additional-info…

…-to-chart-metadata feat: Display more information in the dataset preview
visualize-admin · Oct 14, 2021 · fd35acd · fd35acd
2 parents fd9e35c + 9337c66
commit fd35acd
Show file tree

Hide file tree

Showing 13 changed files with 115 additions and 39 deletions.
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
@@ -52,26 +52,11 @@ export const ChartFootnotes = ({
             <>
               <Box sx={{ display: "inline", mx: 1 }}>·</Box>
               <Link
+                variant="inline"
+                sx={{ mt: 2 }}
                 href={shareUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                sx={{
-                  display: "inline",
-                  textDecoration: "none",
-                  color: "primary",
-                  textAlign: "left",
-                  fontFamily: "body",
-                  lineHeight: [1, 2, 2],
-                  fontWeight: "regular",
-                  fontSize: [1, 2, 2],
-                  border: "none",
-                  cursor: "pointer",
-                  mt: 2,
-                  p: 0,
-                  "&:hover": {
-                    textDecoration: "underline",
-                  },
-                }}
               >
                 <Trans id="metadata.link.created.with.visualize">
                   Created with visualize.admin.ch

diff --git a/app/components/data-download.tsx b/app/components/data-download.tsx
@@ -1,8 +1,8 @@
 import { Trans } from "@lingui/macro";
-import { Box, Button, Link } from "theme-ui";
 import { csvFormat } from "d3";
 import { saveAs } from "file-saver";
 import { memo, ReactNode, useMemo } from "react";
+import { Box, Button, Link } from "theme-ui";
 import { ChartConfig, ChartFields } from "../configurator";
 import { Observation } from "../domain/data";
 import {
@@ -58,23 +58,8 @@ export const DataDownload = memo(
             <>
               <Box sx={{ display: "inline", mx: 1 }}>·</Box>
               <Link
-                sx={{
-                  display: "inline",
-                  textDecoration: "none",
-                  color: "primary",
-                  textAlign: "left",
-                  fontFamily: "body",
-                  lineHeight: [1, 2, 2],
-                  fontWeight: "regular",
-                  fontSize: [1, 2, 2],
-                  border: "none",
-                  cursor: "pointer",
-                  mt: 2,
-                  p: 0,
-                  "&:hover": {
-                    textDecoration: "underline",
-                  },
-                }}
+                variant="inline"
+                sx={{ mt: 2 }}
                 href={observations.sparqlEditorUrl}
                 target="_blank"
                 rel="noopener noreferrer"

diff --git a/app/configurator/components/dataset-metadata.tsx b/app/configurator/components/dataset-metadata.tsx
@@ -1,6 +1,6 @@
 import { Trans } from "@lingui/macro";
 import { ReactNode } from "react";
-import { Box } from "theme-ui";
+import { Box, Link } from "theme-ui";
 import { Loading } from "../../components/hint";
 import { useFormatDate } from "../../configurator/components/ui-helpers";
 import { useDataCubeMetadataQuery } from "../../graphql/query-hooks";
@@ -59,6 +59,37 @@ export const DataSetMetadata = ({ dataSetIri }: { dataSetIri: string }) => {
         <DataSetMetadataBody>
           {data.dataCubeByIri.version ?? "–"}
         </DataSetMetadataBody>
+
+        <DataSetMetadataTitle>
+          <Trans id="dataset.metadata.email">Contact points</Trans>
+        </DataSetMetadataTitle>
+        <DataSetMetadataBody>
+          {data.dataCubeByIri.contactEmail ? (
+            <DatasetMetadataLink
+              href={`mailto:${data.dataCubeByIri.contactEmail}`}
+              label={
+                data.dataCubeByIri.contactName ??
+                data.dataCubeByIri.contactEmail
+              }
+            />
+          ) : (
+            "–"
+          )}
+        </DataSetMetadataBody>
+
+        <DataSetMetadataTitle>
+          <Trans id="dataset.metadata.landingPage">Further information</Trans>
+        </DataSetMetadataTitle>
+        <DataSetMetadataBody>
+          {data.dataCubeByIri.landingPage ? (
+            <DatasetMetadataLink
+              href={data.dataCubeByIri.landingPage}
+              label={data.dataCubeByIri.landingPage}
+            />
+          ) : (
+            "–"
+          )}
+        </DataSetMetadataBody>
       </Box>
     );
   } else {
@@ -93,3 +124,15 @@ const DataSetMetadataBody = ({ children }: { children: ReactNode }) => (
     {children}
   </Box>
 );
+
+const DatasetMetadataLink = ({
+  href,
+  label,
+}: {
+  href: string;
+  label: string;
+}) => (
+  <Link variant="primary" href={href} target="_blank" rel="noopener noreferrer">
+    {label}
+  </Link>
+);
diff --git a/app/graphql/queries/data-cubes.graphql b/app/graphql/queries/data-cubes.graphql
@@ -70,6 +70,7 @@ query DataCubeMetadata($iri: String!, $locale: String!) {
     version
     contactName
     contactEmail
+    landingPage
     datePublished
     publicationStatus
   }

diff --git a/app/graphql/query-hooks.ts b/app/graphql/query-hooks.ts
@@ -25,6 +25,7 @@ export type DataCube = {
   version?: Maybe<Scalars['String']>;
   contactName?: Maybe<Scalars['String']>;
   contactEmail?: Maybe<Scalars['String']>;
+  landingPage?: Maybe<Scalars['String']>;
   publisher?: Maybe<Scalars['String']>;
   description?: Maybe<Scalars['String']>;
   datePublished?: Maybe<Scalars['String']>;
@@ -221,7 +222,7 @@ export type DataCubeMetadataQueryVariables = Exact<{
 }>;
 
 
-export type DataCubeMetadataQuery = { __typename: 'Query', dataCubeByIri?: Maybe<{ __typename: 'DataCube', iri: string, title: string, description?: Maybe<string>, publisher?: Maybe<string>, version?: Maybe<string>, contactName?: Maybe<string>, contactEmail?: Maybe<string>, datePublished?: Maybe<string>, publicationStatus: DataCubePublicationStatus }> };
+export type DataCubeMetadataQuery = { __typename: 'Query', dataCubeByIri?: Maybe<{ __typename: 'DataCube', iri: string, title: string, description?: Maybe<string>, publisher?: Maybe<string>, version?: Maybe<string>, contactName?: Maybe<string>, contactEmail?: Maybe<string>, landingPage?: Maybe<string>, datePublished?: Maybe<string>, publicationStatus: DataCubePublicationStatus }> };
 
 export type DataCubeMetadataWithComponentValuesQueryVariables = Exact<{
   iri: Scalars['String'];
@@ -384,6 +385,7 @@ export const DataCubeMetadataDocument = gql`
     version
     contactName
     contactEmail
+    landingPage
     datePublished
     publicationStatus
   }

diff --git a/app/graphql/resolver-types.ts b/app/graphql/resolver-types.ts
@@ -30,6 +30,7 @@ export type DataCube = {
   version?: Maybe<Scalars['String']>;
   contactName?: Maybe<Scalars['String']>;
   contactEmail?: Maybe<Scalars['String']>;
+  landingPage?: Maybe<Scalars['String']>;
   publisher?: Maybe<Scalars['String']>;
   description?: Maybe<Scalars['String']>;
   datePublished?: Maybe<Scalars['String']>;
@@ -283,6 +284,7 @@ export type DataCubeResolvers<ContextType = any, ParentType extends ResolversPar
   version?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   contactName?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   contactEmail?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  landingPage?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   publisher?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   description?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   datePublished?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;

diff --git a/app/graphql/resolvers.ts b/app/graphql/resolvers.ts
@@ -111,6 +111,7 @@ const DataCube: DataCubeResolvers = {
   publisher: ({ data: { publisher } }) => publisher ?? null,
   contactName: ({ data: { contactPoint } }) => contactPoint?.name ?? null,
   contactEmail: ({ data: { contactPoint } }) => contactPoint?.email ?? null,
+  landingPage: ({ data: { landingPage } }) => landingPage ?? null,
   publicationStatus: ({ data: { publicationStatus } }) => publicationStatus,
   description: ({ data: { description } }) => description ?? null,
   datePublished: ({ data: { datePublished } }) => datePublished ?? null,

diff --git a/app/graphql/schema.graphql b/app/graphql/schema.graphql
@@ -25,6 +25,7 @@ type DataCube {
   version: String
   contactName: String
   contactEmail: String
+  landingPage: String
   publisher: String
   description: String
   datePublished: String

diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
@@ -565,6 +565,14 @@ msgstr "Erstellungsdatum"
 msgid "dataset.metadata.description"
 msgstr "Beschreibung"
 
+#: app/configurator/components/dataset-metadata.tsx:64
+msgid "dataset.metadata.email"
+msgstr "Kontaktstellen"
+
+#: app/configurator/components/dataset-metadata.tsx:78
+msgid "dataset.metadata.landingPage"
+msgstr "Weitere Informationen"
+
 #: app/configurator/components/dataset-metadata.tsx:34
 msgid "dataset.metadata.source"
 msgstr "Quelle"

diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
@@ -565,6 +565,14 @@ msgstr "Date created"
 msgid "dataset.metadata.description"
 msgstr "Description"
 
+#: app/configurator/components/dataset-metadata.tsx:64
+msgid "dataset.metadata.email"
+msgstr "Contact points"
+
+#: app/configurator/components/dataset-metadata.tsx:78
+msgid "dataset.metadata.landingPage"
+msgstr "Further information"
+
 #: app/configurator/components/dataset-metadata.tsx:34
 msgid "dataset.metadata.source"
 msgstr "Source"

diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po
@@ -565,6 +565,14 @@ msgstr "Date de création"
 msgid "dataset.metadata.description"
 msgstr "Description"
 
+#: app/configurator/components/dataset-metadata.tsx:64
+msgid "dataset.metadata.email"
+msgstr "Points de contact"
+
+#: app/configurator/components/dataset-metadata.tsx:78
+msgid "dataset.metadata.landingPage"
+msgstr "Informations complémentaires"
+
 #: app/configurator/components/dataset-metadata.tsx:34
 msgid "dataset.metadata.source"
 msgstr "Source"

diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po
@@ -565,6 +565,14 @@ msgstr "Data di creazione"
 msgid "dataset.metadata.description"
 msgstr "Descrizione"
 
+#: app/configurator/components/dataset-metadata.tsx:64
+msgid "dataset.metadata.email"
+msgstr "Punti di contatto"
+
+#: app/configurator/components/dataset-metadata.tsx:78
+msgid "dataset.metadata.landingPage"
+msgstr "Addizionali informazioni"
+
 #: app/configurator/components/dataset-metadata.tsx:34
 msgid "dataset.metadata.source"
 msgstr "Fonte"

diff --git a/app/themes/federal.ts b/app/themes/federal.ts
@@ -70,8 +70,7 @@ export const theme: Theme = {
     warningLight: "#fffab2",
   },
   fonts: {
-    body:
-      "FrutigerNeue, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
+    body: "FrutigerNeue, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
     monospace: "Menlo, monospace",
   },
   fontSizes: [
@@ -362,6 +361,31 @@ export const theme: Theme = {
       },
     },
   },
+  links: {
+    primary: {
+      color: "primary",
+      textDecoration: "none",
+      wordBreak: "break-word",
+      "&:hover": {
+        textDecoration: "underline",
+      },
+    },
+    inline: {
+      display: "inline",
+      textDecoration: "none",
+      color: "primary",
+      textAlign: "left",
+      fontFamily: "body",
+      lineHeight: [1, 2, 2],
+      fontWeight: "regular",
+      fontSize: [1, 2, 2],
+      border: "none",
+      cursor: "pointer",
+      "&:hover": {
+        textDecoration: "underline",
+      },
+    },
+  },
 };
 
 /**