Skip to content

Commit

Permalink
Merge Feature/new maps branch head to main (#170)
Browse files Browse the repository at this point in the history 
Signed-off-by: Junqiu Lei <junqiu@amazon.com>
  • Loading branch information
@junqiu-lei
junqiu-lei authored Jan 7, 2023
1 parent ef23bd2 commit 220a284
Show file tree
Hide file tree
Showing 15 changed files with 602 additions and 366 deletions.
11 changes: 7 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,19 @@
"pre-commit": "lint-staged"
}
},
"devDependencies": {
"cypress": "9.5.4",
"cypress-multi-reporters": "^1.5.0"
},
"dependencies": {
"@opensearch-dashboards-test/opensearch-dashboards-test-library": "git+https://github.com/opensearch-project/opensearch-dashboards-test-library.git#main",
"@cypress/skip-test": "^2.6.1",
"cypress-file-upload": "^5.0.8",
"maplibre-gl": "^2.4.0",
"uuid": "3.3.2",
"prettier": "^2.1.1",
"@types/wellknown": "^0.5.4",
"wellknown": "^0.5.0"
},
"devDependencies": {
"cypress": "9.5.4",
"cypress-multi-reporters": "^1.5.0",
"prettier": "^2.1.1"
}
}
2 changes: 0 additions & 2 deletions public/components/layer_config/documents_config/document_layer_config_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

import React, { Fragment } from 'react';
import { EuiSpacer, EuiTabbedContent } from '@elastic/eui';
import { IndexPattern } from '../../../../../../src/plugins/data/public';
import { DocumentLayerSpecification } from '../../../model/mapLayerType';
import { LayerBasicSettings } from '../layer_basic_settings';
import { DocumentLayerSource } from './document_layer_source';
Expand All @@ -15,7 +14,6 @@ interface Props {
selectedLayerConfig: DocumentLayerSpecification;
setSelectedLayerConfig: Function;
setIsUpdateDisabled: Function;
layersIndexPatterns: IndexPattern[];
isLayerExists: Function;
}

Expand Down
63 changes: 36 additions & 27 deletions public/components/layer_config/documents_config/document_layer_source.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,12 @@ interface Props {
setSelectedLayerConfig: Function;
selectedLayerConfig: DocumentLayerSpecification;
setIsUpdateDisabled: Function;
layersIndexPatterns: IndexPattern[];
}

