@devgateway/dvz-ui-react 1.6.19 → 1.7.0

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

@@ -1,184 +1,170 @@
-import { jsx as L } from "react/jsx-runtime";
+import { jsx as b } from "react/jsx-runtime";
 import "react";
-import q from "./BaseLayer.js";
-import G from "../data/DataProvider.js";
-import H from "../data/DataConsumer.js";
-import * as P from "d3";
-import { injectIntl as X } from "react-intl";
-import K from "papaparse";
-import Q from "./BreaksStyles.js";
-class Z extends q {
+import Y from "./BaseLayer.js";
+import q from "../data/DataProvider.js";
+import G from "../data/DataConsumer.js";
+import * as T from "d3";
+import { injectIntl as H } from "react-intl";
+import X from "papaparse";
+import K from "./BreaksStyles.js";
+class Q extends Y {
   constructor() {
     super(), this.createDataLayer = this.createDataLayer.bind(this);
   }
-  createDataLayer(r) {
+  createDataLayer(t) {
     const {
-      format: s,
-      path: a,
-      tooltip: k,
+      format: i,
+      path: s,
+      tooltip: u,
       markFillColor: n,
-      markBorderColor: g,
-      markSizeScale: F,
+      markBorderColor: m,
+      markSizeScale: g,
       //circle size
-      featureJoinAttribute: d,
-      apiJoinAttribute: A,
-      projection: w,
-      breaks: C,
-      markSizeScale2: b,
+      featureJoinAttribute: e,
+      apiJoinAttribute: v,
+      projection: o,
+      breaks: l,
+      markSizeScale2: p,
       //arrow size
-      measures: u,
-      zoom: v,
-      offsetPixels: l = 10,
-      waitForFilters: N
-    } = this.props, E = u[0], x = new Q({
-      breaks: C,
+      measures: f,
+      zoom: k,
+      offsetPixels: x = 10,
+      waitForFilters: $
+    } = this.props, _ = f[0], D = new K({
+      breaks: l,
       defaultFillColor: n,
-      defaultBorderColor: g,
-      defaultSize: b
+      defaultBorderColor: m,
+      defaultSize: p
     });
-    s.style === "compacted" || s.style, s.style, s.currency, parseInt(s.minimumFractionDigits), parseInt(s.maximumFractionDigits);
-    const _ = r.features.filter((t) => t.properties._value != null);
-    this.g = P.select(this.gRef.current), this.g.attr("class", "base-layer zoomable"), this.props.transform && this.g.attr("transform", this.props.transform), this.g.selectAll(".flow-line").remove(), this.g.selectAll(".start-point").remove(), this.g.selectAll(".end-point").remove(), this.g.select("defs").selectAll("*").remove();
-    const J = this.props.transform ? this.props.transform.k : 1, S = [];
-    _.forEach((t) => {
-      S.push(t), t.properties.destinations.sort((p, e) => p[E] - e[E]).forEach((p) => {
-        const e = p[E];
-        r.features.filter((o) => o.properties[d] == p.value).forEach((o) => {
-          o.properties.meta = p;
-          const c = t.properties[d], i = t.properties[d] + "--" + o.properties[d], f = a.centroid(t), h = a.centroid(o), O = h[0] - f[0], T = h[1] - f[1], I = Math.sqrt(O * O + T * T), V = O / I, M = T / I, R = [
-            h[0] - V * l,
-            h[1] - M * l
-          ], U = w.invert(R), W = {
+    i.style === "compacted" || i.style, i.style, i.currency, parseInt(i.minimumFractionDigits), parseInt(i.maximumFractionDigits);
+    const I = t.features.filter((r) => r.properties._value != null);
+    this.g = T.select(this.gRef.current), this.g.attr("class", "base-layer zoomable flow"), this.props.transform && this.g.attr("transform", this.props.transform), this.g.selectAll(".flow-line").remove(), this.g.selectAll(".start-point").remove(), this.g.selectAll(".end-point").remove(), this.g.select("defs").selectAll("*").remove();
+    const B = this.props.transform ? this.props.transform.k : 1, z = [];
+    I.forEach((r) => {
+      z.push(r), r.properties.destinations.sort((h, y) => h[_] - y[_]).forEach((h) => {
+        const y = h[_];
+        t.features.filter((a) => a.properties[e] == h.value).forEach((a) => {
+          a.properties.meta = h;
+          const M = r.properties[e], w = r.properties[e] + "--" + a.properties[e], E = s.centroid(r), A = s.centroid(a), F = A[0] - E[0], j = A[1] - E[1], O = Math.sqrt(F * F + j * j), V = F / O, J = j / O, N = [
+            A[0] - V * x,
+            A[1] - J * x
+          ], R = o.invert(N), U = {
             type: "LineString",
             coordinates: [
-              w.invert(f),
+              o.invert(E),
               // Start in geo coords
-              U
+              R
               // New endpoint before d2
             ]
-          }, m = this.g.append("g");
-          this.g.select("defs").append("marker").attr("id", "arrow" + i).attr("markerUnits", "strokeWidth").attr("markerWidth", "6").attr("markerHeight", "6").attr("viewBox", "0 0 24 24").attr("refX", "6").attr("refY", "6").attr("orient", "auto").append("path").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("style", (D) => "fill: " + x.getColor(e) + ";"), m.append("path").attr("d", a(W)).attr("id", i).attr("class", "flow-line").style("fill", "none").style("cursor", "pointer").style("stroke-dasharray", "0").style("stroke", (D) => x.getColor(e)).style("stroke-width", (D) => x.getSize(e)).attr("marker-end", "url(#arrow" + i + ")").on("mouseenter", (D, tt) => {
-            if (m.selectAll("marker").transition().duration("200").style("opacity", 0), m.selectAll(".start-point").transition().duration("200").style("opacity", 0), m.selectAll(".flow-line").transition().duration("200").style("opacity", 0), P.select(D.target).transition().duration("200").style("opacity", 1), m.selectAll("#arrow" + i).transition().duration("200").style("opacity", 1), m.selectAll(".start-point.circle_" + c).transition().duration("200").style("opacity", 1), e) {
-              const B = {}, j = {};
-              Object.keys(t.properties).forEach((y) => {
-                B["origin_" + y] = t.properties[y];
-              }), Object.keys(o.properties).forEach((y) => {
-                j["target_" + y] = o.properties[y];
-              }), Object.keys(o.properties.meta).forEach((y) => {
-                j["target_" + y] = o.properties.meta[y];
+          }, c = this.g;
+          this.g.select("defs").append("marker").attr("id", "arrow" + w).attr("markerUnits", "strokeWidth").attr("markerWidth", "6").attr("markerHeight", "6").attr("viewBox", "0 0 24 24").attr("refX", "6").attr("refY", "6").attr("orient", "auto").append("path").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2").attr("style", (L) => "fill: " + D.getColor(y) + ";"), c.append("path").attr("d", s(U)).attr("id", w).attr("class", "flow-line").style("fill", "none").style("cursor", "pointer").style("stroke-dasharray", "0").style("stroke", (L) => D.getColor(y)).style("stroke-width", (L) => D.getSize(y)).attr("marker-end", "url(#arrow" + w + ")").on("mouseenter", (L, tt) => {
+            if (c.selectAll("marker").transition().duration("200").style("opacity", 0), c.selectAll(".start-point").transition().duration("200").style("opacity", 0), c.selectAll(".flow-line").transition().duration("200").style("opacity", 0), T.select(L.target).transition().duration("200").style("opacity", 1), c.selectAll("#arrow" + w).transition().duration("200").style("opacity", 1), c.selectAll(".start-point.circle_" + M).transition().duration("200").style("opacity", 1), y) {
+              const P = {}, C = {};
+              Object.keys(r.properties).forEach((d) => {
+                P["origin_" + d] = r.properties[d];
+              }), Object.keys(a.properties).forEach((d) => {
+                C["target_" + d] = a.properties[d];
+              }), Object.keys(a.properties.meta).forEach((d) => {
+                C["target_" + d] = a.properties.meta[d];
               });
-              const Y = {
-                ...B,
-                ...j,
+              const W = {
+                ...P,
+                ...C,
                 meta: {
-                  [A]: t.properties.meta ? t.properties.meta.value : "",
-                  ...t.properties.meta,
-                  value: e
+                  [v]: r.properties.meta ? r.properties.meta.value : "",
+                  ...r.properties.meta,
+                  value: y
                 }
               };
-              this.showToolTip(k, Y, x.getColor(o.properties._value));
+              this.showToolTip(u, W, D.getColor(a.properties._value));
             }
-          }).on("mouseout", (D) => {
-            this.hiddenToolTip(), P.selectAll(".flow-line").transition().duration("100").style("opacity", 1), m.selectAll(".start-point").transition().duration("100").style("opacity", 1), m.selectAll("marker").transition().duration("100").style("opacity", 1);
-          }), m.append("text").append("textPath").attr("xlink:href", i).style("text-anchor", "middle").attr("startOffset", "50%").attr("fill", "#fff").text("Yay, my text is on a wavy path");
+          }).on("mouseout", (L) => {
+            this.hiddenToolTip(), T.selectAll(".flow-line").transition().duration("100").style("opacity", 1), c.selectAll(".start-point").transition().duration("100").style("opacity", 1), c.selectAll("marker").transition().duration("100").style("opacity", 1);
+          }), c.append("text").append("textPath").attr("xlink:href", w).style("text-anchor", "middle").attr("startOffset", "50%").attr("fill", "#fff").text("Yay, my text is on a wavy path");
         });
       });
-    }), S.forEach((t) => {
-      this.g.append("circle").attr("fill", n).attr("stroke", g).attr("class", "start-point circle_" + t.properties[d]).attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("cx", a.centroid(t)[0]).attr("cy", a.centroid(t)[1]).attr("r", () => F * 1 / J).on("mouseenter", (p) => {
-        this.showToolTip("{name_en}", t.properties, "");
-      }).on("mouseout", (p) => {
+    }), z.forEach((r) => {
+      this.g.append("circle").attr("fill", n).attr("stroke", m).attr("class", "start-point circle_" + r.properties[e]).attr("stroke-width", 2).style("vector-effect", "non-scaling-stroke").attr("cx", s.centroid(r)[0]).attr("cy", s.centroid(r)[1]).attr("r", () => g * 1 / B).on("mouseenter", (h) => {
+        this.showToolTip("{name_en}", r.properties, "");
+      }).on("mouseout", (h) => {
         this.hiddenToolTip();
       });
     });
   }
-  create() {
+  _buildLayer(t) {
     const {
-      app: r,
-      name: s,
-      file: a,
-      path: k,
-      csv: n,
-      zoom: g,
-      labelFilter: F = [],
-      labelField: d,
-      labelFontSize: A,
-      labelColor: w,
-      fillColor: C,
-      borderColor: b,
-      featureJoinAttribute: u,
-      editing: v,
-      data: l,
-      breaks: N,
-      markFillColor: E,
-      markSizeScale: x,
-      measures: _,
-      flowValuesFrom: J
-    } = this.props;
-    a != "none" && this.loadJSON(a).then((S) => {
-      const t = S.features.map((e) => {
-        const o = e.properties[u];
-        if (r != "csv" && l && l.children) {
-          const c = l.children.filter((i) => i.value.indexOf(o) > -1);
-          if (c.length > 0) {
-            const i = c[0][_[0]];
-            e.properties.meta = c[0], e.properties._value = i, e.properties.destinations = c[0].children;
-          }
-        } else if (r == "csv") {
-          const c = K.parse(n, { header: !0, dynamicTyping: !0 }), i = e.properties[u];
-          c.data.filter((h) => h.origin == i);
-          const f = c.data.filter((h) => h.origin == i)[0];
-          f != null && (alert("CSV Not implemented Yet, please do it if you have time"), e.properties.meta = f, e.properties._value = f.value, e.properties.destinations = f.destination);
+      featureJoinAttribute: i,
+      app: s,
+      data: u,
+      measures: n,
+      csv: m
+    } = this.props, g = t.features.map((e) => {
+      const v = e.properties[i];
+      if (s != "csv" && u && u.children) {
+        const o = u.children.filter((l) => l.value.indexOf(v) > -1);
+        if (o.length > 0) {
+          const l = o[0][n[0]];
+          e.properties.meta = o[0], e.properties._value = l, e.properties.destinations = o[0].children;
         }
-        return e;
-      }), p = { ...S, features: t };
-      this.createDataLayer(p);
+      } else if (s == "csv") {
+        const o = X.parse(m, { header: !0, dynamicTyping: !0 }), l = e.properties[i], p = o.data.filter((f) => f.origin == l)[0];
+        p != null && (alert("CSV Not implemented Yet, please do it if you have time"), e.properties.meta = p, e.properties._value = p.value, e.properties.destinations = p.destination);
+      }
+      return e;
     });
+    this.createDataLayer({ ...t, features: g });
+  }
+  create() {
+    const { file: t } = this.props;
+    t != "none" && (this.state.json ? this._buildLayer(this.state.json) : this.loadJSON(t).then((i) => {
+      this.setState({ json: i }), this._buildLayer(i);
+    }));
   }
-  componentDidUpdate(r, s, a) {
-    const { projection: k, editing: n, data: g } = this.props;
-    (n || JSON.stringify(r.data) !== JSON.stringify(g)) && this.create(), r.visible != this.props.visible && this.g.style("display", this.props.visible ? "" : "none");
+  componentDidUpdate(t, i, s) {
+    const { projection: u, editing: n, data: m } = this.props;
+    (n || t.data !== m || t.path !== this.props.path) && this.create(), t.visible != this.props.visible && this.g.style("display", this.props.visible ? "" : "none");
   }
   componentDidMount() {
     this.create(), this.props.zoom.current.fullView();
   }
   render() {
-    const { id: r } = this.props;
-    return /* @__PURE__ */ L("g", { id: "data-" + r, className: "data " + r, ref: this.gRef, children: /* @__PURE__ */ L("defs", {}) });
+    const { id: t } = this.props;
+    return /* @__PURE__ */ b("g", { id: "data-" + t, className: "data " + t, ref: this.gRef, children: /* @__PURE__ */ b("defs", {}) });
   }
 }
-const $ = (z) => {
+const Z = (S) => {
   const {
-    id: r,
-    unique: s,
-    filters: a,
-    csv: k,
+    id: t,
+    unique: i,
+    filters: s,
+    csv: u,
     app: n,
-    group: g = "default",
-    flowOrigin: F,
-    editing: d,
-    flowDestination: A,
-    dvzProxyDatasetId: w,
-    waitForFilters: C
-  } = z, b = { dvzProxyDatasetId: w }, u = a || {};
-  return u && u.forEach && u.forEach((v) => {
-    v.value != null && v.value.filter((l) => l != null && l.toString().trim() != "").length > 0 && (b[v.param] = v.value);
-  }), /* @__PURE__ */ L(
-    G,
+    group: m = "default",
+    flowOrigin: g,
+    editing: e,
+    flowDestination: v,
+    dvzProxyDatasetId: o,
+    waitForFilters: l
+  } = S, p = { dvzProxyDatasetId: o }, f = s || {};
+  return f && f.forEach && f.forEach((k) => {
+    k.value != null && k.value.filter((x) => x != null && x.toString().trim() != "").length > 0 && (p[k.param] = k.value);
+  }), /* @__PURE__ */ b(
+    q,
     {
-      editing: d,
-      params: b,
-      waitForFilters: C,
+      editing: e,
+      params: p,
+      waitForFilters: l,
       app: n,
-      csv: decodeURIComponent(k),
-      group: g,
+      csv: decodeURIComponent(u),
+      group: m,
       ignoreErrors: !0,
       isSvg: !0,
-      store: [n, s, r],
-      source: F + "/" + A,
-      children: /* @__PURE__ */ L(H, { children: /* @__PURE__ */ L(Z, { ...z }) })
+      store: [n, i, t],
+      source: g + "/" + v,
+      children: /* @__PURE__ */ b(G, { children: /* @__PURE__ */ b(Q, { ...S }) })
     }
   );
-}, pt = X($);
+}, pt = H(Z);
 export {
   pt as default
 };

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

@@ -1,4 +1,4 @@
-const c = [
+const _ = [
   {
     value: "blues",
     label: "blues",
@@ -108,16 +108,21 @@ const c = [
     endColor: "#800026"
   }
 ];
-class _ {
-  constructor(s) {
-    const { gradientScheme: r, gradientReverse: o, data: t = [], defaultFillColor: u, measure: f } = s;
-    this.defaultFillColor = u, this.measure = f, this.valueColors = this.createGradient(r, t, o), this.getColor = this.getColor.bind(this);
+class v {
+  constructor(t) {
+    const { gradientScheme: r, gradientReverse: a, data: o = [], defaultFillColor: d, measure: f, gradientStartColor: C, gradientEndColor: u } = t;
+    this.defaultFillColor = d, this.measure = f, this.gradientStartColor = C, this.gradientEndColor = u, this.valueColors = this.createGradient(r, o, a), this.getColor = this.getColor.bind(this);
   }
-  createGradient(s, r, o) {
-    const t = c.find((e) => e.value == s) || {
+  createGradient(t, r, a) {
+    let o = {
+      startColor: this.gradientStartColor || "#ffffff",
+      endColor: this.gradientEndColor || "#000000"
+    };
+    t !== "custom" && (o = _.find((e) => e.value == t) || {
       startColor: "#ffffff",
       endColor: "#000000"
-    }, u = r.slice().sort((e, l) => e[this.measure] - l[this.measure]);
+    });
+    const d = r.slice().sort((e, l) => e[this.measure] - l[this.measure]);
     function f(e) {
       return e = e.replace(/^#/, ""), e.length === 3 && (e = e.split("").map((l) => l + l).join("")), {
         r: parseInt(e.substr(0, 2), 16),
@@ -125,31 +130,33 @@ class _ {
         b: parseInt(e.substr(4, 2), 16)
       };
     }
-    function i({ r: e, g: l, b: C }) {
-      const n = (b) => b.toString(16).padStart(2, "0");
-      return `#${n(e)}${n(l)}${n(C)}`;
+    function C({ r: e, g: l, b: i }) {
+      const s = (g) => g.toString(16).padStart(2, "0");
+      return `#${s(e)}${s(l)}${s(i)}`;
     }
-    const a = f(o ? t.endColor : t.startColor), d = f(o ? t.startColor : t.endColor), g = [];
+    const u = a ? o.endColor : o.startColor, p = a ? o.startColor : o.endColor;
+    this.startColor = u, this.endColor = p;
+    const n = f(u), b = f(p), c = [];
     for (let e = 0; e < r.length; e++) {
-      const l = e / (r.length - 1), C = Math.round(a.r + (d.r - a.r) * l), n = Math.round(a.g + (d.g - a.g) * l), b = Math.round(a.b + (d.b - a.b) * l);
-      g.push({ value: u[e][this.measure], color: i({ r: C, g: n, b }) });
+      const l = r.length > 1 ? e / (r.length - 1) : 1, i = Math.round(n.r + (b.r - n.r) * l), s = Math.round(n.g + (b.g - n.g) * l), g = Math.round(n.b + (b.b - n.b) * l);
+      c.push({ value: d[e][this.measure], color: C({ r: i, g: s, b: g }) });
     }
-    return g;
+    return c;
   }
-  getColor(s) {
+  getColor(t) {
     if (this.valueColors.length > 0) {
-      const r = this.valueColors.find((o) => o.value == s);
+      const r = this.valueColors.find((a) => a.value == t);
       return (r == null ? void 0 : r.color) || this.defaultFillColor;
     }
     return this.defaultFillColor;
   }
   getStartColor() {
-    return this.valueColors[0].color;
+    return this.startColor;
   }
   getEndColor() {
-    return this.valueColors.at(-1).color;
+    return this.endColor;
   }
 }
 export {
-  _ as default
+  v as default
 };

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

@@ -1,26 +1,26 @@
-import { jsx as b } from "react/jsx-runtime";
+import { jsx as v } from "react/jsx-runtime";
 import I from "react";
-import O from "../data/DataProvider.js";
-import _ from "../data/DataConsumer.js";
+import j from "../data/DataProvider.js";
+import N from "../data/DataConsumer.js";
 import * as p from "d3";
-import { injectIntl as j } from "react-intl";
-import * as J from "react-dom";
-import P from "./Tooltip.js";
-class U extends I.Component {
+import { injectIntl as O } from "react-intl";
+import * as U from "react-dom";
+import V from "./Tooltip.js";
+class X extends I.Component {
   constructor() {
     super(), this.create = this.create.bind(this), this.showToolTip = this.showToolTip.bind(this), this.moveToolTip = this.moveToolTip.bind(this), this.resize = this.resize.bind(this), this.gRef = I.createRef();
   }
-  showToolTip(e, n, r, s) {
-    const l = p.select("body").append("div").attr("class", "d3MapTooltip").style("position", "absolute").html("").style("left", s.pageX + 15 + "px").style("top", s.pageY - 50 + "px");
-    J.render(/* @__PURE__ */ b(
-      P,
+  showToolTip(e, n, s, r) {
+    const a = p.select("body").append("div").attr("class", "d3MapTooltip").style("position", "absolute").html("").style("left", r.pageX + 15 + "px").style("top", r.pageY - 50 + "px");
+    U.render(/* @__PURE__ */ v(
+      V,
       {
         intl: this.props.intl,
         tooltip: e,
         data: n,
         tooltipEnableMarkdown: !1
       }
-    ), l._groups[0][0]);
+    ), a._groups[0][0]);
   }
   moveToolTip(e) {
     p.select(".d3MapTooltip").style("left", e.pageX + 15 + "px").style("top", e.pageY - 50 + "px");
@@ -32,65 +32,65 @@ class U extends I.Component {
     const {
       app: e,
       tooltip: n,
-      data: r,
-      markFillColor: s,
-      markBorderColor: l,
+      data: s,
+      markFillColor: r,
+      markBorderColor: a,
       markSizeScale: m,
       markerLabelSize: g,
       measures: y,
       projection: c,
       id: T,
-      format: a,
+      format: l,
       intl: x,
       useBreaks: L,
       breaks: d,
-      pointDimensionStyles: h = [],
+      pointDimensionStyles: u = [],
       pointStyleBy: f,
-      dimension2: v,
+      dimension2: b,
       visible: D = !0,
       showDim2OnLegends: A,
-      dim2LegendLabel: X
+      dim2LegendLabel: q
     } = this.props, E = {
-      style: a.style === "compacted" ? "decimal" : a.style,
-      notation: a.style === "compacted" ? "compact" : "standard",
-      currency: a.currency,
-      minimumFractionDigits: parseInt(a.minimumFractionDigits),
-      maximumFractionDigits: parseInt(a.maximumFractionDigits)
+      style: l.style === "compacted" ? "decimal" : l.style,
+      notation: l.style === "compacted" ? "compact" : "standard",
+      currency: l.currency,
+      minimumFractionDigits: parseInt(l.minimumFractionDigits),
+      maximumFractionDigits: parseInt(l.maximumFractionDigits)
     }, B = p.scaleThreshold().domain(d.map((t) => t.end)).range(d.map((t) => m + t.size)), C = p.scaleThreshold().domain(d.map((t) => t.end)).range(d.map((t) => t.color)), M = p.scaleThreshold().domain(d.map((t) => t.end)).range(d.map((t) => t.borderColor));
     let S = [];
     const z = p.select(this.gRef.current);
-    if (e != "csv" && r && r.children)
-      S = r.children.map((t) => {
+    if (e != "csv" && s && s.children)
+      S = s.children.map((t) => {
         const o = t.value.split(",");
-        let u = { color: s, size: m, border: l }, i = 1;
-        return f === "measure" ? (i = t[y[0]], u = { color: C(i), size: B(i), border: M(i) }) : f === "dimension" && t.children && A && (i = t.children[0].value, u = {
-          color: h[i + "_color"] || s,
-          size: h[i + "_size"] || m,
-          border: h[i + "_border"] || l
+        let h = { color: r, size: m, border: a }, i = 1;
+        return f === "measure" ? (i = t[y[0]], h = { color: C(i), size: B(i), border: M(i) }) : f === "dimension" && t.children && A && (i = t.children[0].value, h = {
+          color: u[i + "_color"] || r,
+          size: u[i + "_size"] || m,
+          border: u[i + "_border"] || a
         }), {
           x: o[0],
           y: o[1],
           value: i,
           metadata: t,
-          pointStyle: u
+          pointStyle: h
         };
       }), S.sort((t, o) => t.pointStyle.size - o.pointStyle.size);
     else if (e == "csv") {
-      const t = r.meta.fields[0], o = r.meta.fields[1], u = r.meta.fields[2];
-      S = r.data.map((i) => {
-        let N = { color: s, size: m, border: l };
+      const t = s.meta.fields[0], o = s.meta.fields[1], h = s.meta.fields[2];
+      S = s.data.map((i) => {
+        let _ = { color: r, size: m, border: a };
         return {
           x: i[t],
           y: i[o],
-          value: i[u],
+          value: i[h],
           meta: i,
-          pointStyle: N
+          pointStyle: _
         };
       });
     }
     const F = (t) => {
-      const { pointStyleBy: o, dimension2: u } = this.props, i = {};
-      return u != "none" && (i[u] = t.metadata.children[0].value), { ...i, ...t, ...t.metadata };
+      const { pointStyleBy: o, dimension2: h } = this.props, i = {};
+      return h != "none" && (i[h] = t.metadata.children[0].value), { ...i, ...t, ...t.metadata };
     }, R = this.props.transform ? this.props.transform.k : 1;
     z.attr("class", "zoomable lat-long " + T), z.selectAll(".point-group").remove();
     const w = z.selectAll(".point-group").data(S).enter().append("g").attr("class", "point-group");
@@ -112,17 +112,17 @@ class U extends I.Component {
       this.hiddenToolTip(t);
     }), this.props.transform && z.attr("transform", this.props.transform);
   }
-  componentDidUpdate(e, n, r) {
-    const { editing: s, selectedItem: l, onZoomToPoint: m, data: g } = this.props, y = p.select(this.gRef.current);
-    if ((s || JSON.stringify(e.data) !== JSON.stringify(g)) && this.create(), e.visible != this.props.visible && p.select(this.gRef.current).style("display", this.props.visible ? "block" : "none"), l != null && this.props.selectedItem != e.selectedItem) {
-      const T = y.selectAll(".point-group circle").filter((a) => a.metadata.children.find((x) => x.value == l) != null);
+  componentDidUpdate(e, n, s) {
+    const { editing: r, selectedItem: a, onZoomToPoint: m, data: g } = this.props, y = p.select(this.gRef.current);
+    if ((r || e.data !== g || e.path !== this.props.path) && this.create(), e.visible != this.props.visible && p.select(this.gRef.current).style("display", this.props.visible ? "block" : "none"), a != null && this.props.selectedItem != e.selectedItem) {
+      const T = y.selectAll(".point-group circle").filter((l) => l.metadata.children.find((x) => x.value == a) != null);
       m({ x: T.datum().x, y: T.datum().y });
     }
     this.resize();
   }
   resize() {
-    const { markerLabelSize: e } = this.props, n = p.select(this.gRef.current), r = this.props.transform ? this.props.transform.k : 1;
-    n && (n.selectAll(".point-group circle").attr("r", (s) => s.pointStyle.size * 1 / r), n.selectAll(".point-group text.point-label").attr("font-size", (s) => e * (10 / r) + "px"));
+    const { markerLabelSize: e } = this.props, n = p.select(this.gRef.current), s = this.props.transform ? this.props.transform.k : 1;
+    n && (n.selectAll(".point-group circle").attr("r", (r) => r.pointStyle.size * 1 / s), n.selectAll(".point-group text.point-label").attr("font-size", (r) => e * (10 / s) + "px"));
   }
   componentDidMount() {
     this.create();
@@ -131,44 +131,44 @@ class U extends I.Component {
     const {
       id: e
     } = this.props;
-    return /* @__PURE__ */ b("g", { className: "latLong " + e, ref: this.gRef });
+    return /* @__PURE__ */ v("g", { className: "latLong " + e, ref: this.gRef });
   }
 }
-const V = (k) => {
+const Y = (k) => {
   const {
     id: e,
     unique: n,
-    filters: r,
-    csv: s,
-    app: l,
+    filters: s,
+    csv: r,
+    app: a,
     group: m = "default",
     apiJoinAttribute: g,
     editing: y,
     dimension2: c,
     pointStyleBy: T,
-    dvzProxyDatasetId: a,
+    dvzProxyDatasetId: l,
     settings: x,
     waitForFilters: L
-  } = k, d = c != "none" ? "/" + c : "", h = {}, f = r || {};
-  return f && f.forEach && f.forEach((v) => {
-    v.value != null && v.value.filter((D) => D != null && D.toString().trim() != "").length > 0 && (h[v.param] = v.value);
-  }), a && (h.dvzProxyDatasetId = a), /* @__PURE__ */ b(
-    O,
+  } = k, d = c != "none" ? "/" + c : "", u = {}, f = s || {};
+  return f && f.forEach && f.forEach((b) => {
+    b.value != null && b.value.filter((D) => D != null && D.toString().trim() != "").length > 0 && (u[b.param] = b.value);
+  }), l && (u.dvzProxyDatasetId = l), /* @__PURE__ */ v(
+    j,
     {
       editing: y,
-      params: h,
+      params: u,
       waitForFilters: L,
-      app: l,
-      csv: decodeURIComponent(s),
+      app: a,
+      csv: decodeURIComponent(r),
       group: m,
       ignoreErrors: !0,
       isSvg: !0,
-      store: [l, n, e],
+      store: [a, n, e],
       source: [g + d],
-      children: /* @__PURE__ */ b(_, { children: /* @__PURE__ */ b(U, { ...k }) })
+      children: /* @__PURE__ */ v(N, { children: /* @__PURE__ */ v(X, { ...k }) })
     }
   );
-}, K = j(V);
+}, K = O(Y);
 export {
   K as default
 };