Skip to content

Commit

Permalink
Refactor data handler into parent component (opensearch-project#271)
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 Feb 21, 2023
1 parent 44adc21 commit 8d25b2b
Show file tree
Hide file tree
Showing 9 changed files with 146 additions and 132 deletions.
6 changes: 3 additions & 3 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 @@ -55,7 +55,7 @@ export const DocumentLayerConfigPanel = (props: Props) => {
<DocumentLayerSource {...newProps} />
</Fragment>
),
testSubj: 'dataTab',
testsubj: 'dataTab',
},
{
id: 'style--id',
Expand All @@ -66,7 +66,7 @@ export const DocumentLayerConfigPanel = (props: Props) => {
<DocumentLayerStyle {...newProps} />
</Fragment>
),
testSubj: 'styleTab',
testsubj: 'styleTab',
},
{
id: 'settings--id',
Expand All @@ -77,7 +77,7 @@ export const DocumentLayerConfigPanel = (props: Props) => {
<LayerBasicSettings {...newProps} />
</Fragment>
),
testSubj: 'settingsTab',
testsubj: 'settingsTab',
},
];
return <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} />;
Expand Down
4 changes: 4 additions & 0 deletions public/components/layer_config/layer_config_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ interface Props {
isLayerExists: Function;
originLayerConfig: MapLayerSpecification | null;
setOriginLayerConfig: Function;
setIsUpdatingLayerRender: (isUpdatingLayerRender: boolean) => void;
}

