@carto/kepler.gl 0.0.80 → 0.1.0-alpha.1

package/src/components/modals/status-panel.tsx

@@ -0,0 +1,106 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {ComponentType} from 'react';
+import styled from 'styled-components';
+import {MapIcon} from 'components/common/icons';
+import {StyledExportSection} from 'components/common/styled-components';
+import ErrorDisplay from './error-display';
+import {FormattedMessage} from 'localization';
+import {IconProps} from 'cloud-providers/provider';
+
+const StyledUploader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+const StyledMapIcon = styled.div`
+  color: ${props => props.theme.textColorLT};
+  margin-right: 16px;
+  margin-top: 4px;
+`;
+
+const StyledSvg = styled.svg`
+  margin-right: 16px;
+
+  line {
+    stroke: ${props => props.theme.selectBorderColorLT};
+    stroke-width: 4;
+    stroke-linecap: square;
+    stroke-dasharray: 5 12;
+    animation: dash-animation 25s infinite linear;
+  }
+  circle {
+    fill: ${props => props.theme.selectBorderColorLT};
+  }
+
+  @keyframes dash-animation {
+    to {
+      stroke-dashoffset: -1000;
+    }
+  }
+`;
+
+const Line = () => (
+  <StyledSvg height="5px" width="150px">
+    <line x1="0" y1="4" x2="150" y2="4" />
+  </StyledSvg>
+);
+
+interface UploadAnimationProps {
+  icon?: ComponentType<IconProps> | null;
+}
+
+export const UploadAnimation: React.FC<UploadAnimationProps> = props => (
+  <StyledUploader>
+    <StyledMapIcon>
+      <MapIcon height="48px" />
+    </StyledMapIcon>
+    <Line />
+    {props.icon && <props.icon height="64px" />}
+  </StyledUploader>
+);
+
+interface StatusPanelProps {
+  error?: string | null;
+  isLoading?: boolean;
+  providerIcon?: ComponentType<IconProps> | null;
+}
+
+const StatusPanel: React.FC<StatusPanelProps> = ({error, isLoading, providerIcon}) => (
+  <StyledExportSection>
+    <div className="description">
+      <div className="title">
+        {isLoading ? (
+          <FormattedMessage id={'modal.statusPanel.mapUploading'} />
+        ) : error ? (
+          <FormattedMessage id={'modal.statusPanel.error'} />
+        ) : null}
+      </div>
+    </div>
+    <div className="selection">
+      {isLoading && <UploadAnimation icon={providerIcon} />}
+      {error && <ErrorDisplay error={error} />}
+    </div>
+  </StyledExportSection>
+);
+
+export default StatusPanel;

package/src/components/modals/storage-map-viewer.tsx

@@ -0,0 +1,190 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled from 'styled-components';
+import moment from 'moment';
+import {LeftArrow} from 'components/common/icons';
+import {FormattedMessage} from 'localization';
+
+const imageH = 108;
+
+const StyledAssetGallery = styled.div.attrs({
+  className: 'storage-asset-gallery'
+})`
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+`;
+
+const StyledAssetItem = styled.div.attrs({
+  className: 'asset__item'
+})`
+  width: 23%;
+  margin-right: 2%;
+  max-width: 500px;
+  margin-bottom: 40px;
+  height: 245px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  :last {
+    margin-right: 0;
+  }
+
+  .asset__title {
+    font-size: 12px;
+    font-weight: 500;
+    color: ${props => props.theme.textColorLT};
+    line-height: 18px;
+    height: 32px;
+  }
+
+  .asset__image {
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 12px;
+    opacity: 0.9;
+    transition: opacity 0.4s ease;
+    position: relative;
+    line-height: 0;
+    height: ${imageH}px;
+    flex-shrink: 0;
+
+    img {
+      max-width: 100%;
+    }
+    :hover {
+      cursor: pointer;
+      opacity: 1;
+    }
+  }
+
+  .asset__image__caption {
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 16px;
+    margin-top: 10px;
+    height: 48px;
+    overflow: hidden;
+    display: -webkit-box;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  .asset__last-updated {
+    font-size: 11px;
+    color: ${props => props.theme.textColorLT};
+  }
+`;
+
+const BackLink = styled.div`
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+  color: ${props => props.theme.titleColorLT};
+  cursor: pointer;
+  margin-bottom: 40px;
+
+  :hover {
+    font-weight: 500;
+  }
+
+  span {
+    white-space: nowrap;
+  }
+  svg {
+    margin-right: 10px;
+  }
+`;
+
+const StyledError = styled.div`
+  color: red;
+  font-size: 14px;
+  margin-bottom: 16px;
+`;
+
+const getDuration = (last: number = 0) => moment.duration(new Date().valueOf() - last).humanize();
+
+interface Asset {
+  imageUrl?: string;
+  label?: string;
+  title?: string;
+  description?: string;
+  lastUpdated?: number;
+  id?: string;
+}
+
+interface AssetItemProps {
+  asset: Asset;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+}
+
+const AssetItem: React.FC<AssetItemProps> = ({asset, onClick}) => (
+  <StyledAssetItem>
+    <div className="asset__image" onClick={onClick}>
+      {asset.imageUrl && <img src={asset.imageUrl} />}
+    </div>
+    <div className="asset__title">{asset.label || asset.title}</div>
+    <div className="asset__image__caption">{asset.description}</div>
+    {asset.lastUpdated ? (
+      <div className="asset__last-updated">
+        <FormattedMessage
+          id={'modal.storageMapViewer.lastModified'}
+          values={{lastUpdated: getDuration(asset.lastUpdated)}}
+        />
+      </div>
+    ) : null}
+  </StyledAssetItem>
+);
+
+interface StorageAssetsViewerProps {
+  assets: Asset[];
+  onLoadAsset: (asset: Asset) => void;
+  back?: React.MouseEventHandler<HTMLDivElement>;
+  error?: {message?: string};
+}
+
+class StorageAssetsViewer extends React.Component<StorageAssetsViewerProps> {
+  render() {
+    const {assets, onLoadAsset, back, error} = this.props;
+
+    return (
+      <div className="storage-asset-viewer">
+        <BackLink onClick={back}>
+          <LeftArrow height="12px" />
+          <span>
+            <FormattedMessage id={'modal.storageMapViewer.back'} />
+          </span>
+        </BackLink>
+        {error && <StyledError>{error.message}</StyledError>}
+        <StyledAssetGallery>
+          {assets.map(sp => (
+            <AssetItem asset={sp} key={sp.id} onClick={() => onLoadAsset(sp)} />
+          ))}
+        </StyledAssetGallery>
+      </div>
+    );
+  }
+}
+
+export default StorageAssetsViewer;

