Skip to content

Commit

Permalink
fix double query
Browse files Browse the repository at this point in the history
  • Loading branch information
jolevesq committed Dec 10, 2024
1 parent 90ca090 commit 8cbac6a
Show file tree
Hide file tree
Showing 9 changed files with 60 additions and 95 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@
{
"geoviewLayerType": "geoCore",
"geoviewLayerId": "03ccfb5c-a06e-43e3-80fd-09d4f8f69703"
},
{
"geoviewLayerType": "geoCore",
"geoviewLayerId": "6433173f-bca8-44e6-be8e-3e8a19d3c299"
}
]
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -412,15 +412,10 @@ export class MapEventProcessor extends AbstractEventProcessor {
this.getMapStateProtected(mapId).setterActions.setPointerPosition(pointerPosition);
}

static setClickCoordinates(mapId: string, clickCoordinates: TypeMapMouseInfo): Promise<TypeFeatureInfoResultSet> {
// Perform query via the feature info layer set process
const promise = this.getMapViewerLayerAPI(mapId).featureInfoLayerSet.queryLayers(clickCoordinates.lnglat);

static setClickCoordinates(mapId: string, clickCoordinates: TypeMapMouseInfo): void {
// GV: We do not need to perform query, there is a handler on the map click in layer set.
// Save in store
this.getMapStateProtected(mapId).setterActions.setClickCoordinates(clickCoordinates);

// Return the promise
return promise;
}

static setZoom(mapId: string, zoom: number): void {
Expand Down
8 changes: 4 additions & 4 deletions packages/geoview-core/src/core/app-start.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createContext, StrictMode, Suspense, useMemo } from 'react';
import { createContext, Suspense, useMemo } from 'react';

import './translation/i18n';
import i18n from 'i18next';
Expand Down Expand Up @@ -81,9 +81,9 @@ function AppStart(props: AppStartProps): JSX.Element {
<I18nextProvider i18n={i18nInstance}>
<MapContext.Provider value={mapContextValue}>
<ThemeProvider theme={getTheme(theme)}>
<StrictMode>
<Shell mapViewer={api.maps[mapId]} />
</StrictMode>
{/* <StrictMode> */}
<Shell mapViewer={api.maps[mapId]} />
{/* </StrictMode> */}
</ThemeProvider>
</MapContext.Provider>
</I18nextProvider>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
const { addHighlightedFeature, removeHighlightedFeature } = useMapStoreActions();

// States
const [isChildRendered, setIsChildRendered] = useState(false);
const [currentFeatureIndex, setCurrentFeatureIndex] = useState<number>(0);
const [selectedLayerPathLocal, setselectedLayerPathLocal] = useState<string>(selectedLayerPath);
const [arrayOfLayerListLocal, setArrayOfLayerListLocal] = useState<LayerListEntry[]>([]);
Expand Down Expand Up @@ -321,9 +320,6 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
// Log
logger.logTraceUseCallback('DETAILS PANEL - handleFeatureNavigateChange', currentFeatureIndex);

// Reset shilcren state
setIsChildRendered(false); // Reset the render state

// Keep previous index for navigation
prevFeatureIndex.current = currentFeatureIndex;

Expand All @@ -347,11 +343,6 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
},
[setSelectedLayerPath]
);

const handleChildRender = useCallback(() => {
logger.logMarkerCheck('DETAILS-MARKER', 'ddd child render');
setIsChildRendered(true);
}, []);
// #endregion

