Skip to content

Commit

Permalink
Psp 9943 highway layer url display (#4667)
Browse files Browse the repository at this point in the history
* psp-9813 ensure error messages from backend display properly.

* psp-9943 show hyperlink for highway layer popup.

* support multiple highway layer properties at the same click location.

---------

Co-authored-by: Alejandro Sanchez <[email protected]>
  • Loading branch information
devinleighsmith and asanchezr authored Feb 24, 2025
1 parent cc2e364 commit 406d872
Show file tree
Hide file tree
Showing 23 changed files with 1,174 additions and 69 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export interface LocationFeatureDataset {
regionFeature: Feature<Geometry, MOT_RegionalBoundary_Feature_Properties> | null;
districtFeature: Feature<Geometry, MOT_DistrictBoundary_Feature_Properties> | null;
municipalityFeature: Feature<Geometry, WHSE_Municipalities_Feature_Properties> | null;
highwayFeature: Feature<Geometry, ISS_ProvincialPublicHighway> | null;
highwayFeatures: Feature<Geometry, ISS_ProvincialPublicHighway>[] | null;
crownLandLeasesFeature: Feature<Geometry, TANTALIS_CrownLandLeases_Feature_Properties> | null;
crownLandLicensesFeature: Feature<Geometry, TANTALIS_CrownLandLicenses_Feature_Properties> | null;
crownLandTenuresFeature: Feature<Geometry, TANTALIS_CrownLandTenures_Feature_Properties> | null;
Expand Down Expand Up @@ -64,7 +64,7 @@ const useLocationFeatureLoader = () => {
const adminBoundaryLayerServiceFindDistrict = adminBoundaryLayerService.findDistrict;
const adminLegalBoundaryLayerServiceFindOneMunicipality =
adminLegalBoundaryLayerService.findOneMunicipality;
const highwayLayerServiceFindOne = highwayLayerService.findOne;
const highwayLayerServiceFindMultiple = highwayLayerService.findMultiple;

const crownLandLayerServiceFindOneLicense = crownLandLayerService.findOneCrownLandLicense;
const crownLandLayerServiceFindOneTenure = crownLandLayerService.findOneCrownLandTenure;
Expand All @@ -89,7 +89,7 @@ const useLocationFeatureLoader = () => {
regionFeature: null,
districtFeature: null,
municipalityFeature: null,
highwayFeature: null,
highwayFeatures: null,
crownLandLeasesFeature: null,
crownLandLicensesFeature: null,
crownLandTenuresFeature: null,
Expand All @@ -101,7 +101,7 @@ const useLocationFeatureLoader = () => {
const fullyAttributedTask = fullyAttributedServiceFindOne(latLng);
const regionTask = adminBoundaryLayerServiceFindRegion(latLng, 'SHAPE');
const districtTask = adminBoundaryLayerServiceFindDistrict(latLng, 'SHAPE');
const highwayTask = highwayLayerServiceFindOne(latLng, 'GEOMETRY');
const highwayTask = highwayLayerServiceFindMultiple(latLng, 'GEOMETRY');
const crownLandLeaseTask = crownLandLayerServiceFindOneLease(latLng);
const crownLandLicensesTask = crownLandLayerServiceFindOneLicense(latLng);
const crownLandTenuresTask = crownLandLayerServiceFindOneTenure(latLng);
Expand All @@ -113,7 +113,7 @@ const useLocationFeatureLoader = () => {
parcelFeature,
regionFeature,
districtFeature,
highwayFeature,
highwayFeatures,
crownLandLeaseFeature,
crownLandLicensesFeature,
crownLandTenuresFeature,
Expand Down Expand Up @@ -167,7 +167,7 @@ const useLocationFeatureLoader = () => {
result.regionFeature = regionFeature ?? null;
result.districtFeature = districtFeature ?? null;
result.municipalityFeature = municipalityFeature ?? null;
result.highwayFeature = highwayFeature ?? null;
result.highwayFeatures = highwayFeatures ?? null;
result.crownLandLeasesFeature = crownLandLeaseFeature ?? null;
result.crownLandLicensesFeature = crownLandLicensesFeature ?? null;
result.crownLandTenuresFeature = crownLandTenuresFeature ?? null;
Expand All @@ -180,7 +180,7 @@ const useLocationFeatureLoader = () => {
fullyAttributedServiceFindOne,
adminBoundaryLayerServiceFindRegion,
adminBoundaryLayerServiceFindDistrict,
highwayLayerServiceFindOne,
highwayLayerServiceFindMultiple,
crownLandLayerServiceFindOneLease,
crownLandLayerServiceFindOneLicense,
crownLandLayerServiceFindOneTenure,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,47 @@ exports[`LayersMenu View > renders as expected 1`] = `
</div>
</div>
</div>
<div
class="c1 list-group-item"
id="legalHighwayResearch"
>
<svg
class="c2"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10 17 5-5-5-5v10z"
/>
<path
d="M0 24V0h24v24H0z"
fill="none"
/>
</svg>
<div
class="c3 form-group"
>
<div
class="form-check"
>
<input
class="form-check-input"
type="checkbox"
/>
<label
class="form-check-label"
title=""
>
Legal Highway Research
</label>
</div>
</div>
</div>
<div
class="c1 list-group-item"
id="firstNations"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,22 @@ export const layersTree: ILayerItem[] = [
key: 'legalHighwayResearch',
label: 'Legal Highway Research',
on: false,
nodes: [],
nodes: [
{
id: 'plans',
key: 'plans',
label: 'Plans',
on: false,
url: 'ogs-internal/ows?',
layers: 'psp_dev:plans',
transparent: true,
opacity: 0.8,
format: 'image/png',
authenticated: true,
maxNativeZoom: 17,
maxZoom: 20,
},
],
},
{
key: 'firstNations',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { LayerPopupContainer } from './LayerPopupContainer';
import { IMapStateMachineContext } from '@/components/common/mapFSM/MapStateMachineContext';
import { render } from '@/utils/test-utils';
import { mapMachineBaseMock } from '@/mocks/mapFSM.mock';
import { getMockLocationFeatureDataset } from '@/mocks/featureset.mock';
import getMockISSResult from '@/mocks/mockISSResult';
import { Popup } from 'react-leaflet/Popup';

const mockMapStateMachine = {
...mapMachineBaseMock,
mapLocationFeatureDataset: getMockLocationFeatureDataset(),
};

vi.mock('react-leaflet/Popup', () => ({
Popup: ({ children }: any) => <>{children}</>,
}));

describe('LayerPopupContainer', () => {
beforeEach(() => {
vi.resetAllMocks();
});

const setup = (context?: IMapStateMachineContext) => {
return render(<LayerPopupContainer />, { mockMapMachine: context ?? mockMapStateMachine });
};

it('matches snapshot', () => {
const { asFragment } = setup();
expect(asFragment()).toMatchSnapshot();
});

it('displays the correct title for parcel data', () => {
setup();
expect(screen.getByText('LTSA ParcelMap data')).toBeInTheDocument();
});

it('displays multiple highway layers correctly', () => {
setup({
...mapMachineBaseMock,
mapLocationFeatureDataset: {
...getMockLocationFeatureDataset(),
pimsFeature: null,
parcelFeature: null,
municipalityFeature: null,
highwayFeatures: getMockISSResult().features,
},
});
expect(screen.getByText('Highway Research (1 of 2)')).toBeInTheDocument();
expect(screen.getByText('Hyperlink to plan documents:')).toBeInTheDocument();
expect(
screen.getByText(
'https://bcgov.sharepoint.com/teams/01157/Shared Documents/General/LTSA Packages/RS 4284_VIP2490RW',
),
).toBeInTheDocument();
});
});
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Feature, GeoJsonProperties } from 'geojson';
import { geoJSON, LatLngBounds, LatLngLiteral, Popup as LeafletPopup } from 'leaflet';
import React, { useEffect, useState } from 'react';
import { Popup } from 'react-leaflet';
import { Popup } from 'react-leaflet/Popup';

import { useMapStateMachine } from '@/components/common/mapFSM/MapStateMachineContext';
import { exists } from '@/utils';

import { PopupContentConfig } from './components/LayerPopupContent';
import {
Expand Down Expand Up @@ -61,7 +62,7 @@ export const LayerPopupContainer = React.forwardRef<LeafletPopup, React.PropsWit

const layersData: LayerData[] = [];

if (featureSet.parcelFeature !== null) {
if (exists(featureSet.parcelFeature)) {
const parcelData: LayerData = { title: 'LTSA ParcelMap data', data: null, config: {} };

parcelData.bounds = featureSet.parcelFeature.geometry
Expand All @@ -72,7 +73,7 @@ export const LayerPopupContainer = React.forwardRef<LeafletPopup, React.PropsWit
parcelData.feature = featureSet.parcelFeature;
layersData.push(parcelData);
}
if (featureSet.crownLandLeasesFeature !== null) {
if (exists(featureSet.crownLandLeasesFeature)) {
const parcelData: LayerData = {
title: 'Crown Land Leases',
data: null,
Expand All @@ -87,7 +88,7 @@ export const LayerPopupContainer = React.forwardRef<LeafletPopup, React.PropsWit
parcelData.feature = featureSet.crownLandLeasesFeature;
layersData.push(parcelData);
}
if (featureSet.crownLandLicensesFeature !== null) {
if (exists(featureSet.crownLandLicensesFeature)) {
const parcelData: LayerData = {
title: 'Crown Land Licenses',
data: null,
Expand All @@ -102,7 +103,7 @@ export const LayerPopupContainer = React.forwardRef<LeafletPopup, React.PropsWit
parcelData.feature = featureSet.crownLandLicensesFeature;
layersData.push(parcelData);
}
if (featureSet.crownLandTenuresFeature !== null) {
if (exists(featureSet.crownLandTenuresFeature)) {
const parcelData: LayerData = {
title: 'Crown Land Tenures',
data: null,
Expand All @@ -117,7 +118,7 @@ export const LayerPopupContainer = React.forwardRef<LeafletPopup, React.PropsWit
parcelData.feature = featureSet.crownLandTenuresFeature;
layersData.push(parcelData);
}
if (featureSet.crownLandInventoryFeature !== null) {
if (exists(featureSet.crownLandInventoryFeature)) {
const parcelData: LayerData = {
title: 'Crown Land Inventory',
data: null,
Expand All @@ -132,7 +133,7 @@ export const LayerPopupContainer = React.forwardRef<LeafletPopup, React.PropsWit
parcelData.feature = featureSet.crownLandInventoryFeature;
layersData.push(parcelData);
}
if (featureSet.crownLandInclusionsFeature !== null) {
if (exists(featureSet.crownLandInclusionsFeature)) {
const parcelData: LayerData = {
title: 'Crown Land Inclusions',
data: null,
Expand All @@ -147,7 +148,7 @@ export const LayerPopupContainer = React.forwardRef<LeafletPopup, React.PropsWit
parcelData.feature = featureSet.crownLandInclusionsFeature;
layersData.push(parcelData);
}
if (featureSet.municipalityFeature !== null) {
if (exists(featureSet.municipalityFeature)) {
const parcelData: LayerData = {
title: 'Municipality Information',
data: null,
Expand All @@ -162,20 +163,21 @@ export const LayerPopupContainer = React.forwardRef<LeafletPopup, React.PropsWit
parcelData.feature = featureSet.municipalityFeature;
layersData.push(parcelData);
}
if (featureSet.highwayFeature !== null) {
const parcelData: LayerData = {
title: 'Highway Research',
data: null,
config: {},
};

parcelData.bounds = featureSet.highwayFeature.geometry
? geoJSON(featureSet.highwayFeature.geometry).getBounds()
: undefined;
parcelData.config = highwayLayerPopupConfig;
parcelData.data = featureSet.highwayFeature.properties;
parcelData.feature = featureSet.highwayFeature;
layersData.push(parcelData);
if (exists(featureSet.highwayFeatures) && featureSet.highwayFeatures.length > 0) {
featureSet.highwayFeatures.forEach((highwayFeature, index) => {
const parcelData: LayerData = {
title: `Highway Research (${index + 1} of ${featureSet.highwayFeatures.length})`,
data: null,
config: {},
};
parcelData.bounds = highwayFeature.geometry
? geoJSON(highwayFeature.geometry).getBounds()
: undefined;
parcelData.config = highwayLayerPopupConfig;
parcelData.data = highwayFeature.properties;
parcelData.feature = highwayFeature;
layersData.push(parcelData);
});
}

setLayerPopup({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { pidParser, pinParser } from '@/utils/propertyUtils';
import { act, render, RenderOptions, userEvent } from '@/utils/test-utils';

import { ILayerPopupViewProps, LayerPopupView } from './LayerPopupView';
import getMockISSResult from '@/mocks/mockISSResult';

vi.mock('react-leaflet');

Expand Down Expand Up @@ -102,7 +103,7 @@ describe('LayerPopupView component', () => {
regionFeature: null,
districtFeature: null,
municipalityFeature: null,
highwayFeature: null,
highwayFeatures: null,
selectingComponentId: null,
crownLandLeasesFeature: null,
crownLandLicensesFeature: null,
Expand Down Expand Up @@ -144,7 +145,7 @@ describe('LayerPopupView component', () => {
regionFeature: null,
districtFeature: null,
municipalityFeature: null,
highwayFeature: null,
highwayFeatures: null,
selectingComponentId: null,
crownLandLeasesFeature: null,
crownLandLicensesFeature: null,
Expand Down Expand Up @@ -188,7 +189,7 @@ describe('LayerPopupView component', () => {
regionFeature: null,
districtFeature: null,
municipalityFeature: null,
highwayFeature: null,
highwayFeatures: null,
selectingComponentId: null,
crownLandLeasesFeature: null,
crownLandLicensesFeature: null,
Expand Down Expand Up @@ -235,7 +236,7 @@ describe('LayerPopupView component', () => {
regionFeature: null,
districtFeature: null,
municipalityFeature: null,
highwayFeature: null,
highwayFeatures: null,
selectingComponentId: null,
crownLandLeasesFeature: null,
crownLandLicensesFeature: null,
Expand Down Expand Up @@ -290,7 +291,7 @@ describe('LayerPopupView component', () => {
regionFeature: null,
districtFeature: null,
municipalityFeature: null,
highwayFeature: null,
highwayFeatures: null,
selectingComponentId: null,
crownLandLeasesFeature: null,
crownLandLicensesFeature: null,
Expand Down Expand Up @@ -338,7 +339,7 @@ describe('LayerPopupView component', () => {
regionFeature: null,
districtFeature: null,
municipalityFeature: null,
highwayFeature: null,
highwayFeatures: null,
selectingComponentId: null,
crownLandLeasesFeature: null,
crownLandLicensesFeature: null,
Expand Down Expand Up @@ -389,7 +390,7 @@ describe('LayerPopupView component', () => {
regionFeature: null,
districtFeature: null,
municipalityFeature: null,
highwayFeature: null,
highwayFeatures: null,
selectingComponentId: null,
crownLandLeasesFeature: null,
crownLandLicensesFeature: null,
Expand Down Expand Up @@ -427,7 +428,7 @@ describe('LayerPopupView component', () => {
regionFeature: null,
districtFeature: null,
municipalityFeature: null,
highwayFeature: null,
highwayFeatures: null,
selectingComponentId: null,
crownLandLeasesFeature: null,
crownLandLicensesFeature: null,
Expand Down Expand Up @@ -464,7 +465,7 @@ describe('LayerPopupView component', () => {
regionFeature: null,
districtFeature: null,
municipalityFeature: null,
highwayFeature: null,
highwayFeatures: null,
selectingComponentId: null,
crownLandLeasesFeature: null,
crownLandLicensesFeature: null,
Expand Down
Loading

0 comments on commit 406d872

Please sign in to comment.