Embeddable init moved over to NP. Some dependencies converted

elastic · Feb 3, 2020 · 2bcc413 · 2bcc413
1 parent c10c089
commit 2bcc413
Show file tree

Hide file tree

Showing 9 changed files with 887 additions and 0 deletions.
diff --git a/x-pack/plugins/maps/common/constants.js b/x-pack/plugins/maps/common/constants.js
@@ -0,0 +1,160 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { i18n } from '@kbn/i18n';
+
+export const EMS_CATALOGUE_PATH = 'ems/catalogue';
+
+export const EMS_FILES_CATALOGUE_PATH = 'ems/files';
+export const EMS_FILES_API_PATH = 'ems/files';
+export const EMS_FILES_DEFAULT_JSON_PATH = 'file';
+export const EMS_GLYPHS_PATH = 'fonts';
+export const EMS_SPRITES_PATH = 'sprites';
+
+export const EMS_TILES_CATALOGUE_PATH = 'ems/tiles';
+export const EMS_TILES_API_PATH = 'ems/tiles';
+export const EMS_TILES_RASTER_STYLE_PATH = 'raster/style';
+export const EMS_TILES_RASTER_TILE_PATH = 'raster/tile';
+
+export const EMS_TILES_VECTOR_STYLE_PATH = 'vector/style';
+export const EMS_TILES_VECTOR_SOURCE_PATH = 'vector/source';
+export const EMS_TILES_VECTOR_TILE_PATH = 'vector/tile';
+
+export const MAP_SAVED_OBJECT_TYPE = 'map';
+export const APP_ID = 'maps';
+export const APP_ICON = 'gisApp';
+export const TELEMETRY_TYPE = 'maps-telemetry';
+
+export const MAP_APP_PATH = `app/${APP_ID}`;
+export const GIS_API_PATH = `api/${APP_ID}`;
+export const INDEX_SETTINGS_API_PATH = `${GIS_API_PATH}/indexSettings`;
+
+export const MAP_BASE_URL = `/${MAP_APP_PATH}#/${MAP_SAVED_OBJECT_TYPE}`;
+
+export function createMapPath(id) {
+  return `${MAP_BASE_URL}/${id}`;
+}
+
+export const LAYER_TYPE = {
+  TILE: 'TILE',
+  VECTOR: 'VECTOR',
+  VECTOR_TILE: 'VECTOR_TILE',
+  HEATMAP: 'HEATMAP',
+};
+
+export const SORT_ORDER = {
+  ASC: 'asc',
+  DESC: 'desc',
+};
+
+export const EMS_TMS = 'EMS_TMS';
+export const EMS_FILE = 'EMS_FILE';
+export const ES_GEO_GRID = 'ES_GEO_GRID';
+export const ES_SEARCH = 'ES_SEARCH';
+export const ES_PEW_PEW = 'ES_PEW_PEW';
+
+export const FIELD_ORIGIN = {
+  SOURCE: 'source',
+  JOIN: 'join',
+};
+
+export const SOURCE_DATA_ID_ORIGIN = 'source';
+export const META_ID_ORIGIN_SUFFIX = 'meta';
+export const SOURCE_META_ID_ORIGIN = `${SOURCE_DATA_ID_ORIGIN}_${META_ID_ORIGIN_SUFFIX}`;
+export const FORMATTERS_ID_ORIGIN_SUFFIX = 'formatters';
+export const SOURCE_FORMATTERS_ID_ORIGIN = `${SOURCE_DATA_ID_ORIGIN}_${FORMATTERS_ID_ORIGIN_SUFFIX}`;
+
+export const GEOJSON_FILE = 'GEOJSON_FILE';
+
+export const MIN_ZOOM = 0;
+export const MAX_ZOOM = 24;
+
+export const DECIMAL_DEGREES_PRECISION = 5; // meters precision
+export const ZOOM_PRECISION = 2;
+export const DEFAULT_MAX_RESULT_WINDOW = 10000;
+export const DEFAULT_MAX_INNER_RESULT_WINDOW = 100;
+export const DEFAULT_MAX_BUCKETS_LIMIT = 10000;
+
+export const FEATURE_ID_PROPERTY_NAME = '__kbn__feature_id__';
+export const FEATURE_VISIBLE_PROPERTY_NAME = '__kbn_isvisibleduetojoin__';
+
+export const MB_SOURCE_ID_LAYER_ID_PREFIX_DELIMITER = '_';
+
+export const ES_GEO_FIELD_TYPE = {
+  GEO_POINT: 'geo_point',
+  GEO_SHAPE: 'geo_shape',
+};
+
+export const ES_SPATIAL_RELATIONS = {
+  INTERSECTS: 'INTERSECTS',
+  DISJOINT: 'DISJOINT',
+  WITHIN: 'WITHIN',
+};
+
+export const GEO_JSON_TYPE = {
+  POINT: 'Point',
+  MULTI_POINT: 'MultiPoint',
+  LINE_STRING: 'LineString',
+  MULTI_LINE_STRING: 'MultiLineString',
+  POLYGON: 'Polygon',
+  MULTI_POLYGON: 'MultiPolygon',
+  GEOMETRY_COLLECTION: 'GeometryCollection',
+};
+
+export const POLYGON_COORDINATES_EXTERIOR_INDEX = 0;
+export const LON_INDEX = 0;
+export const LAT_INDEX = 1;
+
+export const EMPTY_FEATURE_COLLECTION = {
+  type: 'FeatureCollection',
+  features: [],
+};
+
+export const DRAW_TYPE = {
+  BOUNDS: 'BOUNDS',
+  POLYGON: 'POLYGON',
+};
+
+export const METRIC_TYPE = {
+  AVG: 'avg',
+  COUNT: 'count',
+  MAX: 'max',
+  MIN: 'min',
+  SUM: 'sum',
+  UNIQUE_COUNT: 'cardinality',
+};
+
+export const COUNT_AGG_TYPE = METRIC_TYPE.COUNT;
+export const COUNT_PROP_LABEL = i18n.translate('xpack.maps.aggs.defaultCountLabel', {
+  defaultMessage: 'count',
+});
+
+export const COUNT_PROP_NAME = 'doc_count';
+
+export const STYLE_TYPE = {
+  STATIC: 'STATIC',
+  DYNAMIC: 'DYNAMIC',
+};
+
+export const LAYER_STYLE_TYPE = {
+  VECTOR: 'VECTOR',
+  HEATMAP: 'HEATMAP',
+};
+
+export const COLOR_MAP_TYPE = {
+  CATEGORICAL: 'CATEGORICAL',
+  ORDINAL: 'ORDINAL',
+};
+
+export const COLOR_PALETTE_MAX_SIZE = 10;
+
+export const CATEGORICAL_DATA_TYPES = ['string', 'ip', 'boolean'];
+
+export const SYMBOLIZE_AS_TYPES = {
+  CIRCLE: 'circle',
+  ICON: 'icon',
+};
+
+export const DEFAULT_ICON = 'airfield';
diff --git a/x-pack/plugins/maps/kibana.json b/x-pack/plugins/maps/kibana.json
@@ -0,0 +1,8 @@
+{
+  "id": "maps",
+  "version": "8.0.0",
+  "kibanaVersion": "kibana",
+  "configPath": ["xpack", "maps"],
+  "requiredPlugins": ["embeddable", "data"],
+  "ui": true
+}
diff --git a/x-pack/plugins/maps/public/embeddable/README.md b/x-pack/plugins/maps/public/embeddable/README.md
@@ -0,0 +1,182 @@
+
+### Map specific `input` parameters
+- **hideFilterActions:** (Boolean) Set to true to hide all filtering controls.
+- **isLayerTOCOpen:** (Boolean) Set to false to render map with legend in collapsed state.
+- **openTOCDetails:** (Array of Strings) Array of layer ids. Add layer id to show layer details on initial render.
+- **mapCenter:** ({lat, lon, zoom }) Provide mapCenter to customize initial map location.
+- **disableInteractive:** (Boolean) Will disable map interactions, panning, zooming in the map.
+- **disableTooltipControl:** (Boolean) Will disable tooltip which shows relevant information on hover, like Continent name etc
+- **hideToolbarOverlay:** (Boolean) Will disable toolbar, which can be used to navigate to coordinate by entering lat/long and zoom values.
+- **hideLayerControl:** (Boolean) Will hide useful layer control, which can be used to hide/show a layer to get a refined view of the map.
+- **hideViewControl:** (Boolean) Will hide view control at bottom right of the map, which shows lat/lon values based on mouse hover in the map, this is useful to get coordinate value from a particular point in map.
+- **hiddenLayers:** (Array of Strings) Array of layer ids that should be hidden. Any other layers will be set to visible regardless of their value in the layerList used to initialize the embeddable
+
+### Creating a Map embeddable from saved object
+```
+  const factory = new MapEmbeddableFactory();
+  const input = {
+    hideFilterActions: true,
+    isLayerTOCOpen: false,
+    openTOCDetails: ['tfi3f', 'edh66'],
+    mapCenter: { lat: 0.0, lon: 0.0, zoom: 7 }
+  }
+  const mapEmbeddable = await factory.createFromSavedObject(
+    'de71f4f0-1902-11e9-919b-ffe5949a18d2',
+    input,
+    parent
+  );
+```
+
+### Creating a Map embeddable from state
+```
+const factory = new MapEmbeddableFactory();
+const state = {
+  layerList: [],  // where layerList is same as saved object layerListJSON property (unstringified)
+  title: 'my map',
+}
+const input = {
+  hideFilterActions: true,
+  isLayerTOCOpen: false,
+  openTOCDetails: ['tfi3f', 'edh66'],
+  mapCenter: { lat: 0.0, lon: 0.0, zoom: 7 }
+}
+const mapEmbeddable = await factory.createFromState(state, input, parent);
+```
+
+#### Customize tooltip
+```
+/**
+ * Render custom tooltip content
+ *
+ * @param {function} addFilters
+ * @param {function} closeTooltip
+ * @param {Array} features - Vector features at tooltip location.
+ * @param {boolean} isLocked
+ * @param {function} getLayerName - Get layer name. Call with (layerId). Returns Promise.
+ * @param {function} loadFeatureProperties - Loads feature properties. Call with ({ layerId, featureId }). Returns Promise.
+ * @param {function} loadFeatureGeometry - Loads feature geometry. Call with ({ layerId, featureId }). Returns geojson geometry object { type, coordinates }.
+ *
+ * @return {Component} A React Component.
+ */
+const renderTooltipContent = ({ addFilters, closeTooltip, features, isLocked, loadFeatureProperties}) => {
+  return <div>Custom tooltip content</div>;
+}
+
+const mapEmbeddable = await factory.createFromState(state, input, parent, renderTooltipContent);
+```
+
+
+#### Event handlers
+```
+const eventHandlers = {
+  onDataLoad: (layerId: string, dataId: string) => {
+    // take action on data load
+  },
+  onDataLoadEnd: (layerId: string, dataId: string, resultMeta: object) => {
+    // take action on data load end
+  },
+  onDataLoadError: (layerId: string, dataId: string, errorMessage: string) => {
+    // take action on data load error
+  },
+}
+
+const mapEmbeddable = await factory.createFromState(state, input, parent, renderTooltipContent, eventHandlers);
+```
+
+
+#### Passing in geospatial data
+You can pass geospatial data into the Map embeddable by configuring the layerList parameter with a layer with `GEOJSON_FILE` source.
+Geojson sources will not update unless you modify `__featureCollection` property by calling the `setLayerList` method.
+
+```
+const factory = new MapEmbeddableFactory();
+const state = {
+  layerList: [
+    {
+      'id': 'gaxya',
+      'label': 'My geospatial data',
+      'minZoom': 0,
+      'maxZoom': 24,
+      'alpha': 1,
+      'sourceDescriptor': {
+        'id': 'b7486',
+        'type': 'GEOJSON_FILE',
+        '__featureCollection': {
+          "type": "FeatureCollection",
+          "features": [
+            {
+              "type": "Feature",
+              "geometry": {
+                "type": "Polygon",
+                "coordinates": [
+                  [
+                    [0, 0], [10, 10], [10, 0], [0, 0]
+                  ]
+                ]
+              },
+              "properties": {
+                "name": "null island",
+                "another_prop": "something else interesting"
+              }
+            }
+          ]
+        }
+      },
+      'visible': true,
+      'style': {
+        'type': 'VECTOR',
+        'properties': {}
+      },
+      'type': 'VECTOR'
+    }
+  ],
+  title: 'my map',
+}
+const input = {
+  hideFilterActions: true,
+  isLayerTOCOpen: false,
+  openTOCDetails: ['tfi3f', 'edh66'],
+  mapCenter: { lat: 0.0, lon: 0.0, zoom: 7 }
+}
+const mapEmbeddable = await factory.createFromState(state, input, parent);
+
+mapEmbeddable.setLayerList([
+  {
+    'id': 'gaxya',
+    'label': 'My geospatial data',
+    'minZoom': 0,
+    'maxZoom': 24,
+    'alpha': 1,
+    'sourceDescriptor': {
+      'id': 'b7486',
+      'type': 'GEOJSON_FILE',
+      '__featureCollection': {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [
+                  [35, 35], [45, 45], [45, 35], [35, 35]
+                ]
+              ]
+            },
+            "properties": {
+              "name": "null island",
+              "another_prop": "something else interesting"
+            }
+          }
+        ]
+      }
+    },
+    'visible': true,
+    'style': {
+      'type': 'VECTOR',
+      'properties': {}
+    },
+    'type': 'VECTOR'
+  }
+]);
+```