export const DocumentLayerSource = ({
setSelectedLayerConfig,
selectedLayerConfig,
setIsUpdateDisabled,
layersIndexPatterns,
}: Props) => {
const {
services: {
Expand All @@ -51,27 +49,20 @@ export const DocumentLayerSource = ({
const [indexPattern, setIndexPattern] = useState<IndexPattern | null>();
const [geoFields, setGeoFields] = useState<IndexPatternField[]>();
const [selectedField, setSelectedField] = useState<IndexPatternField | null | undefined>();
const [documentRequestNumber, setDocumentRequestNumber] = useState<number>(
selectedLayerConfig.source.documentRequestNumber
);
const [hasInvalidRequestNumber, setHasInvalidRequestNumber] = useState<boolean>(false);
const [showTooltips, setShowTooltips] = useState<boolean>(
selectedLayerConfig.source.showTooltips
);
const [selectedTooltipFields, setSelectedTooltipFields] = useState<string[]>(
selectedLayerConfig.source.tooltipFields
);

const errorsMap = {
datasource: ['Required'],
geoFields: ['Required'],
};

useEffect(() => {
const disableUpdate =
!indexPattern || !selectedField || documentRequestNumber < 1 || documentRequestNumber > 10000;
const disableUpdate = !indexPattern || !selectedField || hasInvalidRequestNumber;
setIsUpdateDisabled(disableUpdate);
}, [setIsUpdateDisabled, indexPattern, selectedField, documentRequestNumber]);
}, [setIsUpdateDisabled, indexPattern, selectedField, hasInvalidRequestNumber]);

const formatFieldToComboBox = (field?: IndexPatternField | null) => {
if (!field) return [];
Expand Down Expand Up @@ -124,8 +115,7 @@ export const DocumentLayerSource = ({

const onDocumentRequestNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
const selectedNumber = parseInt(value, 10) || 1;
setDocumentRequestNumber(selectedNumber);
const selectedNumber = parseInt(value, 10);
const source = { ...selectedLayerConfig.source, documentRequestNumber: selectedNumber };
setSelectedLayerConfig({ ...selectedLayerConfig, source });
};
Expand All @@ -135,7 +125,6 @@ export const DocumentLayerSource = ({
for (const option of options) {
tooltipSelection.push(option.label);
}
setSelectedTooltipFields(tooltipSelection);
const source = { ...selectedLayerConfig.source, tooltipFields: tooltipSelection };
setSelectedLayerConfig({ ...selectedLayerConfig, source });
};
Expand All @@ -153,14 +142,14 @@ export const DocumentLayerSource = ({
useEffect(() => {
const selectIndexPattern = async () => {
if (selectedLayerConfig.source.indexPatternId) {
const selectedIndexPattern = layersIndexPatterns.find(
(ip) => ip.id === selectedLayerConfig.source.indexPatternId
const selectedIndexPattern = await indexPatterns.get(
selectedLayerConfig.source.indexPatternId
);
setIndexPattern(selectedIndexPattern);
}
};
selectIndexPattern();
}, [indexPatterns]);
}, [indexPatterns, selectedLayerConfig.source.indexPatternId]);

// Update the fields list every time the index pattern is modified.
useEffect(() => {
Expand All @@ -174,11 +163,6 @@ export const DocumentLayerSource = ({
(field) => field.name === selectedLayerConfig.source.geoFieldName
);
setSelectedField(savedField);
if (selectedLayerConfig.source.indexPatternId === indexPattern?.id) {
setSelectedTooltipFields(selectedLayerConfig.source.tooltipFields);
} else {
setSelectedTooltipFields([]);
}
}, [indexPattern]);

useEffect(() => {
Expand All @@ -197,22 +181,34 @@ export const DocumentLayerSource = ({
}, [selectedField]);

useEffect(() => {
setHasInvalidRequestNumber(documentRequestNumber < 1 || documentRequestNumber > 10000);
}, [documentRequestNumber]);
setHasInvalidRequestNumber(
selectedLayerConfig.source.documentRequestNumber < 1 ||
selectedLayerConfig.source.documentRequestNumber > 10000
);
}, [selectedLayerConfig.source.documentRequestNumber]);

const onShowTooltipsChange = (event: { target: { checked: React.SetStateAction<boolean> } }) => {
setShowTooltips(event.target.checked);
const source = { ...selectedLayerConfig.source, showTooltips: event.target.checked };
setSelectedLayerConfig({ ...selectedLayerConfig, source });
};

const onToggleGeoBoundingBox = (e: React.ChangeEvent<HTMLInputElement>) => {
const source = { ...selectedLayerConfig.source, useGeoBoundingBoxFilter: e.target.checked };
setSelectedLayerConfig({ ...selectedLayerConfig, source });
};

const shouldTooltipSectionOpen = () => {
return (
selectedLayerConfig.source.showTooltips &&
selectedLayerConfig.source.tooltipFields?.length > 0
);
};

const filterPanelInitialIsOpen =
selectedLayerConfig.source.filters?.length > 0 ||
selectedLayerConfig.source.useGeoBoundingBoxFilter;

return (
<div>
<EuiPanel paddingSize="s">
Expand Down Expand Up @@ -270,7 +266,7 @@ export const DocumentLayerSource = ({
<EuiSpacer size="xs" />
<EuiFieldNumber
placeholder="Number of documents"
value={documentRequestNumber}
value={selectedLayerConfig.source.documentRequestNumber}
onChange={onDocumentRequestNumberChange}
aria-label="Use aria labels when no actual label is in use"
isInvalid={hasInvalidRequestNumber}
Expand All @@ -294,7 +290,7 @@ export const DocumentLayerSource = ({
title="Filters"
titleSize="xxs"
isCollapsible={true}
initialIsOpen={selectedLayerConfig.source.filters?.length > 0}
initialIsOpen={filterPanelInitialIsOpen}
>
<SearchBar
appName="maps-dashboards"
Expand All @@ -303,6 +299,17 @@ export const DocumentLayerSource = ({
filters={selectedLayerConfig.source.filters ?? []}
onFiltersUpdated={onFiltersUpdated}
/>
<EuiSpacer />
<EuiFormRow>
<EuiCheckbox
id={`${selectedLayerConfig.id}-bounding-box-filter`}
disabled={selectedLayerConfig.source.geoFieldType !== 'geo_point'}
label={'Only request data around map extent'}
checked={selectedLayerConfig.source.useGeoBoundingBoxFilter ? true : false}
onChange={onToggleGeoBoundingBox}
compressed
/>
</EuiFormRow>
</EuiCollapsibleNavGroup>
</EuiPanel>
<EuiSpacer size="m" />
Expand All @@ -327,7 +334,9 @@ export const DocumentLayerSource = ({
<EuiSpacer size="xs" />
<EuiComboBox
options={tooltipFieldsOptions()}
selectedOptions={formatTooltipFieldsToComboBox(selectedTooltipFields)}
selectedOptions={formatTooltipFieldsToComboBox(
selectedLayerConfig.source.tooltipFields
)}
singleSelection={false}
onChange={onTooltipSelectionChange}
sortMatchesBy="startsWith"
Expand Down
39 changes: 21 additions & 18 deletions public/components/layer_config/documents_config/document_layer_style.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,20 @@ interface Props {
}

export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig }: Props) => {
const [fillColor, setFillColor] = useColorPickerState(selectedLayerConfig?.style?.fillColor);
const [borderColor, setBorderColor] = useColorPickerState(
selectedLayerConfig?.style?.borderColor
);
const [borderThickness, setBorderThickness] = useState<number>(
selectedLayerConfig?.style?.borderThickness
);
const [markerSize, setMarkerSize] = useState<number>(selectedLayerConfig?.style?.markerSize);
const [fillColor, setFillColor] = useState(selectedLayerConfig?.style?.fillColor);
const [borderColor, setBorderColor] = useState(selectedLayerConfig?.style?.borderColor);
const [hasInvalidThickness, setHasInvalidThickness] = useState<boolean>(false);
const [hasInvalidSize, setHasInvalidSize] = useState<boolean>(false);
const geoTypeToggleButtonGroupPrefix = 'geoTypeToggleButtonGroup';
const [toggleGeoTypeIdSelected, setToggleGeoTypeIdSelected] = useState(
`${geoTypeToggleButtonGroupPrefix}__Point`
);

useEffect(() => {
setFillColor(selectedLayerConfig?.style?.fillColor);
setBorderColor(selectedLayerConfig?.style?.borderColor);
}, [selectedLayerConfig]);

useEffect(() => {
setSelectedLayerConfig({
...selectedLayerConfig,
Expand Down Expand Up @@ -70,7 +69,6 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig
borderThickness: Number(e.target.value),
},
});
setBorderThickness(Number(e.target.value));
};

const onMarkerSizeChange = (e: any) => {
Expand All @@ -81,24 +79,29 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig
markerSize: Number(e.target.value),
},
});
setMarkerSize(Number(e.target.value));
};

useEffect(() => {
if (borderThickness < 0 || borderThickness > 100) {
if (
selectedLayerConfig?.style?.borderThickness < 0 ||
selectedLayerConfig?.style?.borderThickness > 100
) {
setHasInvalidThickness(true);
} else {
setHasInvalidThickness(false);
}
}, [borderThickness]);
}, [selectedLayerConfig?.style?.borderThickness]);

useEffect(() => {
if (markerSize < 0 || markerSize > 100) {
if (
selectedLayerConfig?.style?.markerSize < 0 ||
selectedLayerConfig?.style?.markerSize > 100
) {
setHasInvalidSize(true);
} else {
setHasInvalidSize(false);
}
}, [markerSize]);
}, [selectedLayerConfig?.style?.markerSize]);

const toggleButtonsGeoType = [
{
Expand Down Expand Up @@ -193,13 +196,13 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig
<ColorPicker color={borderColor} setColor={setBorderColor} label="Border color" />
<WidthSelector
label="Border thickness"
size={borderThickness}
size={selectedLayerConfig?.style?.borderThickness}
onWidthChange={onBorderThicknessChange}
hasInvalid={hasInvalidThickness}
/>
<WidthSelector
label="Marker size"
size={markerSize}
size={selectedLayerConfig?.style?.markerSize}
onWidthChange={onMarkerSizeChange}
hasInvalid={hasInvalidSize}
/>
Expand All @@ -210,7 +213,7 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig
<ColorPicker color={fillColor} setColor={setFillColor} label="Fill color" />
<WidthSelector
label="Border thickness"
size={borderThickness}
size={selectedLayerConfig?.style?.borderThickness}
onWidthChange={onBorderThicknessChange}
hasInvalid={hasInvalidThickness}
/>
Expand All @@ -222,7 +225,7 @@ export const DocumentLayerStyle = ({ setSelectedLayerConfig, selectedLayerConfig
<ColorPicker color={borderColor} setColor={setBorderColor} label="Border color" />
<WidthSelector
label="Border thickness"
size={borderThickness}
size={selectedLayerConfig?.style?.borderThickness}
onWidthChange={onBorderThicknessChange}
hasInvalid={hasInvalidThickness}
/>
Expand Down
Loading

0 comments on commit 220a284

Please sign in to comment.