package/src/components/notification-panel/notification-item.tsx

@@ -0,0 +1,143 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import styled from 'styled-components';
+import {Delete, Info, Warning, Checkmark} from 'components/common/icons';
+import ReactMarkdown from 'react-markdown';
+import {ActionHandler, removeNotification as removeNotificationActions} from 'actions';
+
+interface NotificationItemContentProps {
+  type: string;
+  isExpanded?: boolean;
+}
+
+const NotificationItemContent = styled.div<NotificationItemContentProps>`
+  background-color: ${props => props.theme.notificationColors[props.type] || '#000'};
+  color: #fff;
+  display: flex;
+  flex-direction: row;
+  width: ${props => props.theme.notificationPanelItemWidth * (1 + Number(props.isExpanded))}px;
+  height: ${props => props.theme.notificationPanelItemHeight * (1 + Number(props.isExpanded))}px;
+  font-size: 11px;
+  margin-bottom: 1rem;
+  padding: 1em;
+  border-radius: 4px;
+  box-shadow: ${props => props.theme.boxShadow};
+  cursor: pointer;
+`;
+
+const DeleteIcon = styled(Delete)`
+  cursor: pointer;
+`;
+
+interface NotificationMessageProps {
+  isExpanded?: boolean;
+}
+
+const NotificationMessage = styled.div.attrs({
+  className: 'notification-item--message'
+})<NotificationMessageProps>`
+  flex-grow: 2;
+  width: ${props => props.theme.notificationPanelItemWidth}px;
+  margin: 0 1em;
+  overflow: ${props => (props.isExpanded ? 'auto' : 'hidden')};
+  padding-right: ${props => (props.isExpanded ? '1em' : 0)};
+
+  p {
+    margin-top: 0;
+    a {
+      color: #fff;
+      text-decoration: underline;
+    }
+  }
+`;
+
+const NotificationIcon = styled.div`
+  svg {
+    vertical-align: text-top;
+  }
+`;
+
+const icons = {
+  info: <Info />,
+  warning: <Warning />,
+  error: <Warning />,
+  success: <Checkmark />
+};
+
+const LinkRenderer = props => {
+  return (
+    <a href={props.href} target="_blank" rel="noopener noreferrer">
+      {props.children}
+    </a>
+  );
+};
+
+interface NotificationItemProps {
+  notification: {
+    id: string;
+    type: string;
+    message: string;
+  };
+  isExpanded?: boolean;
+  removeNotification?: ActionHandler<typeof removeNotificationActions>;
+  theme?: any;
+}
+
+export default function NotificationItemFactory() {
+  return class NotificationItem extends Component<NotificationItemProps> {
+    state = {
+      isExpanded: false
+    };
+
+    componentDidMount() {
+      if (this.props.isExpanded) {
+        this.setState({isExpanded: true});
+      }
+    }
+
+    render() {
+      const {notification, removeNotification} = this.props;
+      const {isExpanded} = this.state;
+
+      return (
+        <NotificationItemContent
+          className="notification-item"
+          type={notification.type}
+          isExpanded={isExpanded}
+          onClick={() => this.setState({isExpanded: !isExpanded})}
+        >
+          <NotificationIcon className="notification-item--icon">
+            {icons[notification.type]}
+          </NotificationIcon>
+          <NotificationMessage isExpanded={isExpanded} theme={this.props.theme}>
+            <ReactMarkdown source={notification.message} renderers={{link: LinkRenderer}} />
+          </NotificationMessage>
+          {typeof removeNotification === 'function' ? (
+            <div className="notification-item--action">
+              <DeleteIcon height="10px" onClick={() => removeNotification(notification.id)} />
+            </div>
+          ) : null}
+        </NotificationItemContent>
+      );
+    }
+  };
+}

