Merge pull request #575 from visualize-admin/link-cube-metadata

visualize-admin · May 31, 2022 · bddb1a6 · bddb1a6 · vercel · May 31, 2022
2 parents d73cd94 + fbc0792
commit bddb1a6
Show file tree

Hide file tree

Showing 14 changed files with 573 additions and 468 deletions.
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
@@ -1,6 +1,6 @@
 import { Trans } from "@lingui/macro";
-import { Box, Button, Typography } from "@mui/material";
-import { useEffect, useState } from "react";
+import { Box, Button, Link, Typography } from "@mui/material";
+import { useEffect, useState, useMemo } from "react";
 
 import { useChartTablePreview } from "@/components/chart-table-preview";
 import { DataDownloadMenu, RunSparqlQuery } from "@/components/data-download";
@@ -11,6 +11,7 @@ import {
 } from "@/graphql/query-hooks";
 import { getChartIcon, Icon } from "@/icons";
 import { useLocale } from "@/locales/use-locale";
+import { makeOpenDataLink } from "@/utils/opendata";
 
 import { useQueryFilters } from "../charts/shared/chart-helpers";
 
@@ -47,13 +48,29 @@ export const ChartFootnotes = ({
   const sparqlEditorUrl =
     visibleData?.dataCubeByIri?.observations.sparqlEditorUrl;
 
+  const cubeLink = useMemo(() => {
+    return makeOpenDataLink(locale, data?.dataCubeByIri);
+  }, [locale, data?.dataCubeByIri]);
+
   if (data?.dataCubeByIri) {
     const { dataCubeByIri } = data;
 
     return (
       <Box sx={{ mt: 2 }}>
         <Typography component="div" variant="caption" color="grey.600">
-          <Trans id="metadata.dataset">Dataset</Trans>: {dataCubeByIri.title}
+          <Trans id="metadata.dataset">Dataset</Trans>:{" "}
+          {cubeLink ? (
+            <Link target="_blank" href={cubeLink} rel="noreferrer">
+              {dataCubeByIri.title}{" "}
+              <Icon
+                name="linkExternal"
+                size={12}
+                style={{ display: "inline" }}
+              />
+            </Link>
+          ) : (
+            dataCubeByIri.title
+          )}
         </Typography>
 
         <Typography component="div" variant="caption" color="grey.600">

diff --git a/app/components/form.tsx b/app/components/form.tsx
@@ -62,7 +62,7 @@ export const Radio = ({
 }: { label: string; disabled?: boolean } & FieldProps) => {
   return (
     <FormControlLabel
-      label={label}
+      label={label || "-"}
       htmlFor={`${name}-${value}`}
       componentsProps={{
         typography: {
@@ -117,7 +117,7 @@ export const Checkbox = ({
   smaller?: boolean;
 } & FieldProps) => (
   <FormControlLabel
-    label={label}
+    label={label || "-"}
     htmlFor={`${name}-${label}`}
     disabled={disabled}
     sx={{ display: "flex" }}

diff --git a/app/configurator/components/dataset-metadata.tsx b/app/configurator/components/dataset-metadata.tsx
@@ -1,5 +1,12 @@
 import { Trans } from "@lingui/macro";
-import { Box, BoxProps, Link, Typography } from "@mui/material";
+import {
+  Box,
+  BoxProps,
+  Link,
+  LinkProps,
+  Typography,
+  TypographyProps,
+} from "@mui/material";
 import { Stack } from "@mui/material";
 import { Link as MUILink } from "@mui/material";
 import NextLink from "next/link";
@@ -15,7 +22,9 @@ import {
   DataCubeMetadataQuery,
   useDataCubeMetadataQuery,
 } from "@/graphql/query-hooks";
+import { Icon } from "@/icons";
 import { useLocale } from "@/locales/use-locale";
+import { makeOpenDataLink } from "@/utils/opendata";
 import truthy from "@/utils/truthy";
 
 export const DataSetMetadata = ({
@@ -31,6 +40,7 @@ export const DataSetMetadata = ({
     variables: { iri: dataSetIri, locale },
   });
   const cube = data?.dataCubeByIri;
+  const openDataLink = makeOpenDataLink(locale, cube);
   if (fetching || error || !cube) {
     // The error and loading are managed by the component
     // displayed in the middle panel
@@ -86,17 +96,33 @@ export const DataSetMetadata = ({
       </DatasetMetadataBody>
 
       <DatasetMetadataTitle>
-        <Trans id="dataset.metadata.landingPage">Further information</Trans>
+        <Trans id="dataset.metadata.furtherinformation">
+          Further information
+        </Trans>
       </DatasetMetadataTitle>
-      <DatasetMetadataBody>
+      <DatasetMetadataBody sx={{ mb: 5 }}>
         {cube.landingPage ? (
           <DatasetMetadataLink
             href={cube.landingPage}
-            label={cube.landingPage}
+            external
+            label={
+              <Trans id="dataset.metadata.landingpage">Landing page</Trans>
+            }
           />
         ) : (
           "–"
         )}
+
+        {openDataLink ? (
+          <>
+            <br />
+            <DatasetMetadataLink
+              external
+              label="OpenData.swiss"
+              href={openDataLink}
+            />
+          </>
+        ) : null}
       </DatasetMetadataBody>
       <DatasetTags cube={cube} />
     </MotionBox>
@@ -116,7 +142,13 @@ const DatasetMetadataTitle = ({ children }: { children: ReactNode }) => (
     {children}
   </Typography>
 );
-const DatasetMetadataBody = ({ children }: { children: ReactNode }) => (
+const DatasetMetadataBody = ({
+  children,
+  sx,
+}: {
+  children: ReactNode;
+  sx?: TypographyProps["sx"];
+}) => (
   <Typography
     variant="body2"
     sx={{
@@ -125,6 +157,7 @@ const DatasetMetadataBody = ({ children }: { children: ReactNode }) => (
       fontSize: ["0.875rem", "0.875rem", "0.875rem"],
       color: "grey.900",
       mb: 3,
+      ...sx,
     }}
   >
     {children}
@@ -134,18 +167,24 @@ const DatasetMetadataBody = ({ children }: { children: ReactNode }) => (
 const DatasetMetadataLink = ({
   href,
   label,
+  external,
+  ...props
 }: {
   href: string;
-  label: string;
-}) => (
+  label: string | React.ReactElement;
+  external?: boolean;
+} & LinkProps) => (
   <Link
     underline="hover"
     color="primary"
     href={href}
     target="_blank"
     rel="noopener noreferrer"
+    sx={{ display: "inline-flex", alignItems: "center", gap: 1 }}
+    {...props}
   >
     {label}
+    {external ? <Icon name="linkExternal" size={12} /> : null}
   </Link>
 );
 

diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx
@@ -87,6 +87,9 @@ const renderDimensionTree = (tree: HierarchyValue[], depth = 0) => {
   return (
     <>
       {tree.map((tv) => {
+        if (!tv.label) {
+          return null;
+        }
         return (
           <Accordion key={tv.value} initialExpanded>
             <Stack spacing={0.5}>

diff --git a/app/graphql/queries/data-cubes.graphql b/app/graphql/queries/data-cubes.graphql
@@ -86,6 +86,7 @@ query DataCubePreviewObservations(
 query DataCubeMetadata($iri: String!, $locale: String!, $latest: Boolean) {
   dataCubeByIri(iri: $iri, locale: $locale, latest: $latest) {
     iri
+    identifier
     title
     description
     publisher
@@ -117,6 +118,10 @@ query DataCubeMetadataWithComponentValues(
     iri
     title
     publisher
+    identifier
+    creator {
+      iri
+    }
     dimensions {
       ...dimensionMetaData
     }

diff --git a/app/graphql/query-hooks.ts b/app/graphql/query-hooks.ts
@@ -23,6 +23,7 @@ export type Scalars = {
 export type DataCube = {
   __typename: 'DataCube';
   iri: Scalars['String'];
+  identifier?: Maybe<Scalars['String']>;
   title: Scalars['String'];
   version?: Maybe<Scalars['String']>;
   contactName?: Maybe<Scalars['String']>;
@@ -397,7 +398,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>, landingPage?: Maybe<string>, expires?: Maybe<string>, datePublished?: Maybe<string>, publicationStatus: DataCubePublicationStatus, themes: Array<{ __typename: 'DataCubeTheme', iri: string, label?: Maybe<string> }>, creator?: Maybe<{ __typename: 'DataCubeOrganization', iri: string, label?: Maybe<string> }> }> };
+export type DataCubeMetadataQuery = { __typename: 'Query', dataCubeByIri?: Maybe<{ __typename: 'DataCube', iri: string, identifier?: Maybe<string>, title: string, description?: Maybe<string>, publisher?: Maybe<string>, version?: Maybe<string>, contactName?: Maybe<string>, contactEmail?: Maybe<string>, landingPage?: Maybe<string>, expires?: Maybe<string>, datePublished?: Maybe<string>, publicationStatus: DataCubePublicationStatus, themes: Array<{ __typename: 'DataCubeTheme', iri: string, label?: Maybe<string> }>, creator?: Maybe<{ __typename: 'DataCubeOrganization', iri: string, label?: Maybe<string> }> }> };
 
 export type DataCubeMetadataWithComponentValuesQueryVariables = Exact<{
   iri: Scalars['String'];
@@ -407,7 +408,7 @@ export type DataCubeMetadataWithComponentValuesQueryVariables = Exact<{
 }>;
 
 
-export type DataCubeMetadataWithComponentValuesQuery = { __typename: 'Query', dataCubeByIri?: Maybe<{ __typename: 'DataCube', iri: string, title: string, publisher?: Maybe<string>, dimensions: Array<(
+export type DataCubeMetadataWithComponentValuesQuery = { __typename: 'Query', dataCubeByIri?: Maybe<{ __typename: 'DataCube', iri: string, title: string, publisher?: Maybe<string>, identifier?: Maybe<string>, creator?: Maybe<{ __typename: 'DataCubeOrganization', iri: string }>, dimensions: Array<(
       { __typename: 'GeoCoordinatesDimension' }
       & DimensionMetaData_GeoCoordinatesDimension_Fragment
     ) | (
@@ -655,6 +656,7 @@ export const DataCubeMetadataDocument = gql`
     query DataCubeMetadata($iri: String!, $locale: String!, $latest: Boolean) {
   dataCubeByIri(iri: $iri, locale: $locale, latest: $latest) {
     iri
+    identifier
     title
     description
     publisher
@@ -686,6 +688,10 @@ export const DataCubeMetadataWithComponentValuesDocument = gql`
     iri
     title
     publisher
+    identifier
+    creator {
+      iri
+    }
     dimensions {
       ...dimensionMetaData
     }

diff --git a/app/graphql/resolver-types.ts b/app/graphql/resolver-types.ts
@@ -28,6 +28,7 @@ export type Scalars = {
 export type DataCube = {
   __typename?: 'DataCube';
   iri: Scalars['String'];
+  identifier?: Maybe<Scalars['String']>;
   title: Scalars['String'];
   version?: Maybe<Scalars['String']>;
   contactName?: Maybe<Scalars['String']>;
@@ -462,6 +463,7 @@ export type ResolversParentTypes = ResolversObject<{
 
 export type DataCubeResolvers<ContextType = any, ParentType extends ResolversParentTypes['DataCube'] = ResolversParentTypes['DataCube']> = ResolversObject<{
   iri?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  identifier?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   title?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   version?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   contactName?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;

diff --git a/app/graphql/resolvers.ts b/app/graphql/resolvers.ts
@@ -226,6 +226,7 @@ const DataCube: DataCubeResolvers = {
   iri: ({ data: { iri } }) => iri,
   title: ({ data: { title } }) => title,
   version: ({ data: { version } }) => version ?? null,
+  identifier: ({ data: { identifier } }) => identifier ?? null,
   publisher: ({ data: { publisher } }) => publisher ?? null,
   contactName: ({ data: { contactPoint } }) => contactPoint?.name ?? null,
   contactEmail: ({ data: { contactPoint } }) => contactPoint?.email ?? null,

diff --git a/app/graphql/schema.graphql b/app/graphql/schema.graphql
@@ -23,6 +23,7 @@ enum DataCubePublicationStatus {
 
 type DataCube {
   iri: String!
+  identifier: String
   title: String!
   version: String
   contactName: String