Skip to content

Commit

Permalink
Fix for gradient legend rendering crash
Browse files Browse the repository at this point in the history
  • Loading branch information
@underbluewaters
underbluewaters committed Dec 11, 2023
1 parent c8577dc commit 0cc4f9a
Showing 1 changed file with 123 additions and 106 deletions.
229 changes: 123 additions & 106 deletions packages/client/src/dataLayers/Legend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import LegendMarkerSizePanel from "./legends/LegendMarkerSizePanel";
import LegendStepPanel from "./legends/LegendStepPanel";
import LegendSimpleSymbolPanel from "./legends/LegendSimpleSymbolPanel";
import { useLocalForage } from "../useLocalForage";
import { ErrorBoundary } from "@sentry/react";
require("../admin/data/arcgis/Accordion.css");

interface SingleImageLegendItem {
Expand Down Expand Up @@ -139,47 +140,21 @@ export default function Legend({
const visible =
!hiddenItems || !hiddenItems.includes(item.id);
return (
<li
key={item.id}
className={`flex items-center space-x-2 max-w-full ${
hiddenItems && hiddenItems.includes(item.id)
? "opacity-50"
: "opacity-100"
}`}
>
<div className="items-center justify-center bg-transparent">
{map && legend ? (
<SimpleSymbol map={map} data={legend.symbol} />
) : null}
</div>
<ErrorBoundary>
<li
key={item.id}
className={`flex items-center space-x-2 max-w-full ${
hiddenItems && hiddenItems.includes(item.id)
? "opacity-50"
: "opacity-100"
}`}
>
<div className="items-center justify-center bg-transparent">
{map && legend ? (
<SimpleSymbol map={map} data={legend.symbol} />
) : null}
</div>

<span title={item.label} className="truncate flex-1">
{item.label}
</span>
{onHiddenItemsChange && (
<Toggle
onChange={() => {
if (onHiddenItemsChange) {
onHiddenItemsChange(
item.id,
!hiddenItems.includes(item.id)
);
}
}}
visible={visible}
/>
)}
</li>
);
} else if (legend.type === "MultipleSymbolGLLegend") {
return (
<li
key={item.id}
className={`max-w-full ${
visible ? "opacity-100" : "opacity-50"
}`}
>
<div className="flex items-center space-x-1 mb-0.5">
<span title={item.label} className="truncate flex-1">
{item.label}
</span>
Expand All @@ -196,65 +171,72 @@ export default function Legend({
visible={visible}
/>
)}
</div>
<ul className="text-sm mb-1">
{legend.panels.map((panel) => (
<PanelFactory
key={panel.id}
map={map}
panel={panel}
/>
))}
</ul>
</li>
</li>
</ErrorBoundary>
);
} else if (legend.type === "MultipleSymbolGLLegend") {
return (
<ErrorBoundary>
<li
key={item.id}
className={`max-w-full ${
visible ? "opacity-100" : "opacity-50"
}`}
>
<div className="flex items-center space-x-1 mb-0.5">
<span
title={item.label}
className="truncate flex-1"
>
{item.label}
</span>
{onHiddenItemsChange && (
<Toggle
onChange={() => {
if (onHiddenItemsChange) {
onHiddenItemsChange(
item.id,
!hiddenItems.includes(item.id)
);
}
}}
visible={visible}
/>
)}
</div>
<ul className="text-sm mb-1">
{legend.panels.map((panel) => (
<PanelFactory
key={panel.id}
map={map}
panel={panel}
/>
))}
</ul>
</li>
</ErrorBoundary>
);
} else {
return null;
}
} else if (item.type === "CustomGLSourceSymbolLegend") {
if (item.symbols.length <= 1) {
return (
<li
key={item.id}
className={`flex items-center space-x-2 max-w-full ${
hiddenItems && hiddenItems.includes(item.id)
? "opacity-50"
: "opacity-100"
}`}
>
{item.symbols.length > 0 && (
<div className="items-center justify-center bg-transparent">
<LegendImage item={item.symbols[0]} />
</div>
)}
<ErrorBoundary>
<li
key={item.id}
className={`flex items-center space-x-2 max-w-full ${
hiddenItems && hiddenItems.includes(item.id)
? "opacity-50"
: "opacity-100"
}`}
>
{item.symbols.length > 0 && (
<div className="items-center justify-center bg-transparent">
<LegendImage item={item.symbols[0]} />
</div>
)}

<span title={item.label} className="truncate flex-1">
{item.label}
</span>
{onHiddenItemsChange && (
<Toggle
onChange={() => {
if (onHiddenItemsChange) {
onHiddenItemsChange(
item.id,
!hiddenItems.includes(item.id)
);
}
}}
visible={visible}
/>
)}
</li>
);
} else {
return (
<li
key={item.id}
className={`max-w-full ${
visible ? "opacity-100" : "opacity-50"
}`}
>
<div className="flex items-center space-x-1 mb-0.5">
<span title={item.label} className="truncate flex-1">
{item.label}
</span>
Expand All @@ -271,21 +253,56 @@ export default function Legend({
visible={visible}
/>
)}
</div>
<ul className="text-sm mb-1">
{item.symbols.map((symbol) => {
return (
<li
className="flex items-center space-x-2"
key={symbol.id}
>
<LegendImage item={symbol} />
<span className="truncate">{symbol.label}</span>
</li>
);
})}
</ul>
</li>
</li>
</ErrorBoundary>
);
} else {
return (
<ErrorBoundary>
<li
key={item.id}
className={`max-w-full ${
visible ? "opacity-100" : "opacity-50"
}`}
>
<div className="flex items-center space-x-1 mb-0.5">
<span
title={item.label}
className="truncate flex-1"
>
{item.label}
</span>
{onHiddenItemsChange && (
<Toggle
onChange={() => {
if (onHiddenItemsChange) {
onHiddenItemsChange(
item.id,
!hiddenItems.includes(item.id)
);
}
}}
visible={visible}
/>
)}
</div>
<ul className="text-sm mb-1">
{item.symbols.map((symbol) => {
return (
<li
className="flex items-center space-x-2"
key={symbol.id}
>
<LegendImage item={symbol} />
<span className="truncate">
{symbol.label}
</span>
</li>
);
})}
</ul>
</li>
</ErrorBoundary>
);
}
} else if (item.type === "SingleImageLegendItem") {
Expand Down

0 comments on commit 0cc4f9a

Please sign in to comment.