Adding test cases

packages/client/.storybook/main.js

@@ -22,6 +22,16 @@ module.exports = {
       ],
       include: path.resolve(__dirname, "../"),
     });
+    config.module.rules.push({
+      test: /\.cjs/,
+      include: /node_modules/,
+      type: "javascript/auto",
+    });
+    config.module.rules.push({
+      test: /\.mjs/,
+      include: /node_modules/,
+      type: "javascript/auto",
+    });
     return config;
   },
 };

packages/client/src/admin/data/arcgis/ArcGISCartLegend.tsx

@@ -15,7 +15,7 @@ import Spinner from "../../../components/Spinner";
 import { Layer, Map } from "mapbox-gl";
 import {
   SeaSketchGlLayer,
-  compileLegendFromGLStyleLayers2,
+  compileLegendFromGLStyleLayers,
 } from "../../../dataLayers/legends/compileLegend";
 import { memo } from "react";
 import SimpleSymbol from "../../../dataLayers/legends/SimpleSymbol";
@@ -304,7 +304,7 @@ const SimpleLegendIconFromStyle = memo(
   }) {
     let data: LegendForGLLayers | undefined;
     try {
-      data = compileLegendFromGLStyleLayers2(props.style.layers, "vector");
+      data = compileLegendFromGLStyleLayers(props.style.layers, "vector");
     } catch (e) {
       // Do nothing
     }

packages/client/src/dataLayers/Legend.tsx

@@ -79,10 +79,12 @@ export default function Legend({
   maxHeight = maxHeight || undefined;
   return (
     <div
-      style={{
-        backdropFilter: "blur(10px)",
-      }}
-      className={`${className} shadow rounded bg-white bg-opacity-90 w-64 text-sm flex flex-col overflow-hidden`}
+      style={
+        {
+          // backdropFilter: "blur(10px)",
+        }
+      }
+      className={`${className} shadow rounded bg-white bg-opacity-95 w-64 text-sm flex flex-col overflow-hidden`}
     >
       <Accordion.Root type="single" collapsible defaultValue="legend">
         <Accordion.Item value="legend">
@@ -224,30 +226,6 @@ function PanelFactory({ panel, map }: { panel: GLLegendPanel; map?: Map }) {
   );
 }
 
-function LegendImage({
-  item,
-  className,
-}: {
-  item: LegendSymbolItem;
-  className?: string;
-}) {
-  return (
-    <img
-      className={`${className}`}
-      alt={item.label}
-      src={item.imageUrl}
-      width={
-        (item.imageWidth || 20) /
-        (window.devicePixelRatio > 1 ? window.devicePixelRatio / 1.5 : 1)
-      }
-      height={
-        (item.imageHeight || 20) /
-        (window.devicePixelRatio > 1 ? window.devicePixelRatio / 1.5 : 1)
-      }
-    />
-  );
-}
-
 function Toggle({
   visible,
   onChange,

packages/client/src/dataLayers/MapContextManager.ts

@@ -48,7 +48,7 @@ import LRU from "lru-cache";
 import debounce from "lodash.debounce";
 import { currentSidebarState } from "../projects/ProjectAppSidebar";
 import { ApolloClient, NormalizedCacheObject } from "@apollo/client";
-import { compileLegendFromGLStyleLayers2 } from "./legends/compileLegend";
+import { compileLegendFromGLStyleLayers } from "./legends/compileLegend";
 import { LegendItem } from "./Legend";
 import { EventEmitter } from "eventemitter3";
 import MeasureControl, {
@@ -2460,10 +2460,14 @@ class MapContextManager extends EventEmitter {
           if (sourceType) {
             try {
               console.time("legend2");
-              const legend2 = compileLegendFromGLStyleLayers2(
+              const legend2 = compileLegendFromGLStyleLayers(
                 layer.mapboxGlStyles,
                 sourceType
               );
+              console.log("items");
+              console.log(layer.mapboxGlStyles);
+              console.log("legend");
+              console.log(legend2);
               console.timeEnd("legend2");
 
               if (legend2) {

packages/client/src/dataLayers/legends/FillSymbol.tsx

@@ -11,11 +11,11 @@ export default function FillSymbol({
   map,
 }: {
   data: GLLegendFillSymbol;
-  map: Map;
+  map?: Map;
 }) {
   const [imageData, setImageData] = useState<LegendResolvedImage | undefined>();
   useEffect(() => {
-    if (!imageData && data.patternImageId) {
+    if (map && !imageData && data.patternImageId) {
       const resolvedImage = getImage(data.patternImageId, map);
       if (resolvedImage) {
         setImageData(resolvedImage);

packages/client/src/dataLayers/legends/LegendListPanel.tsx

@@ -22,7 +22,7 @@ export default function LegendListPanel({
               className={`flex items-center space-x-2 max-w-full`}
             >
               <div className="items-center justify-center bg-transparent">
-                {map && item.symbol ? (
+                {item.symbol ? (
                   <SimpleSymbol map={map} data={item.symbol} />
                 ) : null}
               </div>

packages/client/src/dataLayers/legends/LegendSimpleSymbolPanel.tsx

@@ -1,8 +1,5 @@
 import SimpleSymbol from "./SimpleSymbol";
-import {
-  GLLegendListPanel,
-  GLLegendSimpleSymbolPanel,
-} from "./LegendDataModel";
+import { GLLegendSimpleSymbolPanel } from "./LegendDataModel";
 import { Map } from "mapbox-gl";
 
 export default function LegendSimpleSymbolPanel({
@@ -26,7 +23,7 @@ export default function LegendSimpleSymbolPanel({
               className={`flex items-center space-x-2 max-w-full`}
             >
               <div className="items-center justify-center bg-transparent">
-                {map && item.symbol ? (
+                {item.symbol ? (
                   <SimpleSymbol map={map} data={item.symbol} />
                 ) : null}
               </div>

packages/client/src/dataLayers/legends/SimpleSymbol.tsx

@@ -8,15 +8,17 @@ import CircleSymbol from "./CircleSymbol";
 
 export default function SimpleSymbol(props: {
   data: GLLegendSymbol;
-  map: Map;
+  map?: Map;
 }) {
   switch (props.data.type) {
     case "line":
       return <LineSymbol data={props.data} />;
     case "fill":
       return <FillSymbol data={props.data} map={props.map} />;
     case "marker":
-      return <MarkerSymbol {...props.data} map={props.map} />;
+      return props.map ? (
+        <MarkerSymbol {...props.data} map={props.map} />
+      ) : null;
     case "text":
       return (
         <svg

packages/client/src/dataLayers/legends/compileLegend.ts

@@ -73,7 +73,7 @@ const SIGNIFICANT_STYLE_PROPS = [
   })) as StyleProp[]),
 ];
 
-export function compileLegendFromGLStyleLayers2(
+export function compileLegendFromGLStyleLayers(
   layers: SeaSketchGlLayer[],
   sourceType: "vector" | "raster" | "geojson" | "image" | "video" | "raster-dem"
 ): LegendForGLLayers {

packages/client/src/dataLayers/legends/glLegendPanels.test.ts

@@ -6,7 +6,7 @@ import {
   MultipleSymbolLegendForGLLayers,
 } from "./LegendDataModel";
 import {
-  compileLegendFromGLStyleLayers2,
+  compileLegendFromGLStyleLayers,
   GroupByFilterNode,
   groupByFilters,
   isGroupByFilterNode,
@@ -20,6 +20,7 @@ import {
   pluckStepPanels,
   SeaSketchGlLayer,
 } from "./compileLegend";
+import { testCases } from "./legendKitchenSinkTestCases";
 
 beforeEach(() => {
   // supress console.warn from expression evaluator
@@ -1437,7 +1438,7 @@ describe("filter panels", () => {
   });
 });
 
-describe("Kitchen sink examples", () => {
+describe("Complex test cases", () => {
   test("Choropleth with california singled-out", () => {
     const context: { layers: SeaSketchGlLayer[]; sourceType: "vector" } = {
       sourceType: "vector",
@@ -1594,15 +1595,15 @@ describe("Kitchen sink examples", () => {
       ],
     };
 
-    const legend = compileLegendFromGLStyleLayers2(context.layers, "vector");
+    const legend = compileLegendFromGLStyleLayers(context.layers, "vector");
     expect(legend.type).toBe("MultipleSymbolGLLegend");
     if (legend.type === "MultipleSymbolGLLegend") {
       expect(legend.panels.length).toBe(3);
     }
   });
 
   test("EEZ with complex expressions", () => {
-    const legend = compileLegendFromGLStyleLayers2(
+    const legend = compileLegendFromGLStyleLayers(
       [
         {
           type: "fill",
@@ -1648,7 +1649,7 @@ describe("Kitchen sink examples", () => {
   });
 
   test("EEZ with complex case+match expressions", () => {
-    const legend = compileLegendFromGLStyleLayers2(
+    const legend = compileLegendFromGLStyleLayers(
       [
         {
           type: "fill",
@@ -1694,7 +1695,7 @@ describe("Kitchen sink examples", () => {
   });
 
   test("EEZ with complex case+filter expressions", () => {
-    const legend = compileLegendFromGLStyleLayers2(
+    const legend = compileLegendFromGLStyleLayers(
       [
         {
           type: "fill",
@@ -1750,7 +1751,7 @@ describe("Kitchen sink examples", () => {
   });
 
   test("EEZ (complex w/only filters)", () => {
-    const legend = compileLegendFromGLStyleLayers2(
+    const legend = compileLegendFromGLStyleLayers(
       [
         {
           type: "fill",
@@ -1816,7 +1817,7 @@ describe("Kitchen sink examples", () => {
   });
 
   test("EEZ w/filter by country and default style", () => {
-    const legend = compileLegendFromGLStyleLayers2(
+    const legend = compileLegendFromGLStyleLayers(
       [
         {
           type: "line",
@@ -2137,3 +2138,12 @@ describe("groupByFilters", () => {
     expect(filterNode.children.length).toBe(2);
   });
 });
+
+describe("Kitchen sink", () => {
+  test.each(Object.keys(testCases))("Kitchen sink: %s", (name: string) => {
+    // @ts-ignore
+    const { input, output } = testCases[name];
+    const legendData = compileLegendFromGLStyleLayers(input, "vector");
+    expect(legendData).toMatchObject(output);
+  });
+});