typing changes

elastic · Oct 2, 2020 · bd5bc83 · bd5bc83
1 parent 0cf05a7
commit bd5bc83
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 65 deletions.
diff --git a/x-pack/plugins/maps/common/descriptor_types/source_descriptor_types.ts b/x-pack/plugins/maps/common/descriptor_types/source_descriptor_types.ts
@@ -134,3 +134,15 @@ export type GeojsonFileSourceDescriptor = {
   name: string;
   type: string;
 };
+
+export type TileJsonVectorSourceSettings = {
+  url: string;
+  layerName: string;
+  minSourceZoom: number;
+  maxSourceZoom: number;
+};
+
+export type TileJsonVectorSourceDescriptor = AbstractSourceDescriptor &
+  TileJsonVectorSourceSettings & {
+    tooltipProperties?: string[];
+  };
diff --git a/x-pack/plugins/maps/public/classes/fields/tilejson_field.ts b/x-pack/plugins/maps/public/classes/fields/tilejson_field.ts
@@ -8,8 +8,9 @@ import { AbstractField, IField } from './field';
 import { FIELD_ORIGIN } from '../../../common/constants';
 import { IVectorSource } from '../sources/vector_source';
 import { TileJsonSource } from '../sources/tilejson_source/tilejson_source';
+import { MVTField } from './mvt_field';
 
