kepler.gl.geoiq/src/widgets/category-widget/category-widget.js

kepler.gl is a webgl based application to visualize large scale location data in the browser

// Copyright (c) 2019 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 Widget from '../base-widget';
import CategoryWidgetIcon from './category-widget-icon';
import {aggregate} from '../../utils/aggregate-utils';
import geoViewport from '@mapbox/geo-viewport';
import WebMercatorViewport from 'viewport-mercator-project';
import {getFileType} from 'processors/file-handler';
import booleanDisjoint from '@turf/boolean-disjoint';
import {point, polygon} from '@turf/helpers';
// import simplify from '@turf/simplify';
import simplify from 'simplify-geojson';

export default class FunctionWidget extends Widget {
  constructor(props) {
    super(props);
  }
  get type() {
    return 'Category';
  }
  get isAggregated() {
    return false;
  }
  get widgetIcon() {
    return CategoryWidgetIcon;
  }
  get widgetAggregatedData() {
    return null;
  }

  calculateAggregationData(newWidget, state, mapState) {
    const {dataId, aggregationType, bounds} = newWidget.config;
    var {data, label} = state.datasets[dataId];
    let sortableCategories = [];
    const {fields} = state.datasets[dataId];
    const categoryField = newWidget.config.categoryField;
    const fieldName = newWidget.config.fieldName;
    const categoryFieldIdx = fields.findIndex(f => f.name === categoryField);
    const fieldIdx = fields.findIndex(f => f.name === fieldName);
    let boundingBox;
    let cUL, cUR, cLL, cLR;
    let latRange, lngRange;

    if (!newWidget.config.selectedLayer) {
      return newWidget;
    }

    const idx = state.layers.findIndex(
      l => l.id === newWidget.config.selectedLayer.id
    );
    if (!aggregationType || (aggregationType !== 'count' && fieldIdx <= 0))
      return {newWidget, updatedState: state};

    if (mapState && bounds) {
      const {
        longitude,
        latitude,
        height,
        width,
        zoom,
        pitch,
        bearing
      } = mapState;

      boundingBox = geoViewport.bounds([longitude, latitude], zoom, [
        width,
        height
      ]);

      const viewport = new WebMercatorViewport({
        width: width,
        height: height,
        longitude: longitude,
        latitude: latitude,
        zoom: zoom,
        pitch: pitch,
        bearing: bearing
      });
      cUL = viewport.unproject([0, 0]);
      cUR = viewport.unproject([width, 0]);
      cLR = viewport.unproject([width, height]);
      cLL = viewport.unproject([0, height]);

      latRange = [...new Set([cLL[1], cUR[1], cLR[1], cUL[1]])].sort(
        (a, b) => a - b
      );
      lngRange = [...new Set([cLL[0], cUR[0], cLR[0], cUL[0]])].sort(
        (a, b) => a - b
      );

      const boundingPolygon = {
        type: 'Polygon',
        coordinates: [[cUL, cUR, cLR, cLL]],
        crs: {
          type: 'name',
          properties: {
            name: 'EPSG:4326'
          }
        }
      };

      if (getFileType(label) !== 'json' && boundingBox) {
        const latIdx = state.layers[idx].config.columns.lat.fieldIdx;
        const lngIdx = state.layers[idx].config.columns.lng.fieldIdx;
        data = data.filter(d =>
          pitch || bearing
            ? !booleanDisjoint(point([d[lngIdx], d[latIdx]]), boundingPolygon)
            : d[latIdx] > latRange[0] &&
              d[latIdx] < latRange[1] &&
              d[lngIdx] > lngRange[0] &&
              d[lngIdx] < lngRange[1]
        );
      } else if (boundingBox) {
        if (!state.datasets[dataId].simplifiedGeoJSON) {
          state = {
            ...state,
            datasets: {
              ...state.datasets,
              [dataId]: {
                ...state.datasets[dataId],
                simplifiedGeoJSON: data.map(d => [
                  ...d,
                  (d[0] = simplify(d[0], 0.01))
                ])
              }
            }
          };
        }

        data = state.datasets[dataId].simplifiedGeoJSON.filter(
          d => !booleanDisjoint(d[0], boundingPolygon)
        );
      }
    }

    const categories = data.reduce((acc, curr, idx) => {
      if (acc[curr[categoryFieldIdx]] === undefined)
        acc[curr[categoryFieldIdx]] =
          aggregationType === 'count' ? [1] : [curr[fieldIdx]];
      else
        acc[curr[categoryFieldIdx]].push(
          aggregationType === 'count' ? 1 : curr[fieldIdx]
        );
      return acc;
    }, {});
    for (var category in categories) {
      sortableCategories.push([
        category,
        aggregate(categories[category], aggregationType)
      ]);
    }

    sortableCategories = sortableCategories.sort(function(a, b) {
      return b[1] - a[1];
    });
    sortableCategories.length = 5;
    sortableCategories = sortableCategories.map(sc => {
      return {y: sc[0], x: sc[1]};
    });

    newWidget.config.aggregatedData = sortableCategories;
    return {newWidget, updatedState: state};
  }
}