Skip to content

Commit

Permalink
address feedbacks - bubble marker etc
Browse files Browse the repository at this point in the history
moontrip committed Oct 17, 2023
1 parent 3c1817a commit f2e906d
Showing 6 changed files with 65 additions and 31 deletions.
9 changes: 5 additions & 4 deletions packages/libs/components/public/css/vb-popbio-maps.css
Original file line number Diff line number Diff line change
@@ -263,9 +263,10 @@ path,
1px 1px 0 #ffffff;
}

/* donut marker highlight */
.highlight-donutmarker {
background-clip: padding-box;
/* donut and bubble markers highlight */
.highlight-donutmarker,
.highlight-bubblemarker {
/* background-clip: padding-box; */
border-radius: 50%;
/* add inset to reduce a gap between the element and the box-shadow */
box-shadow: 2.5px 2.5px 0px 6px rgba(255, 255, 0, 1),
@@ -275,7 +276,7 @@ path,

/* chart marker highlight */
.highlight-chartmarker {
background-clip: padding-box;
/* background-clip: padding-box; */
/* the rounded corner of the chart marker has 10px in radius */
border-radius: 10px;
/* add inset to reduce a gap between the element and the box-shadow */
21 changes: 17 additions & 4 deletions packages/libs/components/src/map/BoundsDriftMarker.tsx
Original file line number Diff line number Diff line change
@@ -12,12 +12,20 @@ export interface markerDataProp {
lat: number;
lng: number;
};
data: {
data?: {
value: number;
label: string;
color?: string;
}[];
markerType: 'donut' | 'chart';
// bubble marker's data is not array, so define it as bubbleData
bubbleData?: {
value: number;
diameter?: number;
colorValue?: number;
colorLabel?: string;
color?: string;
};
markerType: 'donut' | 'chart' | 'bubble';
}

export interface BoundsDriftMarkerProps extends MarkerProps {
@@ -30,7 +38,7 @@ export interface BoundsDriftMarkerProps extends MarkerProps {
// selectedMarkers setState
setSelectedMarkers?: React.Dispatch<React.SetStateAction<markerDataProp[]>>;
// marker type to be used for highlighting markers
markerType?: 'donut' | 'chart';
markerType?: 'donut' | 'chart' | 'bubble';
// marker data
markerData?: markerDataProp;
}
@@ -304,12 +312,15 @@ export default function BoundsDriftMarker({
// hightlight donutmarker and highlight chartmarker
if (
e.target._icon.classList.contains('highlight-donutmarker') ||
e.target._icon.classList.contains('highlight-chartmarker')
e.target._icon.classList.contains('highlight-chartmarker') ||
e.target._icon.classList.contains('highlight-bubblemarker')
) {
if (markerType === 'donut')
e.target._icon.classList.remove('highlight-donutmarker');
else if (markerType === 'chart')
e.target._icon.classList.remove('highlight-chartmarker');
else if (markerType === 'bubble')
e.target._icon.classList.remove('highlight-bubblemarker');

if (
selectedMarkers != null &&
@@ -328,6 +339,8 @@ export default function BoundsDriftMarker({
e.target._icon.classList.add('highlight-donutmarker');
else if (markerType === 'chart')
e.target._icon.classList.add('highlight-chartmarker');
else if (markerType === 'bubble')
e.target._icon.classList.add('highlight-bubblemarker');

if (
selectedMarkers != null &&
36 changes: 35 additions & 1 deletion packages/libs/components/src/map/BubbleMarker.tsx
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ export interface BubbleMarkerProps extends BoundsDriftMarkerProps {
data: {
/* The size value */
value: number;
// make this undefined?
diameter: number;
/* The color value (shown in the popup) */
colorValue?: number;
@@ -29,11 +30,39 @@ export interface BubbleMarkerProps extends BoundsDriftMarkerProps {
* this is a SVG bubble marker icon
*/
export default function BubbleMarker(props: BubbleMarkerProps) {
const selectedMarkers = props.selectedMarkers;
const setSelectedMarkers = props.setSelectedMarkers;

const { html: svgHTML, diameter: size } = bubbleMarkerSVGIcon(props);

// make a prop to pass to BoundsDriftMarker
const markerData: markerDataProp = {
id: props.id,
latLng: props.position,
// use bubbleData, not data for bubble marker
bubbleData: props.data,
markerType: 'bubble',
};

// add class, highlight-chartmarker, for panning
// Note: map panning calls for new data request, resulting that marker elements are completely regenerated, which causes new className without highlighting
// Thus, it is necessary to add a highlight for a marker based on whether it is included in the selectedMarkers
// One inevitable disadvantage is that this possibly results in on & off of highlighting (may look like a blink)
const addHighlightClassName =
selectedMarkers != null &&
selectedMarkers.length > 0 &&
selectedMarkers.some((selectedMarker) => selectedMarker.id === props.id)
? ' highlight-bubblemarker'
: '';

// set icon as divIcon
const SVGBubbleIcon = L.divIcon({
className: 'leaflet-canvas-icon', // may need to change this className but just leave it as it for now
className:
'leaflet-canvas-icon ' +
'marker-id-' +
props.id +
' bubble-marker' +
addHighlightClassName,
iconSize: new L.Point(size, size), // this will make icon to cover up SVG area!
iconAnchor: new L.Point(size / 2, size / 2), // location of topleft corner: this is used for centering of the icon like transform/translate in CSS
html: svgHTML, // divIcon HTML svg code generated above
@@ -75,6 +104,11 @@ export default function BubbleMarker(props: BubbleMarkerProps) {
},
}}
showPopup={props.showPopup}
// pass selectedMarkers state and setState
selectedMarkers={selectedMarkers}
setSelectedMarkers={setSelectedMarkers}
markerType={'bubble'}
markerData={markerData}
/>
);
}
18 changes: 4 additions & 14 deletions packages/libs/components/src/map/ChartMarker.tsx
Original file line number Diff line number Diff line change
@@ -52,14 +52,10 @@ export interface ChartMarkerProps
* - accordingly icon size could be reduced
*/
export default function ChartMarker(props: ChartMarkerProps) {
const {
html: svgHTML,
size,
sumValuesString,
// selectedMarkers state and setState
selectedMarkers,
setSelectedMarkers,
} = chartMarkerSVGIcon(props);
const selectedMarkers = props.selectedMarkers;
const setSelectedMarkers = props.setSelectedMarkers;

const { html: svgHTML, size, sumValuesString } = chartMarkerSVGIcon(props);

// make a prop to pass to BoundsDriftMarker
const markerData: markerDataProp = {
@@ -195,9 +191,6 @@ function chartMarkerSVGIcon(props: ChartMarkerStandaloneProps): {
html: string;
size: number;
sumValuesString: string;
// selectedMarkers state and setState
selectedMarkers?: markerDataProp[];
setSelectedMarkers?: React.Dispatch<React.SetStateAction<markerDataProp[]>>;
} {
const defaultLineColor = props.borderColor ?? '#7cb5ec'; // '#00000088' was also used before but unsure when
const borderWidth = props.borderWidth ?? 1;
@@ -358,9 +351,6 @@ function chartMarkerSVGIcon(props: ChartMarkerStandaloneProps): {
html: svgHTML,
size: xSize + marginX + borderWidth,
sumValuesString,
// selectedMarkers state and setState
selectedMarkers: props.selectedMarkers,
setSelectedMarkers: props.setSelectedMarkers,
};
}

11 changes: 3 additions & 8 deletions packages/libs/components/src/map/DonutMarker.tsx
Original file line number Diff line number Diff line change
@@ -109,14 +109,14 @@ function makeArc(
* this is a SVG donut marker icon
*/
export default function DonutMarker(props: DonutMarkerProps) {
const selectedMarkers = props.selectedMarkers;
const setSelectedMarkers = props.setSelectedMarkers;

const {
html: svgHTML,
size,
markerLabel,
sliceTextOverrides,
// selectedMarkers state and setState
selectedMarkers,
setSelectedMarkers,
} = donutMarkerSVGIcon(props);

// make a prop to pass to BoundsDriftMarker
@@ -248,9 +248,6 @@ function donutMarkerSVGIcon(props: DonutMarkerStandaloneProps): {
size: number;
sliceTextOverrides: string[];
markerLabel: string;
// selectedMarkers state and setState
selectedMarkers?: markerDataProp[];
setSelectedMarkers?: React.Dispatch<React.SetStateAction<markerDataProp[]>>;
} {
const scale = props.markerScale ?? MarkerScaleDefault;
const size = 40 * scale;
@@ -358,7 +355,5 @@ function donutMarkerSVGIcon(props: DonutMarkerStandaloneProps): {
size,
sliceTextOverrides,
markerLabel: sumLabel,
selectedMarkers: props.selectedMarkers,
setSelectedMarkers: props.setSelectedMarkers,
};
}
1 change: 1 addition & 0 deletions packages/libs/components/src/map/MapVEuMap.tsx
Original file line number Diff line number Diff line change
@@ -505,6 +505,7 @@ function MapVEuMapEvents(props: MapVEuMapEventsProps) {
click: () => {
removeClassName('highlight-donutmarker');
removeClassName('highlight-chartmarker');
removeClassName('highlight-bubblemarker');
if (setSelectedMarkers != null) setSelectedMarkers([]);
},
});

0 comments on commit f2e906d

Please sign in to comment.