-export class TileJsonField extends AbstractField implements IField {
+export class TileJsonField extends MVTField implements IField {
   private readonly _source: TileJsonSource;
   constructor({
     fieldName,

diff --git a/x-pack/plugins/maps/public/classes/layers/mvt_wizard/tilejson_manual_wizard.tsx b/x-pack/plugins/maps/public/classes/layers/mvt_wizard/tilejson_manual_wizard.tsx
@@ -7,7 +7,11 @@
 import React, { Component } from 'react';
 import { EuiSwitch, EuiPanel, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { TiledSingleLayerVectorSourceSettings } from '../../../../common/descriptor_types';
+import {
+  TiledSingleLayerVectorSourceSettings,
+  TileJsonVectorSourceDescriptor,
+  TileJsonVectorSourceSettings,
+} from '../../../../common/descriptor_types';
 import { MVTSingleLayerVectorSource } from '../../sources/mvt_single_layer_vector_source';
 import { TiledVectorLayer } from '../tiled_vector_layer/tiled_vector_layer';
 import { MVTSingleLayerVectorSourceEditor } from '../../sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor';

diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source.tsx
@@ -12,10 +12,7 @@ import { ImmutableSourceProperty, SourceEditorArgs } from '../source';
 import { FIELD_ORIGIN, MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES } from '../../../../common/constants';
 import { registerSource } from '../source_registry';
 import { getDataSourceLabel, getUrlLabel } from '../../../../common/i18n_getters';
-import {
-  TiledSingleLayerVectorSourceDescriptor,
-  TileJsonVectorSourceDescriptor,
-} from '../../../../common/descriptor_types';
+import { TileJsonVectorSourceDescriptor } from '../../../../common/descriptor_types';
 import { MVTField } from '../../fields/mvt_field';
 import { ITooltipProperty } from '../../tooltips/tooltip_property';
 import { MVTSingleLayerVectorSource } from '../mvt_single_layer_vector_source';
@@ -40,13 +37,17 @@ export class TileJsonSource extends MVTSingleLayerVectorSource {
   static createDescriptor({
     url,
     layerName,
+    minSourceZoom,
+    maxSourceZoom,
     tooltipProperties,
   }: Partial<TileJsonVectorSourceDescriptor>): TileJsonVectorSourceDescriptor {
     return {
       type: SOURCE_TYPES.TILEJSON_SINGLE_LAYER,
       id: uuid(),
       url: url ? url : '',
       layerName: layerName ? layerName : '',
+      minSourceZoom: typeof minSourceZoom === 'number' ? minSourceZoom : MIN_ZOOM,
+      maxSourceZoom: typeof maxSourceZoom === 'number' ? maxSourceZoom : MAX_ZOOM,
       tooltipProperties: tooltipProperties ? tooltipProperties : [],
     };
   }
@@ -55,12 +56,9 @@ export class TileJsonSource extends MVTSingleLayerVectorSource {
     return tileJsonDoc.vector_layers || [];
   }
 
-  readonly _descriptor: TiledSingleLayerVectorSourceDescriptor;
+  readonly _descriptor: TileJsonVectorSourceDescriptor;
 
-  constructor(
-    sourceDescriptor: TiledSingleLayerVectorSourceDescriptor,
-    inspectorAdapters?: object
-  ) {
+  constructor(sourceDescriptor: TileJsonVectorSourceDescriptor, inspectorAdapters?: object) {
     super(sourceDescriptor, inspectorAdapters);
     this._descriptor = TileJsonSource.createDescriptor(sourceDescriptor);
 
@@ -139,7 +137,9 @@ export class TileJsonSource extends MVTSingleLayerVectorSource {
 
   async getUrlTemplateWithMeta() {
     const layer = await this.getLayerConfig();
-    // todo: EMS does not preserve licesing param
+    if (!layer) {
+      return null;
+    }
     const tileJsonDoc = await loadTileJsonDocument(this._descriptor.url);
     const tileUrl = tileJsonDoc.tiles[0];
     return {
@@ -149,29 +149,6 @@ export class TileJsonSource extends MVTSingleLayerVectorSource {
       maxSourceZoom: layer.maxzoom,
     };
   }
-
-  getFeatureProperties(
-    id: string | number | undefined,
-    mbProperties: GeoJsonProperties
-  ): GeoJsonProperties | null {
-    return mbProperties;
-  }
-
-  getMinZoom() {
-    return MIN_ZOOM;
-  }
-
-  getMaxZoom() {
-    return MAX_ZOOM;
-  }
-
-  async filterAndFormatPropertiesToHtml(
-    properties: GeoJsonProperties,
-    featureId?: string | number
-  ): Promise<ITooltipProperty[]> {
-    // todo
-    return [];
-  }
 }
 
 registerSource({

diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_editor.tsx
@@ -10,28 +10,23 @@ import { EuiFieldText, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { TileJsonVectorSourceSettings } from '../../../../common/descriptor_types';
 import { TileJsonSourceSettings } from './tilejson_source_settings';
+import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants';
 
 export interface Props {
   onSourceConfigChange: (sourceConfig: TileJsonVectorSourceSettings) => void;
 }
 
-interface State {
-  url: string;
-  layerName: string;
-}
-
-export class TileJsonSourceEditor extends Component<Props, State> {
+export class TileJsonSourceEditor extends Component<Props, TileJsonSourceSettings> {
   state = {
     url: '',
     layerName: '',
+    minSourceZoom: MIN_ZOOM,
+    maxSourceZoom: MAX_ZOOM,
   };
 
   _sourceConfigChange = _.debounce(() => {
     if (this.state.layerName && this.state.url) {
-      this.props.onSourceConfigChange({
-        url: this.state.url,
-        layerName: this.state.layerName,
-      });
+      this.props.onSourceConfigChange(this.state);
     }
   }, 200);
 
@@ -50,11 +45,18 @@ export class TileJsonSourceEditor extends Component<Props, State> {
     );
   };
 
-  _handleLayerNameChange = (layerName: string) => {
-    if (this.state.layerName === layerName) {
+  _handleChange = (settings: TileJsonSourceSettings) => {
+    if (this.state.layerName === settings.layerName) {
       return;
     }
-    this.setState({ layerName }, () => this._sourceConfigChange());
+    this.setState(
+      {
+        layerName: settings.layerName,
+        minSourceZoom: settings.minSourceZoom,
+        maxSourceZoom: settings.maxSourceZoom,
+      },
+      () => this._sourceConfigChange()
+    );
   };
 
   render() {
@@ -75,7 +77,7 @@ export class TileJsonSourceEditor extends Component<Props, State> {
         </EuiFormRow>
 
         <TileJsonSourceSettings
-          handleChange={this._handleLayerNameChange}
+          handleChange={this._handleChange}
           layerName={this.state.layerName}
           url={this.state.url}
         />

diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_settings.tsx
@@ -5,21 +5,23 @@
  */
 
 import React, { Fragment, Component, ChangeEvent } from 'react';
-import { EuiSelect, EuiFormRow, EuiText } from '@elastic/eui';
+import { EuiSelect, EuiFormRow, EuiText, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import _ from 'lodash';
 import { TileJsonSource, TileJsonVectorLayerConfig } from './tilejson_source';
 import { loadTileJsonDocument } from './tilejson_loader_util';
+import { TileJsonVectorSourceSettings } from '../../../../common/descriptor_types';
 
 export interface State {
   currentLayerName: string;
   previousLayerName: string;
   urlForDoc: string;
   tileJsonDoc: any;
+  layers: TileJsonVectorLayerConfig[];
 }
 
 export interface Props {
-  handleChange: (layerName: string) => void;
+  handleChange: (settings: Partial<TileJsonVectorSourceSettings>) => void;
   layerName: string;
   url: string[];
 }
@@ -30,6 +32,7 @@ export class TileJsonSourceSettings extends Component<Props, State> {
     previousLayerName: '',
     urlForDoc: '',
     tileJsonDoc: null,
+    layers: null,
   };
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
@@ -88,12 +91,20 @@ export class TileJsonSourceSettings extends Component<Props, State> {
         urlForDoc: url,
         tileJsonDoc,
         currentLayer: layers[0],
+        layers,
       });
     }
   }
 
   _handleChange = _.debounce(() => {
-    this.props.handleChange(this.state.currentLayerName);
+    const selectedLayer: TileJsonVectorLayerConfig = this.state.layers.find((l) => {
+      return l.id === this.state.currentLayerName;
+    });
+    this.props.handleChange({
+      layerName: this.state.currentLayerName,
+      minSourceZoom: selectedLayer.minzoom,
+      maxSourceZoom: selectedLayer.maxzoom,
+    });
   }, 200);
 
   _handleLayerNameInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -105,21 +116,34 @@ export class TileJsonSourceSettings extends Component<Props, State> {
   };
 
   render() {
-    if (!this.state.tileJsonDoc) {
+    if (!this.state.layers || !this.state.tileJsonDoc) {
       return null;
     }
 
     const description = this.state.tileJsonDoc.description;
 
-    const layers: TileJsonVectorLayerConfig[] = TileJsonSource.getLayerConfigsFromTileJson(
-      this.state.tileJsonDoc
-    );
-    const layerOptions = layers.map((layer: TileJsonVectorLayerConfig) => {
+    const layerOptions = this.state.layers.map((layer: TileJsonVectorLayerConfig) => {
       return {
         text: layer.id,
         value: layer.id,
       };
     });
+    const selectedLayer = this.state.layers.find((l) => {
+      return l.id === this.state.currentLayerName;
+    });
+
+    const zoomText = selectedLayer ? (
+      <EuiText size={'xs'}>
+        {i18n.translate('xpack.maps.source.TileJsonSourceSettings.zoomText', {
+          defaultMessage: 'This layer has data from zoom level {minZoom} to {maxZoom}',
+          values: {
+            minZoom: selectedLayer.minzoom,
+            maxZoom: selectedLayer.maxzoom,
+          },
+        })}
+      </EuiText>
+    ) : null;
+
     return (
       <Fragment>
         <EuiFormRow
@@ -140,11 +164,15 @@ export class TileJsonSourceSettings extends Component<Props, State> {
             }
           )}
         >
-          <EuiSelect
-            value={this.state.currentLayerName}
-            onChange={this._handleLayerNameInputChange}
-            options={layerOptions}
-          />
+          <>
+            <EuiSelect
+              value={this.state.currentLayerName}
+              onChange={this._handleLayerNameInputChange}
+              options={layerOptions}
+            />
+            <EuiSpacer size={'xs'} />
+            {zoomText}
+          </>
         </EuiFormRow>
       </Fragment>
     );

diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_update_source_editor.tsx
@@ -29,10 +29,16 @@ export class TileJsonUpdateSourceEditor extends Component<Props, State> {
     this.props.onChange({ propName: 'tooltipProperties', value: propertyNames });
   };
 
-  _handleChange = (layerName: string) => {
+  _handleChange = (settings: Partial<TileJsonSourceSettings>) => {
     const changes: OnSourceChangeArgs[] = [];
-    if (layerName !== this.props.source.getLayerName()) {
-      changes.push({ propName: 'layerName', value: layerName });
+    if (settings.layerName !== this.props.source.getLayerName()) {
+      changes.push({ propName: 'layerName', value: settings.layerName });
+    }
+    if (settings.minSourceZoom !== this.props.source.getMinZoom()) {
+      changes.push({ propName: 'minSourceZoom', value: settings.minSourceZoom });
+    }
+    if (settings.maxSourceZoom !== this.props.source.getMaxZoom()) {
+      changes.push({ propName: 'maxSourceZoom', value: settings.maxSourceZoom });
     }
     this.props.onChange(...changes);
   };