Skip to content

Commit

Permalink
legend fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mluena
mluena committed Jan 28, 2025
1 parent 28b8196 commit c81f00e
Show file tree
Hide file tree
Showing 14 changed files with 283 additions and 188 deletions.
4 changes: 2 additions & 2 deletions client/src/app/report/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ export const metadata: Metadata = {
export default function ReportPage() {
return (
<PageProviders>
<main className="relative flex min-h-[calc(100svh_-_theme(space.20)_+_1px)] flex-col">
<div className="pointer-events-none absolute left-0 top-10 z-10 w-full">
<main className="relative flex min-h-[calc(100svh_-_theme(space.20)_+_20px)] flex-col">
<div className="pointer-events-none absolute bottom-8 left-0 top-10 z-10 w-full">
<div className="container">
<ReportLocation />
</div>
Expand Down
111 changes: 72 additions & 39 deletions client/src/components/map/sketch/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { useCallback, useEffect, useRef } from "react";

import dynamic from "next/dynamic";

import Color from "@arcgis/core/Color";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel";

Expand All @@ -19,7 +18,7 @@ export type SketchProps = {
enabled?: boolean;
onCreate?: (graphic: __esri.Graphic) => void;
onCancel?: () => void;
onUpdate?: (graphic: __esri.Graphic) => void; // New callback for updates
onUpdate?: (graphic: __esri.Graphic) => void;
};

export default function Sketch({ type, enabled, onCreate, onCancel, onUpdate }: SketchProps) {
Expand Down Expand Up @@ -51,45 +50,74 @@ export default function Sketch({ type, enabled, onCreate, onCancel, onUpdate }:

const handleSketchUpdate = useCallback(
(e: __esri.SketchViewModelUpdateEvent) => {
e.graphics.forEach((graphic) => {
if (graphic.geometry.type === "polygon") {
graphic.symbol = {
type: "simple-fill",
color: new Color([0, 255, 255, 0.2]),
outline: {
if (e.state === "start" && e.graphics.length) {
e.graphics.forEach((graphic) => {
if (graphic.geometry.type === "polygon") {
graphic.symbol = {
type: "simple-fill",
color: "#009ADE33",
outline: {
type: "line",
color: "#196E8C",
width: 1,
style: "long-dash",
},
} as unknown as __esri.SimpleFillSymbol;

// graphic.symbol = {
// type: POLYGON_SYMBOL.type,
// } as unknown as __esri.SimpleFillSymbol;
}

if (graphic.geometry.type === "polyline") {
graphic.symbol = {
type: "simple-line",
color: "black",
width: 2,
style: "dash",
},
} as unknown as __esri.SimpleFillSymbol;
}

if (graphic.geometry.type === "polyline") {
graphic.symbol = {
type: "simple-line",
color: "blue",
width: 2,
style: "dash",
} as unknown as __esri.SimpleLineSymbol;
}

if (graphic.geometry.type === "point") {
graphic.symbol = {
type: "simple-marker",
style: "circle",
color: "red",
size: "12px",
outline: {
type: "simple-line",
color: "black",
width: 1,
},
} as unknown as __esri.SimpleMarkerSymbol;
}
});
color: "red",
outline: {
type: "simple-line",
color: "#196E8C",
width: 1,
style: "long-dash",
},
} as unknown as __esri.SimpleLineSymbol;
}

if (graphic.geometry.type === "point") {
graphic.symbol = {
type: "simple-marker",
style: "circle",
color: "#009ADE",
opacity: 0.5,
size: "12px",
outline: {
type: "simple-line",
color: "black",
width: 1,
},
} as unknown as __esri.SimpleMarkerSymbol;
}
});
}

if (e.state === "complete" && e.graphics.length) {
e.graphics.forEach((graphic) => {
if (graphic.geometry.type === "polygon") {
graphic.symbol = {
type: "simple-fill",
color: "#009ADE33",
outline: {
type: "simple-line",
color: "#196E8C",
width: 1,
style: "solid",
},
} as unknown as __esri.SimpleFillSymbol;

// graphic.symbol = {
// type: POLYGON_SYMBOL.type,
// } as unknown as __esri.SimpleFillSymbol;
}
});
const updatedGraphic = e.graphics[0].clone();
if (onUpdate) onUpdate(updatedGraphic);
}
Expand All @@ -112,14 +140,19 @@ export default function Sketch({ type, enabled, onCreate, onCancel, onUpdate }:
pointSymbol: POINT_SYMBOL,
polylineSymbol: POLYLINE_SYMBOL,
polygonSymbol: POLYGON_SYMBOL,
// tooltipOptions: {
// enabled: true,
// helpMessage: "Click to start drawing",
// },
defaultCreateOptions: {
hasZ: false,
},
defaultUpdateOptions: {
tool: "reshape",
enableRotation: false,
toggleToolOnClick: false,
toggleToolOnClick: true,
},
updateOnGraphicClick: true,
});

sketchViewModelRef.current = sketchViewModel;
Expand Down
89 changes: 43 additions & 46 deletions client/src/containers/map/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { useLocationGeometry } from "@/lib/location";

import { useSyncLocation } from "@/app/store";

import { Card } from "@/containers/card";
import SelectedLayer from "@/containers/report/map/layer-manager/selected-layer";

import Controls from "@/components/map/controls";
Expand Down Expand Up @@ -49,51 +48,49 @@ export default function WidgetMap({ layers, ...viewProps }: WidgetMapProps) {

return (
<div className="relative h-full print:h-96">
<Card className="h-full p-0">
<Map
id="overview"
{...(GEOMETRY?.extent && {
defaultBbox: [
GEOMETRY?.extent.xmin,
GEOMETRY?.extent.ymin,
GEOMETRY?.extent.xmax,
GEOMETRY?.extent.ymax,
],
bbox: undefined,
})}
mapProps={{
basemap: undefined,
}}
viewProps={{
navigation: {
mouseWheelZoomEnabled: false,
browserTouchPanEnabled: false,
},
...viewProps,
}}
>
<Layer layer={BASEMAP_LAYER} index={0} />

{layers.map((layer, index, arr) => {
const i = arr.length - index;

// if (layer.type === "feature" && "customParameters" in layer) {
// i = layer?.customParameters?.position === "top" ? arr.length + 3 : arr.length - index;
// }

return <Layer key={layer.id} layer={layer} index={i} GEOMETRY={GEOMETRY} />;
})}

<SelectedLayer index={layers.length + 1} location={location} />

<Layer layer={LABELS_LAYER} index={layers.length + 2} />

<Controls>
<FullscreenControl />
<ZoomControl />
</Controls>
</Map>
</Card>
<Map
id="overview"
{...(GEOMETRY?.extent && {
defaultBbox: [
GEOMETRY?.extent.xmin,
GEOMETRY?.extent.ymin,
GEOMETRY?.extent.xmax,
GEOMETRY?.extent.ymax,
],
bbox: undefined,
})}
mapProps={{
basemap: undefined,
}}
viewProps={{
navigation: {
mouseWheelZoomEnabled: false,
browserTouchPanEnabled: false,
},
...viewProps,
}}
>
<Layer layer={BASEMAP_LAYER} index={0} />

{layers.map((layer, index, arr) => {
const i = arr.length - index;

// if (layer.type === "feature" && "customParameters" in layer) {
// i = layer?.customParameters?.position === "top" ? arr.length + 3 : arr.length - index;
// }

return <Layer key={layer.id} layer={layer} index={i} GEOMETRY={GEOMETRY} />;
})}

<SelectedLayer index={layers.length + 1} location={location} />

<Layer layer={LABELS_LAYER} index={layers.length + 2} />

<Controls>
<FullscreenControl />
<ZoomControl />
</Controls>
</Map>
</div>
);
}
8 changes: 4 additions & 4 deletions client/src/containers/report/location/confirm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ export default function Confirm() {
if (!location) return null;

return (
<div className="flex w-full flex-col justify-between gap-4 overflow-hidden rounded-lg bg-blue-50 p-4 text-sm">
<div className="flex w-full flex-col justify-between gap-2 overflow-hidden text-sm">
<div className="flex items-end justify-between">
<div className="text-sm font-semibold leading-tight">{TITLE}</div>
<div className="text-gray-500">
<div className="text-sm font-semibold leading-tight text-foreground">{TITLE}</div>
<div className="text-xs text-gray-500">
{formatNumber(AREA, {
maximumFractionDigits: 0,
})}{" "}
Expand All @@ -43,7 +43,7 @@ export default function Confirm() {
</Button>

<Button size="lg" className="grow" onClick={() => setReportPanel("topics")}>
Select
Confirm
</Button>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions client/src/containers/report/location/grid/filters-controls/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@ export default function GridFiltersControls() {

return (
<div className="flex items-start justify-between gap-4">
<button className="flex items-center space-x-1" type="button" onClick={handleFiltersView}>
<Checkbox id="selected-filters" />
<div className="flex items-center space-x-1">
<Checkbox id="selected-filters" onCheckedChange={handleFiltersView} />
<Label htmlFor="selected-filters" className="text-start text-xs text-muted-foreground">
View selected indicators only
</Label>
</button>
</div>
<button
type="button"
disabled={!gridDatasets.length}
Expand Down
62 changes: 33 additions & 29 deletions client/src/containers/report/location/grid/filters/item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,35 +115,39 @@ export default function GridFiltersItem(dataset: DatasetMeta) {
>
<TooltipTrigger asChild>
<CollapsibleTrigger className="flex w-full items-center justify-between">
<div className="relative flex max-w-72 items-start space-x-1">
<h3 className="max-w-80 text-left text-sm font-medium text-gray-400">
{dataset.label} {` (${dataset.unit})`}
</h3>
<div className="flex-shrink-0">
<Tooltip delayDuration={100}>
<Dialog>
<TooltipTrigger asChild>
<DialogTrigger
className={cn("flex h-4 w-4 cursor-pointer items-center justify-center")}
>
<LuInfo className="text-foreground" />
</DialogTrigger>
</TooltipTrigger>
<DialogContent className="p-0">
<DialogTitle className="sr-only">About the data</DialogTitle>
<div className="p-4">
<p>{dataset.description}</p>
</div>
<DialogClose />
</DialogContent>
<TooltipPortal>
<TooltipContent sideOffset={0}>
About the data
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Dialog>
</Tooltip>
<div className="relative flex max-w-[350px] items-start space-x-1">
<div className="relative w-fit">
<h3 className="w-fit flex-wrap pr-5 text-left text-sm font-medium text-gray-400">
{dataset.label} {` (${dataset.unit})`}
</h3>
<div className="absolute right-0 top-0">
<Tooltip delayDuration={100}>
<Dialog>
<TooltipTrigger asChild>
<DialogTrigger
className={cn(
"flex h-4 w-4 cursor-pointer items-center justify-center",
)}
>
<LuInfo className="text-foreground" />
</DialogTrigger>
</TooltipTrigger>
<DialogContent className="p-0">
<DialogTitle className="sr-only">About the data</DialogTitle>
<div className="p-4">
<p>{dataset.description}</p>
</div>
<DialogClose />
</DialogContent>
<TooltipPortal>
<TooltipContent sideOffset={0}>
About the data
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Dialog>
</Tooltip>
</div>
</div>
</div>

Expand Down
Loading

0 comments on commit c81f00e

Please sign in to comment.