// #region PROCESSING ***********************************************************************************************
Expand Down Expand Up @@ -421,9 +412,8 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
*/
const memoIsAllLayersQueryStatusProcessed = useMemo(() => {
// Log
logger.logTraceUseMemo('DETAILS-PANEL - order layer status processing.');
logger.logTraceUseMemo('DETAILS-PANEL - AllLayersQueryStatusProcessed.');

logger.logMarkerCheck('DETAILS-MARKER', 'ddde memo processing', arrayOfLayerDataBatch);
if (!arrayOfLayerDataBatch || arrayOfLayerDataBatch?.length === 0) return () => false;

return () => arrayOfLayerDataBatch?.every((layer) => layer.queryStatus === FEATURE_INFO_STATUS.PROCESSED);
Expand All @@ -439,19 +429,13 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
logger.logMarkerStart('DETAILS-MARKER');
const renderContent = (): JSX.Element | null => {
if (!memoIsAllLayersQueryStatusProcessed()) {
logger.logMarkerCheck('DETAILS-MARKER', 'ddd skeleton', memoIsAllLayersQueryStatusProcessed());
return <DetailsSkeleton />;
}

if (!memoIsAllLayersQueryStatusProcessed() && memoSelectedLayerDataFeatures && memoSelectedLayerDataFeatures.length === 0) {
logger.logMarkerCheck('DETAILS-MARKER', 'ddd null');
return null;
}

if (memoSelectedLayerDataFeatures && memoSelectedLayerDataFeatures.length > 0) {
// Get only the current feature
const currentFeature = memoSelectedLayerDataFeatures[currentFeatureIndex];
logger.logMarkerCheck('DETAILS-MARKER', 'ddd data');

return (
<Box sx={fullWidth ? sxClasses.rightPanelContainer : { ...sxClasses.rightPanelContainer }}>
<Grid container sx={sxClasses.rightPanelBtnHolder}>
Expand Down Expand Up @@ -499,11 +483,12 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
</Box>
</Grid>
</Grid>
<FeatureInfo feature={currentFeature} onRenderComplete={handleChildRender} />
<FeatureInfo feature={currentFeature} />
</Box>
);
}

// if no condition met, return null for Guide tab
return null;
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { getSxClasses } from './details-style';

interface FeatureInfoProps {
feature: TypeFeatureInfoEntry;
onRenderComplete: (flag: boolean) => void;
}

interface FeatureHeaderProps {
Expand Down Expand Up @@ -80,9 +79,8 @@ const FeatureHeader = memo(function FeatureHeader({ iconSrc, name, hasGeometry,
);
});

export function FeatureInfo({ feature, onRenderComplete }: FeatureInfoProps): JSX.Element | null {
export function FeatureInfo({ feature }: FeatureInfoProps): JSX.Element | null {
logger.logTraceRender('components/details/feature-info-new');
logger.logMarkerCheck('DETAILS-MARKER', 'ddd new feature info');

// Hooks
const theme = useTheme();
Expand All @@ -96,28 +94,10 @@ export function FeatureInfo({ feature, onRenderComplete }: FeatureInfoProps): JS
const { addCheckedFeature, removeCheckedFeature } = useDetailsStoreActions();
const { zoomToExtent, highlightBBox, transformPoints, showClickMarker } = useMapStoreActions();

useEffect(() => {
// Call the callback after the component has mounted
onRenderComplete?.(false);
logger.logMarkerCheck('DETAILS-MARKER', 'ddd child child render');

// Notify parent when component is ready
const timer = setTimeout(() => {
onRenderComplete(true);
}, 0);

// Cleanup function to handle unmounting
return () => {
clearTimeout(timer);
onRenderComplete(false);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [feature]); // Empty dependency array means this runs once after initial render

// Feature data processing
const featureData = useMemo(() => {
if (!feature) return null;
logger.logMarkerCheck('DETAILS-MARKER', 'ddd feature data');

return {
uid: feature.geometry ? (feature.geometry as TypeGeometry).ol_uid : null,
iconSrc: feature.featureIcon.toDataURL(),
Expand All @@ -131,7 +111,6 @@ export function FeatureInfo({ feature, onRenderComplete }: FeatureInfoProps): JS
// Process feature info list
const featureInfoList: TypeFieldEntry[] = useMemo(() => {
if (!feature?.fieldInfo) return [];
logger.logMarkerCheck('DETAILS-MARKER', 'ddd feature list');

return Object.entries(feature.fieldInfo)
.filter(([key]) => key !== feature.nameField)
Expand Down Expand Up @@ -193,15 +172,15 @@ export function FeatureInfo({ feature, onRenderComplete }: FeatureInfoProps): JS
// Effects
useEffect(() => {
logger.logTraceUseEffect('FEATURE-INFO-NEW - checkedFeatures', checkedFeatures);
logger.logMarkerCheck('DETAILS-MARKER', 'ddd checkfeat');

if (!featureData?.uid) return;

setChecked(checkedFeatures.some((checkedFeature) => (checkedFeature.geometry as TypeGeometry)?.ol_uid === featureData.uid));
}, [checkedFeatures, featureData]);

// Early return if no feature
if (!featureData) return null;
logger.logMarkerCheck('DETAILS-MARKER', 'ddd feature');

return (
<Paper sx={PAPER_STYLES}>
<FeatureHeader
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,16 @@ export const FeatureItem = memo(function FeatureItem({
[t]
);

let element: JSX.Element;
if (alias === 'html') {
element = (
return (
<Box key={generateId()} sx={sxClasses.featureInfoItemValue}>
<HtmlToReact htmlContent={sanitizeHtmlContent(item)} />
</Box>
);
} else if (typeof item === 'string' && isImage(item)) {
element = (
}

if (typeof item === 'string' && isImage(item)) {
return (
<CardMedia
key={generateId()}
sx={{ ...sxClasses.featureInfoItemValue, cursor: 'pointer' }}
Expand All @@ -81,23 +82,20 @@ export const FeatureItem = memo(function FeatureItem({
}}
/>
);
} else {
element = (<Box key={generateId()} sx={sxClasses.featureInfoItemValue}>
<HtmlToReact htmlContent={sanitizeHtmlContent(linkifyHtml(stringify(item) as string, linkifyOptions))} />
</Box>);
}

return element
return (
<Box key={generateId()} sx={sxClasses.featureInfoItemValue}>
<HtmlToReact htmlContent={sanitizeHtmlContent(linkifyHtml(stringify(item) as string, linkifyOptions))} />
</Box>
);
});

// Extracted FeatureRow component
export const FeatureRow = memo(function FeatureRow({ featureInfoItem, index, onInitLightBox }: FeatureRowProps): JSX.Element {
const theme = useTheme();
const { alias, value } = featureInfoItem;

// Split text but leave html intact
// f (alias !== 'html') values = values.toString().split(';');

// Convert value to string, handling arrays and other types
const stringValue = useMemo((): string => {
if (Array.isArray(value)) {
Expand All @@ -106,7 +104,8 @@ export const FeatureRow = memo(function FeatureRow({ featureInfoItem, index, onI
return stringify(value) as string;
}, [value]);

const valueArray = stringValue.split(';');
// Split text but leave html intact
const valueArray = alias !== 'html' ? stringValue.split(';') : [stringValue];

Check warning on line 108 in packages/geoview-core/src/core/components/details/feature-info-table.tsx

View workflow job for this annotation

GitHub Actions / Build demo files / build-geoview

The 'valueArray' conditional could make the dependencies of useMemo Hook (at line 111) change on every render. To fix this, wrap the initialization of 'valueArray' in its own useMemo() Hook

// Generate stable IDs for each item when component mounts
const itemIds = useMemo(() => valueArray.map(() => generateId()), [valueArray]);
Expand All @@ -121,17 +120,19 @@ export const FeatureRow = memo(function FeatureRow({ featureInfoItem, index, onI
marginBottom: '1.25rem',
}}
>
{featureInfoItem.alias !== 'html' && (<Grid
sx={{
fontWeight: 'bold',
width: '80%',
flexGrow: 0,
maxWidth: 'none',
flexBasis: 'auto',
}}
>
{alias}
</Grid>)}
{featureInfoItem.alias !== 'html' && (
<Grid
sx={{
fontWeight: 'bold',
width: '80%',
flexGrow: 0,
maxWidth: 'none',
flexBasis: 'auto',
}}
>
{alias}
</Grid>
)}
<Grid
sx={{
marginLeft: 'auto',
Expand Down Expand Up @@ -165,6 +166,9 @@ export const FeatureInfoTable = memo(function FeatureInfoTable({ featureInfoList
// Store
const { initLightBox, LightBoxComponent } = useLightBox();

// Remove last item who is the internall geoviewID field
if (featureInfoList[featureInfoList.length - 1].alias === 'geoviewID') featureInfoList.pop();

return (
<Box sx={sxClasses.boxContainerFeatureInfo}>
{featureInfoList.map((featureInfoItem, index) => (
Expand Down
21 changes: 11 additions & 10 deletions packages/geoview-core/src/geo/layer/gv-layers/raster/gv-wms.ts
Original file line number Diff line number Diff line change
Expand Up @@ -119,16 +119,17 @@ export class GVWMS extends AbstractGVRaster {
const layerConfig = this.getLayerConfig();

// Check if bounds are properly set
if (!layerConfig.initialSettings!.bounds) {
const newBounds = this.getBounds(this.getLayerPath());
if (newBounds)
layerConfig.initialSettings!.bounds = Projection.transformExtentFromProj(
newBounds,
this.getMapViewer().getView().getProjection(),
Projection.PROJECTION_NAMES.LNGLAT
);
else return [];
}
// TODO: We always do the check if not bounds are not set properly from layer creation process
// if (!layerConfig.initialSettings!.bounds) {
const newBounds = this.getBounds(this.getLayerPath());
if (newBounds)
layerConfig.initialSettings!.bounds = Projection.transformExtentFromProj(
newBounds,
this.getMapViewer().getView().getProjection(),
Projection.PROJECTION_NAMES.LNGLAT
);
// else return [];
// }

const clickCoordinate = this.getMapViewer().convertCoordinateLngLatToMapProj(lnglat);
if (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ export class FeatureInfoLayerSet extends AbstractLayerSet {
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
protected override onPropagateToStore(resultSetEntry: TypeFeatureInfoResultSetEntry, type: PropagationType): void {
// Redirect
this.#propagateToStore(resultSetEntry, type === 'layerName' ? 'name' : 'click');
// Redirect - Add layer to the list after registration
this.#propagateToStore(resultSetEntry, type === 'layer-registration' ? 'name' : 'click');
}

/**
Expand Down
5 changes: 1 addition & 4 deletions packages/geoview-core/src/geo/map/map-viewer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -431,10 +431,7 @@ export class MapViewer {
};

// Save in the store
MapEventProcessor.setClickCoordinates(this.mapId, clickCoordinates).catch((error) => {
// Log
logger.logPromiseFailed('setClickCoordinates in #handleMapSingleClick in MapViewer', error);
});
MapEventProcessor.setClickCoordinates(this.mapId, clickCoordinates);

// Emit to the outside
this.#emitMapSingleClick(clickCoordinates);
Expand Down

0 comments on commit 8cbac6a

Please sign in to comment.