Skip to content

Commit

Permalink
Merge pull request #106 from Vizzuality/fix/tooltip
Browse files Browse the repository at this point in the history 
projects layer width
  • Loading branch information
@anamontiaga
anamontiaga authored Apr 10, 2024
2 parents 92eb0dc + 54e3fbe commit aa4575d
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 55 deletions.
6 changes: 3 additions & 3 deletions client/src/containers/charts/single-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@ export default function SingleBar({
{formatCompactNumber(data['value'].total_funding || 0)}
</p>

<div className="flex h-10 w-full rounded-[4px]">
<div className="flex h-10 w-full">
<Tooltip>
<TooltipTrigger asChild>
<div
className="h-full cursor-pointer bg-[#70CCB0]"
className="h-full cursor-pointer rounded-bl-[4px] rounded-tl-[4px] bg-[#70CCB0] hover:border-2 hover:border-[#D48D00]"
style={{
width: `${(data['value'].afoco_funding * 100) / data['value'].total_funding}%`,
}}
Expand All @@ -45,7 +45,7 @@ export default function SingleBar({
<Tooltip>
<TooltipTrigger asChild>
<div
className="h-full cursor-pointer bg-[#FFCC73]"
className="h-full cursor-pointer rounded-br-[4px] rounded-tr-[4px] bg-[#FFCC73] hover:border-2 hover:border-[#D48D00]"
style={{
width: `${(data['value'].national_funding * 100) / data['value'].total_funding}%`,
}}
Expand Down
9 changes: 4 additions & 5 deletions client/src/containers/datasets/layers/projects/hooks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export function useLayers({
settings: { opacity: LayerSettings['opacity']; visibility: LayerSettings['visibility'] };
}): LayerProps[] {
const hoveredProject = useAtomValue(hoveredProjectMapAtom);

// The layer is designed to react both to hover events directly on the map and to hover events over a specific project listed in a sidebar.

// Reactivity to Hover Events on the Map:
Expand Down Expand Up @@ -58,10 +57,10 @@ export function useLayers({
'case',
['boolean', ['feature-state', 'hover'], false],
13,
['all', ['to-boolean', hoveredProject], ['!=', ['get', 'project_code'], hoveredProject]],
10,
['all', ['to-boolean', hoveredProject], ['==', ['get', 'project_code'], hoveredProject]],
13,
// ['all', ['to-boolean', hoveredProject], ['!=', ['get', 'project_code'], hoveredProject]],
// 10,
// ['all', ['to-boolean', hoveredProject], ['==', ['get', 'project_code'], hoveredProject]],
// 10,
10,
],
'circle-color': '#176252',
Expand Down
136 changes: 89 additions & 47 deletions client/src/containers/map/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { useParams, useRouter } from 'next/navigation';

import bbox from '@turf/bbox';
import { useAtomValue, useSetAtom, useAtom } from 'jotai';
import { MapboxGeoJSONFeature } from 'mapbox-gl';

import { bboxAtom, hoveredProjectMapAtom, layersInteractiveIdsAtom, tmpBboxAtom } from '@/store';

Expand Down Expand Up @@ -49,18 +48,20 @@ const DEFAULT_PROPS: CustomMapProps = {
maxZoom: 20,
};

const INITIAL_PROJECTS_POPUP = {
position: null,
popup: null,
info: null,
};

export default function MapContainer() {
const { id, initialViewState, minZoom, maxZoom } = DEFAULT_PROPS;
const queryParams = useSyncQueryParams();
const [locationPopUp, setLocationPopUp] = useState<{
position: { x: number; y: number } | null;
popup: number[] | null;
info: string | null;
}>({
position: null,
popup: null,
info: null,
});
}>(INITIAL_PROJECTS_POPUP);

const { [id]: map } = useMap();
const { push } = useRouter();
Expand Down Expand Up @@ -149,54 +150,92 @@ export default function MapContainer() {

const handleMouseMove = useCallback(
(e: MapLayerMouseEvent) => {
const findLayer = (layerId: string) => e?.features?.find(({ layer }) => layer.id === layerId);
const ProjectsLayer = findLayer('projects_circle');
const ProjectsFillLayer = findLayer('projects_fill');

const handleLayerInteraction = (
layer: MapboxGeoJSONFeature | undefined,
sourceLayer: string,
stateIdVar: any | null
) => {
if (layer && map) {
setCursor('pointer');

const projectCode = layer.properties?.project_code;
setHoveredProjectMap(projectCode);
setLocationPopUp({
popup: [e?.lngLat.lat, e?.lngLat.lng],
position: { x: e.point.x, y: e.point.y },
info: projectCode,
});

if (stateIdVar !== null) {
map.setFeatureState(
{ sourceLayer, source: 'projects', id: stateIdVar },
{ hover: false }
);
}

stateIdVar = projectCode;
map.setFeatureState({ sourceLayer, source: 'projects', id: stateIdVar }, { hover: true });
const ProjectsLayer =
e?.features && e?.features.find(({ layer }) => layer.id === 'projects_circle');
const ProjectsFillLayer =
e?.features && e?.features.find(({ layer }) => layer.id === 'projects_fill');
// *ON MOUSE ENTER
if (e.features && map && ProjectsLayer) {
setCursor('pointer');
setHoveredProjectMap(ProjectsLayer.properties?.project_code);
setLocationPopUp({
popup: [e?.lngLat.lat, e?.lngLat.lng],
position: {
x: e.point.x,
y: e.point.y,
},
info: ProjectsLayer.properties?.project_code,
});
}

if (e.features && map && ProjectsFillLayer) {
setCursor('pointer');
setHoveredProjectMap(ProjectsFillLayer.properties?.project_code);
setLocationPopUp({
popup: [e?.lngLat.lat, e?.lngLat.lng],
position: {
x: e.point.x,
y: e.point.y,
},
info: ProjectsFillLayer.properties?.project_code,
});
}

if (ProjectsLayer && map) {
if (hoveredStateIdProjectsCircle !== null) {
map?.setFeatureState(
{
sourceLayer: 'areas_centroids_c',
source: 'projects',
id: hoveredStateIdProjectsCircle,
},
{ hover: false }
);
}

hoveredStateIdProjectsCircle = ProjectsLayer?.properties?.project_code as string;
map?.setFeatureState(
{
sourceLayer: 'areas_centroids_c',
source: 'projects',
id: hoveredStateIdProjectsCircle,
},
{ hover: true }
);
}
if (ProjectsFillLayer && map) {
if (hoveredStateIdProjectsFill !== null) {
map?.setFeatureState(
{
sourceLayer: 'areas_centroids_l',
source: 'projects',
id: hoveredStateIdProjectsFill,
},
{ hover: false }
);
}
};

handleLayerInteraction(ProjectsLayer, 'areas_centroids_c', hoveredStateIdProjectsCircle);
handleLayerInteraction(ProjectsFillLayer, 'areas_centroids_l', hoveredStateIdProjectsFill);
hoveredStateIdProjectsFill = ProjectsFillLayer?.properties?.project_code as string;
map?.setFeatureState(
{
sourceLayer: 'areas_centroids_l',
source: 'projects',
id: hoveredStateIdProjectsFill,
},
{ hover: true }
);
}

// *ON MOUSE LEAVE

if (e.features?.length === 0) {
setCursor('grab');
setHoveredProjectMap(null);
setLocationPopUp({
popup: null,
position: null,
info: null,
});
setLocationPopUp(INITIAL_PROJECTS_POPUP);
}

if (!ProjectsLayer && map && hoveredStateIdProjectsCircle) {
map.setFeatureState(
map?.setFeatureState(
{
sourceLayer: 'areas_centroids_c',
source: 'projects',
Expand All @@ -206,10 +245,13 @@ export default function MapContainer() {
);
hoveredStateIdProjectsCircle = null;
}

if (!ProjectsFillLayer && map && hoveredStateIdProjectsFill) {
map.setFeatureState(
{ sourceLayer: 'areas_centroids_l', source: 'projects', id: hoveredStateIdProjectsFill },
map?.setFeatureState(
{
sourceLayer: 'areas_centroids_l',
source: 'projects',
id: hoveredStateIdProjectsFill,
},
{ hover: false }
);
hoveredStateIdProjectsFill = null;
Expand Down

0 comments on commit aa4575d

Please sign in to comment.