collect dataset attributions from metadata

Signed-off-by: Ihor Dykhta <[email protected]>

src/components/package.json

@@ -125,7 +125,7 @@
     "react-virtualized": "^9.22.5",
     "react-vis": "1.11.7",
     "redux": "^4.2.1",
-    "reselect": "^4.0.0",
+    "reselect": "^4.1.0",
     "styled-components": "6.1.8",
     "suncalc": "^1.9.0",
     "viewport-mercator-project": "^6.0.0"

src/components/src/kepler-gl.tsx

@@ -11,7 +11,13 @@ import {connect as keplerGlConnect} from './connect/keplergl-connect';
 import {IntlProvider} from 'react-intl';
 import {messages} from '@kepler.gl/localization';
 import {RootContext, FeatureFlagsContextProvider, FeatureFlags} from './context';
-import {OnErrorCallBack, OnSuccessCallBack, Viewport} from '@kepler.gl/types';
+import {
+  AttributionWithStyle,
+  DatasetAttribution,
+  OnErrorCallBack,
+  OnSuccessCallBack,
+  Viewport
+} from '@kepler.gl/types';
 
 import {
   MapStateActions,
@@ -157,6 +163,7 @@ export const mapFieldsSelector = (props: KeplerGLProps, index = 0) => ({
   mapboxApiAccessToken: props.mapboxApiAccessToken,
   mapboxApiUrl: props.mapboxApiUrl ? props.mapboxApiUrl : DEFAULT_KEPLER_GL_PROPS.mapboxApiUrl,
   mapState: mapStateSelector(props, index),
+  datasetAttributions: attributionSelector(props).sources,
   mapStyle: props.mapStyle,
   onDeckInitialized: props.onDeckInitialized,
   onViewStateChange: props.onViewStateChange,
@@ -282,6 +289,45 @@ export const geoCoderPanelSelector = (
   appWidth: dimensions.width
 });
 
+/**
+ * Returns array of unique dataset attributions, each with title and url properties.
+ */
+export const datasetAttributionSelector = createSelector(
+  state => {
+    return state.visState.datasets;
+  },
+  (datasets: any[]) => {
+    // TODO collect attributions from layers, and merge with dataset attributions here
+    const uniqueAttributions: DatasetAttribution[] = [];
+    Object.keys(datasets).forEach(key => {
+      const ds = datasets[key];
+      const attributions = ds?.metadata?.attributions;
+      if (Array.isArray(attributions)) {
+        attributions.forEach(attribution => {
+          if (typeof attribution === 'string') {
+            uniqueAttributions.push({title: attribution, url: null});
+          }
+        });
+      }
+    });
+    return uniqueAttributions;
+  }
+);
+
+/**
+ * Deduplicated dataset and layer text attributions and logos.
+ * Returns text attributions and logos to display.
+ */
+export const attributionSelector = createSelector(
+  [datasetAttributionSelector],
+  datasetAttributions => {
+    const uniqueTextAttributions = [...datasetAttributions];
+    const logos: AttributionWithStyle[] = [];
+
+    return {sources: uniqueTextAttributions, logos};
+  }
+);
+
 export const notificationPanelSelector = (props: KeplerGLProps) => ({
   removeNotification: props.uiStateActions.removeNotification,
   notifications: props.uiState.notifications
@@ -506,6 +552,7 @@ function KeplerGlFactory(
       const modalContainerFields = modalContainerSelector(this.props, this.root.current);
       const geoCoderPanelFields = geoCoderPanelSelector(this.props, dimensions);
       const notificationPanelFields = notificationPanelSelector(this.props);
+
       const mapContainers = !isSplit
         ? [
             <MapContainer

src/components/src/map-container.tsx

@@ -33,7 +33,14 @@ import {
   EditorLayerUtils,
   AggregatedBin
 } from '@kepler.gl/layers';
-import {MapState, MapControls, Viewport, SplitMap, SplitMapLayers} from '@kepler.gl/types';
+import {
+  DatasetAttribution,
+  MapState,
+  MapControls,
+  Viewport,
+  SplitMap,
+  SplitMapLayers
+} from '@kepler.gl/types';
 import {
   errorNotification,
   setLayerBlending,
@@ -71,7 +78,6 @@ import {
 import {MapViewStateContext} from './map-view-state-context';
 
 import ErrorBoundary from './common/error-boundary';
-import {DatasetAttribution} from './types';
 import {LOCALE_CODES} from '@kepler.gl/localization';
 import {MapView} from '@deck.gl/core';
 import {
@@ -186,6 +192,7 @@ const StyledDatasetAttributionsContainer = styled.div<StyledDatasetAttributionsC
   overflow: hidden;
   color: ${props => props.theme.labelColor};
   margin-right: 2px;
+  margin-bottom: 1px;
   line-height: ${props => (props.isPalm ? '1em' : '1.4em')};
 
   &:hover {

src/components/src/types.ts

@@ -48,8 +48,3 @@ export type SidePanelProps = {
   onSaveMap?: () => void;
   version: string;
 };
-
-export type DatasetAttribution = {
-  title: string;
-  url: string;
-};

src/layers/package.json

@@ -79,7 +79,7 @@
     "react": "^18.2.0",
     "react-intl": "^6.3.0",
     "react-markdown": "^6.0.3",
-    "reselect": "^4.0.0",
+    "reselect": "^4.1.0",
     "s2-geometry": "^1.2.10",
     "styled-components": "6.1.8",
     "type-analyzer": "0.4.0",

src/layers/src/vector-tile/utils/vector-tile-utils.ts

@@ -70,6 +70,7 @@ type VectorTileField = {
 };
 
 export type VectorTileMetadata = {
+  attributions?: unknown[];
   metaJson: any | null;
   bounds: number[] | null;
   center: number[] | null;
@@ -269,6 +270,7 @@ function parseMetadataTippecanoeFromDataSource(
   }
 
   let result: TilesetMetadata = {
+    attributions: [],
     metaJson: null,
     bounds: null,
     center: null,
@@ -317,6 +319,10 @@ function parseMetadataTippecanoeFromDataSource(
 
   result = {
     ...result,
+    attributions:
+      pmTileMetadata.attributions ||
+      (mvtMetadata.htmlAttribution ? [mvtMetadata.htmlAttribution] : undefined) ||
+      [],
     ...parseMetaJson(result.metaJson)
   };
 

src/reducers/package.json

@@ -74,7 +74,7 @@
     "react-palm": "^3.3.8",
     "redux": "^4.2.1",
     "redux-actions": "^2.2.1",
-    "reselect": "^4.0.0"
+    "reselect": "^4.1.0"
   },
   "overrides": {
     "@types/lodash": "4.17.5"

src/types/datasets.d.ts

@@ -13,3 +13,14 @@ export type ZoomStopsConfig = {
   enabled?: boolean;
   stops: ZoomStops | null;
 };
+
+export type DatasetAttribution = {
+  title: string;
+  url: string | null;
+};
+
+export type AttributionWithStyle = DatasetAttribution & {
+  logoUrl: string;
+  height?: number;
+  bottom?: number;
+};

yarn.lock

@@ -3315,7 +3315,7 @@ __metadata:
     react-virtualized: "npm:^9.22.5"
     react-vis: "npm:1.11.7"
     redux: "npm:^4.2.1"
-    reselect: "npm:^4.0.0"
+    reselect: "npm:^4.1.0"
     styled-components: "npm:6.1.8"
     suncalc: "npm:^1.9.0"
     viewport-mercator-project: "npm:^6.0.0"
@@ -3461,7 +3461,7 @@ __metadata:
     react: "npm:^18.2.0"
     react-intl: "npm:^6.3.0"
     react-markdown: "npm:^6.0.3"
-    reselect: "npm:^4.0.0"
+    reselect: "npm:^4.1.0"
     s2-geometry: "npm:^1.2.10"
     styled-components: "npm:6.1.8"
     type-analyzer: "npm:0.4.0"
@@ -3555,7 +3555,7 @@ __metadata:
     react-palm: "npm:^3.3.8"
     redux: "npm:^4.2.1"
     redux-actions: "npm:^2.2.1"
-    reselect: "npm:^4.0.0"
+    reselect: "npm:^4.1.0"
   languageName: unknown
   linkType: soft
 
@@ -26256,7 +26256,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reselect@npm:^4.0.0, reselect@npm:^4.1.8":
+"reselect@npm:^4.0.0, reselect@npm:^4.1.0, reselect@npm:^4.1.8":
   version: 4.1.8
   resolution: "reselect@npm:4.1.8"
   checksum: 10c0/06a305a504affcbb67dd0561ddc8306b35796199c7e15b38934c80606938a021eadcf68cfd58e7bb5e17786601c37602a3362a4665c7bf0a96c1041ceee9d0b7