@devgateway/dvz-ui-react 1.6.20 → 1.7.0

package/dist/esm/embeddable/d3Map/DataLayer.js

@@ -1,14 +1,14 @@
-import { jsx as Z } from "react/jsx-runtime";
+import { jsx as tt } from "react/jsx-runtime";
 import "react";
-import pt from "./BaseLayer.js";
-import ct from "../data/DataProvider.js";
-import ut from "../data/DataConsumer.js";
-import * as M from "d3";
-import { injectIntl as dt } from "react-intl";
-import Y from "./BreaksStyles.js";
-import ot from "./GradientColors.js";
-const W = (D) => D ? D.toString().replace(/ /g, "_") : "", k = (D) => D ? "pattern_" + W(D) : "";
-class ht extends pt {
+import ct from "./BaseLayer.js";
+import dt from "../data/D3MapDataProvider.js";
+import ut from "../data/D3MapDataConsumer.js";
+import * as W from "d3";
+import { injectIntl as ht } from "react-intl";
+import Z from "./BreaksStyles.js";
+import lt from "./GradientColors.js";
+const H = (D) => D ? D.toString().replace(/ /g, "_") : "", k = (D) => D ? "pattern_" + H(D) : "";
+class ft extends ct {
   constructor() {
     super(), this.state = { geoJson: null, json: null }, this.getTooltipVariables = this.getTooltipVariables.bind(this), this.resize = this.resize.bind(this), this.createLayer = this.createLayer.bind(this), this.createCentroids = this.createCentroids.bind(this), this.createPatterns = this.createPatterns.bind(this), this.createPaths = this.createPaths.bind(this);
   }
@@ -20,29 +20,23 @@ class ht extends pt {
     const {
       markerLabelSize: e,
       markFillColor: l,
-      markBorderColor: C,
+      markBorderColor: v,
       markSizeScale: i,
       measures: u,
-      data: h,
-      breaks: c,
-      gradientScheme: x,
-      gradientReverse: o,
-      labelFontSize: f
-    } = this.props, n = this.props.transform ? this.props.transform.k : 1;
+      data: y,
+      breaks: n,
+      gradientScheme: w,
+      gradientReverse: s,
+      labelFontSize: m
+    } = this.props, o = this.props.transform ? this.props.transform.k : 1;
     super.resize();
-    const d = new Y({
-      breaks: c,
+    const c = new Z({
+      breaks: n,
       defaultFillColor: l,
-      defaultBorderColor: C,
+      defaultBorderColor: v,
       defaultSize: i
     });
-    new ot({
-      data: h.children,
-      measure: u[0],
-      defaultFillColor: l,
-      gradientScheme: x,
-      gradientReverse: o
-    }), this.g.selectAll(".centroids .point").attr("r", (p) => d.getSize(p.properties._value) * 1 / n), this.g.selectAll(".point-label").attr("font-size", (p) => e * (1 / n) + "px");
+    this.g.selectAll(".centroids .point").attr("r", (p) => c.getSize(p.properties._value) * 1 / o), this.g.selectAll(".point-label").attr("font-size", (p) => e * (1 / o) + "px");
   }
   getTooltipVariables(e) {
     const { apiJoinAttribute: l } = this.props;
@@ -58,260 +52,270 @@ class ht extends pt {
   createDataLayer(e) {
     const {
       app: l,
-      svg: C,
+      svg: v,
       format: i,
       id: u,
-      file: h,
-      path: c,
-      onLayerCreated: x,
-      labelFilter: o = [],
-      labelField: f,
-      labelFontSize: n,
-      labelColor: d,
+      file: y,
+      path: n,
+      onLayerCreated: w,
+      labelFilter: s = [],
+      labelField: m,
+      labelFontSize: o,
+      labelColor: c,
       fillColor: p,
-      borderColor: m,
-      tooltip: z,
+      borderColor: g,
+      tooltip: x,
       markFillColor: b,
-      markLabelColor: T,
-      markBorderColor: J,
-      markSizeScale: N,
-      markerLabelSize: H,
-      featureJoinAttribute: tt,
-      apiJoinAttribute: K,
-      measures: I,
-      editing: et,
-      data: w,
+      markLabelColor: J,
+      markBorderColor: R,
+      markSizeScale: G,
+      markerLabelSize: K,
+      featureJoinAttribute: et,
+      apiJoinAttribute: Q,
+      measures: $,
+      editing: rt,
+      data: C,
       patternDiscriminator: S,
-      patternDiscriminatorLabel: Q,
-      breaks: $,
-      gradientScheme: G,
-      gradientReverse: E,
+      patternDiscriminatorLabel: X,
+      breaks: I,
+      gradientScheme: N,
+      gradientReverse: U,
       patterns: L,
-      projection: rt,
-      useBreaks: X,
-      useGradients: V,
-      useCentroidPoint: U,
-      usePattern: j,
-      waitForFilters: at,
-      intl: q,
-      patternsVisible: R = !0,
-      togglePatterns: B,
+      projection: at,
+      useBreaks: Y,
+      useGradients: T,
+      useCentroidPoint: j,
+      usePattern: q,
+      waitForFilters: it,
+      intl: M,
+      patternsVisible: B = !0,
+      togglePatterns: E,
       colorLayerVisible: O = !0,
-      visible: it
+      visible: st
     } = this.props;
     if (this.gRef && this.gRef.current) {
-      this.g = M.select(this.gRef.current), this.g.attr("class", "base-layer");
-      const F = e.features.filter((A) => A.properties._value != null);
-      this.createPaths(e), U || this.createColors(F), j && this.createPatterns(e), f != "none" && this.createLabels(e), U && this.createCentroids(F);
+      this.g = W.select(this.gRef.current), this.g.attr("class", "base-layer");
+      const z = e.features.filter((V) => V.properties._value != null);
+      this.createPaths(e), j || this.createColors(z), q && this.createPatterns(e), m != "none" && this.createLabels(e), j && this.createCentroids(z);
     }
   }
   createColors(e) {
     const {
       app: l,
-      svg: C,
+      svg: v,
       format: i,
       id: u,
-      file: h,
-      path: c,
-      onLayerCreated: x,
-      labelFilter: o = [],
-      labelField: f,
-      labelFontSize: n,
-      labelColor: d,
+      file: y,
+      path: n,
+      onLayerCreated: w,
+      labelFilter: s = [],
+      labelField: m,
+      labelFontSize: o,
+      labelColor: c,
       fillColor: p,
-      borderColor: m,
-      tooltip: z,
+      borderColor: g,
+      tooltip: x,
       markFillColor: b,
-      markLabelColor: T,
-      markBorderColor: J,
-      markSizeScale: N,
-      markerLabelSize: H,
-      featureJoinAttribute: tt,
-      apiJoinAttribute: K,
-      measures: I,
-      editing: et,
-      data: w,
+      markLabelColor: J,
+      markBorderColor: R,
+      markSizeScale: G,
+      markerLabelSize: K,
+      featureJoinAttribute: et,
+      apiJoinAttribute: Q,
+      measures: $,
+      editing: rt,
+      data: C,
       patternDiscriminator: S,
-      patternDiscriminatorLabel: Q,
-      breaks: $,
-      gradientScheme: G,
-      gradientReverse: E,
+      patternDiscriminatorLabel: X,
+      breaks: I,
+      gradientScheme: N,
+      gradientReverse: U,
       patterns: L,
-      projection: rt,
-      useBreaks: X,
-      useGradients: V,
-      useCentroidPoint: U,
-      usePattern: j,
-      waitForFilters: at,
-      intl: q,
-      patternsVisible: R = !0,
-      togglePatterns: B,
+      projection: at,
+      useBreaks: Y,
+      useGradients: T,
+      useCentroidPoint: j,
+      usePattern: q,
+      waitForFilters: it,
+      intl: M,
+      patternsVisible: B = !0,
+      togglePatterns: E,
       colorLayerVisible: O = !0,
-      visible: it
-    } = this.props, F = new Y({
-      breaks: $,
+      visible: st
+    } = this.props, { gradientStartColor: z, gradientEndColor: V } = this.props, d = new Z({
+      breaks: I,
       defaultFillColor: b,
-      defaultBorderColor: J,
-      defaultSize: N
-    }), A = new ot({
-      data: w.children,
-      measure: I[0],
+      defaultBorderColor: R,
+      defaultSize: G
+    }), A = new lt({
+      data: C ? C.children : [],
+      measure: $[0],
       defaultFillColor: b,
-      gradientScheme: G,
-      gradientReverse: E
+      gradientScheme: N,
+      gradientReverse: U,
+      gradientStartColor: z,
+      gradientEndColor: V
     });
-    this.g && (this.g.selectAll("path").attr("fill", (s) => !s || !s.properties || !s.properties._value ? p : V ? A.getColor(s.properties._value) : F.getColor(s.properties._value)).attr("stroke", m).attr("id", "state-borders").attr("d", c).on("mouseenter", (s, y) => {
-      y.properties._value && this.showToolTip(z, this.getTooltipVariables(y), V ? A.getColor(y.properties._value) : F.getColor(y.properties._value), y);
-    }).on("mouseleave", (s) => {
-      this.hiddenToolTip(s);
-    }).on("mousemove", (s) => {
-      this.moveToolTip(s);
+    this.g && (this.g.selectAll("path").attr("fill", (h) => !h || !h.properties || !h.properties._value ? p : T ? A.getColor(h.properties._value) : d.getColor(h.properties._value)).attr("stroke", g).attr("id", "state-borders").attr("d", n).on("mouseenter", (h, r) => {
+      r.properties._value && this.showToolTip(x, this.getTooltipVariables(r), T ? A.getColor(r.properties._value) : d.getColor(r.properties._value), r);
+    }).on("mouseleave", (h) => {
+      this.hiddenToolTip(h);
+    }).on("mousemove", (h) => {
+      this.moveToolTip(h);
     }), O || this.g.selectAll(".borders").style("fill", this.props.fillColor), this.g.attr("transform", this.props.transform));
   }
   createCentroids(e) {
     const {
       app: l,
-      svg: C,
+      svg: v,
       format: i,
       id: u,
-      file: h,
-      path: c,
-      onLayerCreated: x,
-      labelFilter: o = [],
-      labelField: f,
-      labelFontSize: n,
-      labelColor: d,
+      file: y,
+      path: n,
+      onLayerCreated: w,
+      labelFilter: s = [],
+      labelField: m,
+      labelFontSize: o,
+      labelColor: c,
       fillColor: p,
-      borderColor: m,
-      tooltip: z,
+      borderColor: g,
+      tooltip: x,
       markFillColor: b,
-      markLabelColor: T,
-      markBorderColor: J,
-      markSizeScale: N,
-      markerLabelSize: H,
-      featureJoinAttribute: tt,
-      apiJoinAttribute: K,
-      measures: I,
-      editing: et,
-      data: w,
+      markLabelColor: J,
+      markBorderColor: R,
+      markSizeScale: G,
+      markerLabelSize: K,
+      featureJoinAttribute: et,
+      apiJoinAttribute: Q,
+      measures: $,
+      editing: rt,
+      data: C,
       patternDiscriminator: S,
-      patternDiscriminatorLabel: Q,
-      breaks: $,
-      gradientScheme: G,
-      gradientReverse: E,
+      patternDiscriminatorLabel: X,
+      breaks: I,
+      gradientScheme: N,
+      gradientReverse: U,
       patterns: L,
-      projection: rt,
-      useBreaks: X,
-      useGradients: V,
-      useCentroidPoint: U,
-      usePattern: j,
-      waitForFilters: at,
-      intl: q,
-      patternsVisible: R = !0,
-      togglePatterns: B,
+      projection: at,
+      useBreaks: Y,
+      useGradients: T,
+      useCentroidPoint: j,
+      usePattern: q,
+      waitForFilters: it,
+      intl: M,
+      patternsVisible: B = !0,
+      togglePatterns: E,
       colorLayerVisible: O = !0,
-      visible: it
-    } = this.props, F = new Y({
-      breaks: $,
+      visible: st
+    } = this.props, z = new Z({
+      breaks: I,
       defaultFillColor: b,
-      defaultBorderColor: J,
-      defaultSize: N
-    }), A = new ot({
-      data: w.children,
-      measure: I[0],
+      defaultBorderColor: R,
+      defaultSize: G
+    }), V = (d) => new lt({
+      data: d.children,
+      measure: $[0],
       defaultFillColor: b,
-      gradientScheme: G,
-      gradientReverse: E
+      gradientScheme: N,
+      gradientReverse: U
     });
     if (this.g) {
-      const s = {
+      const d = {
         style: i.style === "compacted" ? "decimal" : i.style,
         notation: i.style === "compacted" ? "compact" : "standard",
         currency: i.currency,
         minimumFractionDigits: parseInt(i.minimumFractionDigits),
         maximumFractionDigits: parseInt(i.maximumFractionDigits)
-      }, y = this.props.transform ? this.props.transform.k : 1;
+      }, A = this.props.transform ? this.props.transform.k : 1;
       this.g.selectAll(".centroids").remove();
-      const g = this.g.selectAll("centroids").data(e).enter().append("g").attr("class", "centroids");
-      g.append("circle").attr("fill", (a) => V ? A.getColor(a.properties._value) : F.getColor(a.properties._value, !0)).attr("stroke", J).attr("class", "point").attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("cx", (a) => c.centroid(a)[0]).attr("cy", (a) => c.centroid(a)[1]).attr("r", (a) => F.getSize(a.properties._value) * 1 / y).on("mouseenter", (a, t) => {
-        if (t.properties._value) {
-          const v = {
-            ...t.properties,
+      const h = this.g.selectAll("centroids").data(e).enter().append("g").attr("class", "centroids");
+      h.append("circle").attr("fill", (r) => T === !0 ? V(C).getColor(r.properties._value) : z.getColor(r.properties._value, !0)).attr("stroke", R).attr("class", "point").attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("cx", (r) => n.centroid(r)[0]).attr("cy", (r) => n.centroid(r)[1]).attr("r", (r) => z.getSize(r.properties._value) * 1 / A).on("mouseenter", (r, f) => {
+        if (f.properties._value) {
+          const t = {
+            ...f.properties,
             meta: {
-              [K]: t.properties.meta ? t.properties.meta.value : "",
-              ...t.properties.meta,
-              value: t.properties._value
+              [Q]: f.properties.meta ? f.properties.meta.value : "",
+              ...f.properties.meta,
+              value: f.properties._value
             }
           };
-          this.showToolTip(z, v, V ? A.getColor(t.properties._value) : F.getColor(t.properties._value));
+          this.showToolTip(x, t, T === !0 ? V(C).getColor(f.properties._value) : z.getColor(f.properties._value));
         }
-      }).on("mouseleave", (a) => {
+      }).on("mouseleave", (r) => {
         this.hiddenToolTip();
-      }), g.append("text").attr("class", "point-label").attr("x", (a) => c.centroid(a)[0]).attr("y", (a) => c.centroid(a)[1]).attr("font-size", (a) => H * (1 / y) + "px").attr("text-anchor", "middle").attr("dominant-baseline", "middle").style("pointer-events", "none").attr("fill", T).text((a) => q.formatNumber(i.style === "percent" ? a.properties._value / 100 : a.properties._value, s)).on("mouseover", (a) => {
+      }), h.append("text").attr("class", "point-label").attr("x", (r) => n.centroid(r)[0]).attr("y", (r) => n.centroid(r)[1]).attr("font-size", (r) => K * (1 / A) + "px").attr("text-anchor", "middle").attr("dominant-baseline", "middle").style("pointer-events", "none").attr("fill", J).text((r) => M.formatNumber(i.style === "percent" ? r.properties._value / 100 : r.properties._value, d)).on("mouseover", (r) => {
       }), O || this.g.selectAll(".centroids").style("display", "none");
     }
   }
   createPatterns(e) {
     const {
       app: l,
-      svg: C,
+      svg: v,
       format: i,
       id: u,
-      file: h,
-      path: c,
-      onLayerCreated: x,
-      labelFilter: o = [],
-      labelField: f,
-      labelFontSize: n,
-      labelColor: d,
+      file: y,
+      path: n,
+      onLayerCreated: w,
+      labelFilter: s = [],
+      labelField: m,
+      labelFontSize: o,
+      labelColor: c,
       fillColor: p,
-      borderColor: m,
-      tooltip: z,
+      borderColor: g,
+      tooltip: x,
       markFillColor: b,
-      markLabelColor: T,
-      markBorderColor: J,
-      markSizeScale: N,
-      markerLabelSize: H,
-      featureJoinAttribute: tt,
-      apiJoinAttribute: K,
-      measures: I,
-      editing: et,
-      data: w,
+      markLabelColor: J,
+      markBorderColor: R,
+      markSizeScale: G,
+      markerLabelSize: K,
+      featureJoinAttribute: et,
+      apiJoinAttribute: Q,
+      measures: $,
+      editing: rt,
+      data: C,
       patternDiscriminator: S,
-      patternDiscriminatorLabel: Q,
-      breaks: $,
-      gradientScheme: G,
-      gradientReverse: E,
+      patternDiscriminatorLabel: X,
+      breaks: I,
+      gradientScheme: N,
+      gradientReverse: U,
       patterns: L,
-      projection: rt,
-      useBreaks: X,
-      useGradients: V,
-      useCentroidPoint: U,
-      usePattern: j,
-      waitForFilters: at,
-      intl: q,
-      patternsVisible: R = !0,
-      togglePatterns: B,
+      projection: at,
+      useBreaks: Y,
+      useGradients: T,
+      useCentroidPoint: j,
+      usePattern: q,
+      waitForFilters: it,
+      intl: M,
+      patternsVisible: B = !0,
+      togglePatterns: E,
       colorLayerVisible: O = !0,
-      visible: it
-    } = this.props, F = new Y({
-      breaks: $,
+      visible: st
+    } = this.props, z = new Z({
+      breaks: I,
       defaultFillColor: b,
-      defaultBorderColor: J,
-      defaultSize: N
-    }), A = this.props.transform ? this.props.transform.k : 1, s = 10 * 1 / A, y = 10 * 1 / A;
-    let g = [];
+      defaultBorderColor: R,
+      defaultSize: G
+    }), V = this.props.transform ? this.props.transform.k : 1, d = 10 * 1 / V, A = 10 * 1 / V, h = (t) => new lt({
+      data: t.children,
+      measure: $[0],
+      defaultFillColor: b,
+      gradientScheme: N,
+      gradientReverse: U,
+      gradientStartColor,
+      gradientEndColor
+    });
+    let r = [];
     if (l == "csv" && S != "none")
-      g = [...new Set(w.data.map((t) => t[S]))].map((t) => ({
+      r = [...new Set(C.data.map((t) => t[S]))].map((t) => ({
         key: t,
         type: L[t + "_symbol"],
         color: L[t + "_color"],
         rotation: L[t + "_rotation"]
       }));
     else if (S != "none") {
-      const t = w.metadata ? w.metadata.types.filter((v) => v.dimension == S) : [];
-      g = t && t.length > 0 ? t[0].items.map((v) => {
-        const _ = v.value;
+      const t = C && C.metadata ? C.metadata.types.filter((F) => F.dimension == S) : [];
+      r = t && t.length > 0 ? t[0].items.map((F) => {
+        const _ = F.value;
         return {
           key: _,
           type: L[_ + "_symbol"],
@@ -321,72 +325,68 @@ class ht extends pt {
       }) : [];
     }
     this.g.selectAll("defs").remove();
-    const a = this.g.append("defs");
-    if (a.selectAll("pattern").remove(), a.selectAll("pattern").data(g).enter().append("pattern").attr("id", (t) => k(t.key)).attr("patternUnits", "userSpaceOnUse").attr("width", s).attr("height", y).attr("x", 0).attr("y", 0).attr("patternTransform", (t) => `rotate(${t.rotation})`), g.forEach((t) => {
-      t.type === "lines" && a.select("#" + k(t.key)).append("rect").attr("x", 0.05).attr("width", s / 2).attr("height", y).attr("opacity", 1).attr("fill", t.color), t.type === "squares" && a.select("#" + k(t.key)).append("rect").attr("width", s / 2).attr("height", y / 2).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1), t.type === "dots" && a.select("#" + k(t.key)).append("circle").attr("cx", s / 2).attr("cy", y / 2).attr("r", s / 2.5).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1), t.type === "triangle" && a.select("#" + k(t.key)).append("polygon").attr("points", `${s / 2} 0, 0 ${s}, ${s}  ${s} `).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1);
-    }), g = g.filter((t) => t.type != null).sort((t, v) => new Intl.Collator(q.locale, { caseFirst: "upper", numeric: !0, sensitivity: "variant" }).compare(t.key, v.key)), j && e && e.features) {
-      this.g.selectAll(".shape-pattern").remove(), R && e.features.forEach((r) => {
+    const f = this.g.append("defs");
+    if (f.selectAll("pattern").remove(), f.selectAll("pattern").data(r).enter().append("pattern").attr("id", (t) => k(t.key)).attr("patternUnits", "userSpaceOnUse").attr("width", d).attr("height", A).attr("x", 0).attr("y", 0).attr("patternTransform", (t) => `rotate(${t.rotation})`), r.forEach((t) => {
+      t.type === "lines" && f.select("#" + k(t.key)).append("rect").attr("x", 0.05).attr("width", d / 2).attr("height", A).attr("opacity", 1).attr("fill", t.color), t.type === "squares" && f.select("#" + k(t.key)).append("rect").attr("width", d / 2).attr("height", A / 2).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1), t.type === "dots" && f.select("#" + k(t.key)).append("circle").attr("cx", d / 2).attr("cy", A / 2).attr("r", d / 2.5).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1), t.type === "triangle" && f.select("#" + k(t.key)).append("polygon").attr("points", `${d / 2} 0, 0 ${d}, ${d}  ${d} `).attr("fill", t.color).attr("opacity", 1).attr("stroke-width", 1);
+    }), r = r.filter((t) => t.type != null).sort((t, F) => new Intl.Collator(M.locale, { caseFirst: "upper", numeric: !0, sensitivity: "variant" }).compare(t.key, F.key)), q && e && e.features) {
+      this.g.selectAll(".shape-pattern").remove(), B && e.features.forEach((a) => {
         let P = [];
-        r.properties && r.properties.meta && (P = l != "csv" ? r.properties.meta[S] ? r.properties.meta[S] : [] : [r.properties.meta[S]], P && P.length > 0 && P.forEach((lt) => {
-          this.g.append("path").attr("d", c(r)).datum(lt).attr("class", "shape-pattern").attr("opacity", (st) => {
-            if (X)
+        a.properties && a.properties.meta && (P = l != "csv" ? a.properties.meta[S] ? a.properties.meta[S] : [] : [a.properties.meta[S]], P && P.length > 0 && P.forEach((nt) => {
+          this.g.append("path").attr("d", n(a)).datum(nt).attr("class", "shape-pattern").attr("opacity", (ot) => {
+            if (Y)
               return 0.7;
-          }).attr("fill", (st) => "transparent").attr("style", () => "none;fill:url(#" + k(lt) + ");").on("mouseenter", () => {
-            this.showToolTip(z, this.getTooltipVariables(r), V ? gradientColors.getColor(r.properties._value) : F.getColor(r.properties._value));
-          }).on("mousemove", (st) => {
+          }).attr("fill", (ot) => "transparent").attr("style", () => "none;fill:url(#" + k(nt) + ");").on("mouseenter", () => {
+            this.showToolTip(x, this.getTooltipVariables(a), T === !0 ? h(C).getColor(a.properties._value) : z.getColor(a.properties._value));
+          }).on("mousemove", (ot) => {
             this.moveToolTip();
-          }).on("mouseleave", (st) => {
+          }).on("mouseleave", (ot) => {
             this.hiddenToolTip();
           });
         }));
-      }), M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(u)}`).select("svg").remove();
-      const t = M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(u)}`).append("svg");
-      t.attr("height", 30 + g.length * 23 + "px");
-      const v = t.append("svg").append("g"), _ = v.append("defs");
-      _.selectAll("pattern").remove(), R && (_.selectAll("pattern").data(g).enter().append("pattern").attr("id", (r) => "l_" + k(r.key)).attr("patternUnits", "userSpaceOnUse").attr("width", 5).attr("height", 5).attr("x", 0).attr("y", 0).attr("patternTransform", (r) => `rotate(${r.rotation ? r.rotation : 0})`), g.forEach((r) => {
-        r.type === "lines" && _.select("#l_" + k(r.key)).append("rect").attr("x", 0).attr("width", 1).attr("height", 10).attr("opacity", 0.75).attr("fill", r.color), r.type === "squares" && _.select("#l_" + k(r.key)).append("rect").attr("width", 3).attr("height", 3).attr("fill", r.color).attr("opacity", 1).attr("stroke-width", 1), r.type === "dots" && _.select("#l_" + k(r.key)).append("circle").attr("cx", 2).attr("cy", 2).attr("r", 2).attr("fill", r.color).attr("opacity", 1).attr("stroke-width", 1), r.type === "triangle" && _.select("#l_" + k(r.key)).append("polygon").attr("points", "5,0 8,8 0,5").attr("fill", r.color).attr("opacity", 1).attr("stroke-width", 1);
+      }), W.select(this.gRef.current.parentNode.parentNode).select(`.layer_${H(u)}`).select("svg").remove();
+      const t = W.select(this.gRef.current.parentNode.parentNode).select(`.layer_${H(u)}`).append("svg");
+      t.attr("height", 30 + r.length * 23 + "px");
+      const F = t.append("svg").append("g"), _ = F.append("defs");
+      _.selectAll("pattern").remove(), B && (_.selectAll("pattern").data(r).enter().append("pattern").attr("id", (a) => "l_" + k(a.key)).attr("patternUnits", "userSpaceOnUse").attr("width", 5).attr("height", 5).attr("x", 0).attr("y", 0).attr("patternTransform", (a) => `rotate(${a.rotation ? a.rotation : 0})`), r.forEach((a) => {
+        a.type === "lines" && _.select("#l_" + k(a.key)).append("rect").attr("x", 0).attr("width", 1).attr("height", 10).attr("opacity", 0.75).attr("fill", a.color), a.type === "squares" && _.select("#l_" + k(a.key)).append("rect").attr("width", 3).attr("height", 3).attr("fill", a.color).attr("opacity", 1).attr("stroke-width", 1), a.type === "dots" && _.select("#l_" + k(a.key)).append("circle").attr("cx", 2).attr("cy", 2).attr("r", 2).attr("fill", a.color).attr("opacity", 1).attr("stroke-width", 1), a.type === "triangle" && _.select("#l_" + k(a.key)).append("polygon").attr("points", "5,0 8,8 0,5").attr("fill", a.color).attr("opacity", 1).attr("stroke-width", 1);
       }));
-      let nt = R ? "☑ " : "☐ ";
-      v.append("text").attr("class", "patterns-checkbox").attr("x", 10).attr("y", 20).text((r) => nt).attr("font-size", "22px").on("click", () => {
-        B && B(u);
-      }), v.append("text").attr("class", "patterns-title").attr("x", 25).attr("y", 7).text((r) => l === "csv" ? S : Q).on("click", () => {
-        B && B(u);
-      }), R && (v.selectAll(".legend-squares").data(g).enter().append("rect").attr("width", 15).attr("height", 15).attr("y", (r, P) => P * 22 + 30).attr("x", 15).attr("stroke", m).attr("style", (r) => "none;fill:url(#l_" + k(r.key) + ");"), v.selectAll(".patterns-labels").data(g).enter().append("text").attr("class", "patterns-labels").attr("y", (r, P) => P * 22 + 30).attr("x", 32).text((r) => r.key));
+      let pt = B ? "☑ " : "☐ ";
+      F.append("text").attr("class", "patterns-checkbox").attr("x", 10).attr("y", 20).text((a) => pt).attr("font-size", "22px").on("click", () => {
+        E && E(u);
+      }), F.append("text").attr("class", "patterns-title").attr("x", 25).attr("y", 7).text((a) => l === "csv" ? S : X).on("click", () => {
+        E && E(u);
+      }), B && (F.selectAll(".legend-squares").data(r).enter().append("rect").attr("width", 15).attr("height", 15).attr("y", (a, P) => P * 22 + 30).attr("x", 15).attr("stroke", g).attr("style", (a) => "none;fill:url(#l_" + k(a.key) + ");"), F.selectAll(".patterns-labels").data(r).enter().append("text").attr("class", "patterns-labels").attr("y", (a, P) => P * 22 + 30).attr("x", 32).text((a) => a.key));
     }
   }
-  joinData(e, l, C, i, u, h) {
-    const c = e.features.map((o) => {
-      const f = o.properties[C];
+  joinData(e, l, v, i, u, y) {
+    const n = e.features.map((s) => {
+      const m = s.properties[v];
       if (l != "csv" && i && i.children) {
-        const n = i.children.filter((d) => d.value == f);
-        if (n.length > 0) {
-          const d = n[0][u[0]];
-          if (o.properties.meta = n[0], o.properties._value = d, h && h != "none") {
-            const p = n[0] && n[0].children ? n[0].children.filter((m) => m.type == h).map((m) => m.value) : [];
-            o.properties.meta[h] = p;
+        const o = i.children.filter((c) => c.value == m);
+        if (o.length > 0) {
+          const c = o[0][u[0]];
+          if (s.properties.meta = o[0], s.properties._value = c, y && y != "none") {
+            const p = o[0] && o[0].children ? o[0].children.filter((g) => g.type == y).map((g) => g.value) : [];
+            s.properties.meta[y] = p;
           }
         } else
-          o.properties._value = null;
+          s.properties._value = null;
       } else if (l == "csv") {
-        const n = i.data.filter((d) => d[i.meta.fields[0]] == f);
-        n.length > 0 ? (o.properties.meta = n[0], o.properties._value = n[0][i.meta.fields[1]]) : o.properties._value = null;
+        const o = i.data.filter((c) => c[i.meta.fields[0]] == m);
+        o.length > 0 ? (s.properties.meta = o[0], s.properties._value = o[0][i.meta.fields[1]]) : s.properties._value = null;
       } else
-        o.properties._value = null;
-      return o;
+        s.properties._value = null;
+      return s;
     });
-    return { ...e, features: c };
+    return { ...e, features: n };
   }
-  componentDidUpdate(e, l, C) {
-    const { app: i, file: u, featureJoinAttribute: h, data: c, measures: x, patternDiscriminator: o, editing: f, usePattern: n } = this.props;
-    if ((f || JSON.stringify(e.data) !== JSON.stringify(c)) && this.create(), e.visible != this.props.visible) {
-      debugger;
-      this.g.style("display", this.props.visible ? "" : "none");
-    }
-    if (e.patternsVisible != this.props.patternsVisible) {
-      const p = M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(this.props.id)}`);
+  componentDidUpdate(e, l, v) {
+    const { app: i, file: u, featureJoinAttribute: y, data: n, measures: w, patternDiscriminator: s, editing: m, usePattern: o } = this.props;
+    if ((m || e.data !== n || e.path !== this.props.path) && this.create(), e.visible != this.props.visible && this.g.style("display", this.props.visible ? "" : "none"), e.patternsVisible != this.props.patternsVisible) {
+      const p = W.select(this.gRef.current.parentNode.parentNode).select(`.layer_${H(this.props.id)}`);
       p.select(".patterns-checkbox").text(this.props.patternsVisible ? "☑ " : "☐ "), p.selectAll(".patterns-labels").style("display", this.props.patternsVisible ? "" : "none"), p.selectAll("rect").style("display", this.props.patternsVisible ? "" : "none"), p.select("svg").attr("height", this.props.patternsVisible ? 30 + (p.selectAll("rect").size() - 1) * 23 + "px" : "30px"), this.g.selectAll(".shape-pattern").style("display", this.props.patternsVisible ? "" : "none");
     }
-    e.colorLayerVisible != this.props.colorLayerVisible && (this.g.selectAll(".borders").style("fill", (d) => this.props.colorLayerVisible ? null : this.props.fillColor), this.g.selectAll(".centroids").style("display", this.props.colorLayerVisible ? "block" : "none")), e.usePattern != this.props.usePattern && (this.props.usePattern || M.select(this.gRef.current.parentNode.parentNode).select(`.layer_${W(this.props.id)}`).select("svg").remove()), this.g && this.resize();
+    e.colorLayerVisible != this.props.colorLayerVisible && (this.g.selectAll(".borders").style("fill", (c) => this.props.colorLayerVisible ? null : this.props.fillColor), this.g.selectAll(".centroids").style("display", this.props.colorLayerVisible ? "block" : "none")), e.usePattern != this.props.usePattern && (this.props.usePattern || W.select(this.gRef.current.parentNode.parentNode).select(`.layer_${H(this.props.id)}`).select("svg").remove()), this.g && this.resize();
   }
   componentDidMount() {
     super.componentDidMount();
@@ -395,57 +395,58 @@ class ht extends pt {
     const {
       id: e,
       file: l,
-      path: C,
+      path: v,
       zoom: i,
       labelFilter: u = [],
-      labelField: h,
-      labelFontSize: c,
-      labelColor: x,
-      fillColor: o,
-      borderColor: f,
-      featureJoinAttribute: n,
-      apiJoinAttribute: d,
+      labelField: y,
+      labelFontSize: n,
+      labelColor: w,
+      fillColor: s,
+      borderColor: m,
+      featureJoinAttribute: o,
+      apiJoinAttribute: c,
       dvzProxyDatasetId: p,
-      editing: m
+      editing: g
     } = this.props;
-    return /* @__PURE__ */ Z("g", { id: "data-" + e, className: "data " + e, ref: this.gRef });
+    return /* @__PURE__ */ tt("g", { id: "data-" + e, className: "data " + e, ref: this.gRef });
   }
 }
-const ft = (D) => {
+const mt = (D) => {
   const {
     id: e,
     unique: l,
-    filters: C,
+    filters: v,
     csv: i,
     app: u,
-    group: h = "default",
-    apiJoinAttribute: c,
-    editing: x,
-    patternDiscriminator: o,
-    dvzProxyDatasetId: f,
-    intl: n,
-    settings: d,
+    group: y = "default",
+    apiJoinAttribute: n,
+    editing: w,
+    patternDiscriminator: s,
+    dvzProxyDatasetId: m,
+    intl: o,
+    settings: c,
     waitForFilters: p
-  } = D, m = {}, z = C || {};
-  return z && z.forEach && z.forEach((b) => {
-    b.value != null && b.value.filter((T) => T != null && T.toString().trim() != "").length > 0 && (m[b.param] = b.value);
-  }), f && (m.dvzProxyDatasetId = f), /* @__PURE__ */ Z(
-    ct,
+  } = D, g = {}, x = v || {};
+  return x && x.forEach && x.forEach((b) => {
+    b.value != null && b.value.filter((J) => J != null && J.toString().trim() != "").length > 0 && (g[b.param] = b.value);
+  }), m && (g.dvzProxyDatasetId = m), /* @__PURE__ */ tt(
+    dt,
     {
-      waitForFilters: p,
-      editing: x,
-      params: m,
+      waitForFilters: !0,
+      editing: w,
+      params: g,
       app: u,
       csv: decodeURIComponent(i),
-      group: h,
+      group: y,
       ignoreErrors: !0,
       isSvg: !0,
       store: [u, l, e],
-      source: c + (o != "none" ? "/" + o : ""),
-      children: /* @__PURE__ */ Z(ut, { children: /* @__PURE__ */ Z(ht, { ...D }) })
+      mySelf: "Data layer",
+      source: n + (s != "none" ? "/" + s : ""),
+      children: /* @__PURE__ */ tt(ut, { children: /* @__PURE__ */ tt(ft, { ...D }) })
     }
   );
-}, Ft = dt(ft);
+}, _t = ht(mt);
 export {
-  Ft as default
+  _t as default
 };