export const LayerConfigPanel = ({
Expand All @@ -55,6 +56,7 @@ export const LayerConfigPanel = ({
isLayerExists,
originLayerConfig,
setOriginLayerConfig,
setIsUpdatingLayerRender,
}: Props) => {
const [isUpdateDisabled, setIsUpdateDisabled] = useState(false);
const [unsavedModalVisible, setUnsavedModalVisible] = useState(false);
Expand Down Expand Up @@ -84,9 +86,11 @@ export const LayerConfigPanel = ({
}
};
const onUpdate = () => {
setIsUpdatingLayerRender(true);
updateLayer();
closeLayerConfigPanel(false);
setOriginLayerConfig(null);
setSelectedLayerConfig(undefined);
if (isNewLayer) {
setIsNewLayer(false);
}
Expand Down
95 changes: 11 additions & 84 deletions public/components/layer_control_panel/layer_control_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,8 @@ import {
LAYER_PANEL_SHOW_LAYER_ICON,
LAYER_VISIBILITY,
} from '../../../common';
import { referenceLayerTypeLookup } from '../../model/layersFunctions';
import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
import { MapServices } from '../../types';
import {
handleDataLayerRender,
handleReferenceLayerRender,
} from '../../model/layerRenderController';
import { MapState } from '../../model/mapState';
import { ConfigSchema } from '../../../common/config';
import { moveLayers, removeLayers, updateLayerVisibility } from '../../model/map/layer_operations';
Expand All @@ -59,34 +54,28 @@ interface Props {
mapState: MapState;
zoom: number;
mapConfig: ConfigSchema;
inDashboardMode: boolean;
isReadOnlyMode: boolean;
selectedLayerConfig: MapLayerSpecification | undefined;
setSelectedLayerConfig: (layerConfig: MapLayerSpecification | undefined) => void;
setIsUpdatingLayerRender: (isUpdatingLayerRender: boolean) => void;
}

export const LayerControlPanel = memo(
({
maplibreRef,
setLayers,
layers,
layersIndexPatterns,
setLayersIndexPatterns,
mapState,
zoom,
mapConfig,
inDashboardMode,
isReadOnlyMode,
selectedLayerConfig,
setSelectedLayerConfig,
setIsUpdatingLayerRender,
}: Props) => {
const { services } = useOpenSearchDashboards<MapServices>();
const {
data: { indexPatterns },
notifications,
} = services;

const [isLayerConfigVisible, setIsLayerConfigVisible] = useState(false);
const [isLayerControlVisible, setIsLayerControlVisible] = useState(true);
const [selectedLayerConfig, setSelectedLayerConfig] = useState<
MapLayerSpecification | undefined
>();
const [initialLayersLoaded, setInitialLayersLoaded] = useState(false);
const [isUpdatingLayerRender, setIsUpdatingLayerRender] = useState(false);
const [isNewLayer, setIsNewLayer] = useState(false);
const [isDeleteLayerModalVisible, setIsDeleteLayerModalVisible] = useState(false);
const [originLayerConfig, setOriginLayerConfig] = useState<MapLayerSpecification | null>(null);
Expand All @@ -95,39 +84,6 @@ export const LayerControlPanel = memo(
>();
const [visibleLayers, setVisibleLayers] = useState<MapLayerSpecification[]>([]);

useEffect(() => {
if (!isUpdatingLayerRender && initialLayersLoaded) {
return;
}
if (layers.length <= 0) {
return;
}

if (initialLayersLoaded) {
if (!selectedLayerConfig) {
return;
}
if (referenceLayerTypeLookup[selectedLayerConfig.type]) {
handleReferenceLayerRender(selectedLayerConfig, maplibreRef, undefined);
} else {
updateIndexPatterns();
handleDataLayerRender(selectedLayerConfig, mapState, services, maplibreRef, undefined);
}
setSelectedLayerConfig(undefined);
} else {
layers.forEach((layer) => {
const beforeLayerId = getMapBeforeLayerId(layer);
if (referenceLayerTypeLookup[layer.type]) {
handleReferenceLayerRender(layer, maplibreRef, beforeLayerId);
} else {
handleDataLayerRender(layer, mapState, services, maplibreRef, beforeLayerId);
}
});
setInitialLayersLoaded(true);
}
setIsUpdatingLayerRender(false);
}, [layers]);

useEffect(() => {
const getCurrentVisibleLayers = () => {
return layers.filter(
Expand All @@ -138,16 +94,6 @@ export const LayerControlPanel = memo(
setVisibleLayers(getCurrentVisibleLayers());
}, [layers, zoom]);

// Get layer id from layers that is above the selected layer
function getMapBeforeLayerId(selectedLayer: MapLayerSpecification): string | undefined {
const selectedLayerIndex = layers.findIndex((layer) => layer.id === selectedLayer.id);
const beforeLayers = layers.slice(selectedLayerIndex + 1);
if (beforeLayers.length === 0) {
return undefined;
}
return beforeLayers[0]?.id;
}

const closeLayerConfigPanel = () => {
setIsLayerConfigVisible(false);
setTimeout(() => {
Expand Down Expand Up @@ -178,7 +124,6 @@ export const LayerControlPanel = memo(
};
}
setLayers(layersClone);
setIsUpdatingLayerRender(true);
};

const removeLayer = (layerId: string) => {
Expand All @@ -199,7 +144,7 @@ export const LayerControlPanel = memo(

const onClickLayerName = (layer: MapLayerSpecification) => {
if (hasUnsavedChanges()) {
notifications.toasts.addWarning(
services.toastNotifications.addWarning(
`You have unsaved changes for ${selectedLayerConfig?.name}`
);
} else {
Expand Down Expand Up @@ -261,25 +206,6 @@ export const LayerControlPanel = memo(
return layersClone.reverse();
};

const updateIndexPatterns = async () => {
if (!selectedLayerConfig) {
return;
}
if (referenceLayerTypeLookup[selectedLayerConfig.type]) {
return;
}
const findIndexPattern = layersIndexPatterns.find(
// @ts-ignore
(indexPattern) => indexPattern.id === selectedLayerConfig.source.indexPatternId
);
if (!findIndexPattern) {
// @ts-ignore
const newIndexPattern = await indexPatterns.get(selectedLayerConfig.source.indexPatternId);
const cloneLayersIndexPatterns = [...layersIndexPatterns, newIndexPattern];
setLayersIndexPatterns(cloneLayersIndexPatterns);
}
};

const onLayerVisibilityChange = (layer: MapLayerSpecification) => {
if (layer.visibility === LAYER_VISIBILITY.VISIBLE) {
layer.visibility = LAYER_VISIBILITY.NONE;
Expand Down Expand Up @@ -322,7 +248,7 @@ export const LayerControlPanel = memo(
return visibleLayers.includes(layer);
};

if (inDashboardMode) {
if (isReadOnlyMode) {
return null;
}

Expand Down Expand Up @@ -480,6 +406,7 @@ export const LayerControlPanel = memo(
isLayerExists={isLayerExists}
originLayerConfig={originLayerConfig}
setOriginLayerConfig={setOriginLayerConfig}
setIsUpdatingLayerRender={setIsUpdatingLayerRender}
/>
)}
<AddLayerPanel
Expand Down
Loading

0 comments on commit 8d25b2b

Please sign in to comment.