package/src/components/notification-panel.tsx

@@ -0,0 +1,75 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import styled from 'styled-components';
+
+import NotificationItemFactory from './notification-panel/notification-item';
+import {DEFAULT_NOTIFICATION_TOPICS} from 'constants/default-settings';
+import {Notifications} from 'reducers';
+import {removeNotification} from 'actions/ui-state-actions';
+
+const NotificationPanelContent = styled.div`
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 4px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: absolute;
+  top: 1em;
+  right: 1em;
+  z-index: 10000;
+  box-sizing: border-box;
+`;
+
+NotificationPanelFactory.deps = [NotificationItemFactory];
+
+interface NotificationPanelProps {
+  removeNotification?: typeof removeNotification;
+  notifications: Notifications[];
+}
+
+export default function NotificationPanelFactory(
+  NotificationItem: ReturnType<typeof NotificationItemFactory>
+) {
+  return class NotificationPanel extends Component<NotificationPanelProps> {
+    render() {
+      const globalNotifications = this.props.notifications.filter(
+        n => n.topic === DEFAULT_NOTIFICATION_TOPICS.global
+      );
+      return (
+        <NotificationPanelContent
+          className="notification-panel"
+          style={{display: globalNotifications.length ? 'block' : 'none'}}
+        >
+          {globalNotifications.map(n => (
+            <NotificationItem
+              key={n.id}
+              notification={n}
+              removeNotification={this.props.removeNotification}
+            />
+          ))}
+        </NotificationPanelContent>
+      );
+    }
+  };
+}

package/src/components/performance.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+const trackers = {};
+let tick = null;
+let fps = 0;
+let counter = 0;
+function startLoop() {
+  if (tick) return;
+  const frames = [performance.now(), 0];
+  tick = () => {
+    // @ts-expect-error
+    Object.values(trackers).forEach(tracker => tracker.update());
+
+    // Compute fps over last 60 frames
+    counter++;
+    const fpsN = 60;
+    frames.unshift(performance.now());
+    if (frames.length > fpsN) frames.pop();
+    const l = frames.length;
+    if (counter % 30 === 0) {
+      fps = Math.round((l * 1000) / (frames[0] - frames[l - 1]));
+    }
+
+    requestAnimationFrame(tick);
+  };
+  tick();
+}
+
+export const createTracker = label => {
+  if (!trackers[label]) {
+    const N = 10;
+    let value = 0;
+    let valueAtFrameStart = value;
+    const stats = [];
+    const result: {countPerFrame?: number, maxPerFrame?: number, avPerFrame?: number} = {};
+    const update = () => {
+      result.countPerFrame = value - valueAtFrameStart;
+      valueAtFrameStart = value;
+      stats.unshift(result.countPerFrame);
+      if (stats.length > N) stats.pop();
+      result.maxPerFrame = Math.max(...stats);
+      result.avPerFrame = stats.reduce((a, b) => a + b, 0) / N;
+    };
+    const render = () => {
+      if (!tick) startLoop();
+      return (
+        <div key={label}>
+          <span>{`${label} per frame: ${result.countPerFrame}, max: ${result.maxPerFrame}, av: ${result.avPerFrame}`}</span>
+        </div>
+      );
+    };
+    const increment = () => {
+      value++;
+    };
+    const tracker = {update, render, increment};
+    trackers[label] = tracker;
+  }
+  return trackers[label];
+};
+
+const patchUpdateState = (tracker, LayerClass) => {
+  const _oldUpdateState = LayerClass.prototype.updateState;
+  LayerClass.prototype.updateState = function(params) {
+    const {
+      extensionsChanged,
+      propsOrDataChanged,
+      stateChanged,
+      updateTriggersChanged
+    } = params.changeFlags;
+    if (extensionsChanged || propsOrDataChanged || stateChanged || updateTriggersChanged) {
+      tracker.increment();
+    }
+    _oldUpdateState.call(this, params);
+  };
+};
+
+export const createLayerUpdateTracker = (label, layers) => {
+  const tracker = createTracker('state updates');
+  layers.forEach(layer => patchUpdateState(tracker, layer));
+  return tracker;
+};
+
+export const renderPerformanceStats = () => {
+  if (!tick) startLoop();
+  return (
+    <div
+      id="performance-metrics-overlay"
+      style={{
+        bottom: 0,
+        right: 0,
+        position: 'absolute',
+        fontSize: 14,
+        background: 'whitesmoke',
+        padding: 8,
+        zIndex: 10,
+        border: '1px solid red',
+        width: 400
+      }}
+    >
+      {/* @ts-expect-error */}
+      {Object.values(trackers).map(tracker => tracker.render())}
+      <span>{`FPS: ${fps}`}</span>
+    </div>
+  );
+};