fix: preserve node order in swapWithParent (#7639)

* fix: preserve node order in swapwithparents * chore: update examples [CI] * style: auto-formatting [CI] * Update src/compile/data/dataflow.ts * docs: update src/compile/data/dataflow.ts Co-authored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com> Co-authored-by: Dominik Moritz <domoritz@gmail.com>
vega · Dec 9, 2021 · bd9572c · bd9572c
1 parent 6299dd8
commit bd9572c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 47 deletions.
diff --git a/examples/compiled/facet_bullet.vg.json b/examples/compiled/facet_bullet.vg.json
@@ -80,7 +80,12 @@
       ]
     },
     {
-      "name": "data_1",
+      "name": "row_domain",
+      "source": "data_0",
+      "transform": [{"type": "aggregate", "groupby": ["title"]}]
+    },
+    {
+      "name": "data_2",
       "source": "data_0",
       "transform": [
         {
@@ -98,7 +103,7 @@
       ]
     },
     {
-      "name": "data_2",
+      "name": "data_3",
       "source": "data_0",
       "transform": [
         {
@@ -116,7 +121,7 @@
       ]
     },
     {
-      "name": "data_3",
+      "name": "data_4",
       "source": "data_0",
       "transform": [
         {
@@ -134,7 +139,7 @@
       ]
     },
     {
-      "name": "data_4",
+      "name": "data_5",
       "source": "data_0",
       "transform": [
         {
@@ -152,7 +157,7 @@
       ]
     },
     {
-      "name": "data_5",
+      "name": "data_6",
       "source": "data_0",
       "transform": [
         {
@@ -170,19 +175,14 @@
       ]
     },
     {
-      "name": "data_6",
+      "name": "data_7",
       "source": "data_0",
       "transform": [
         {
           "type": "filter",
           "expr": "isValid(datum[\"markers.0\"]) && isFinite(+datum[\"markers.0\"])"
         }
       ]
-    },
-    {
-      "name": "row_domain",
-      "source": "data_0",
-      "transform": [{"type": "aggregate", "groupby": ["title"]}]
     }
   ],
   "signals": [

diff --git a/examples/compiled/interactive_multi_line_pivot_tooltip.vg.json b/examples/compiled/interactive_multi_line_pivot_tooltip.vg.json
@@ -17,15 +17,12 @@
       "source": "source_0",
       "transform": [
         {
-          "type": "pivot",
-          "field": "symbol",
-          "value": "price",
-          "groupby": ["date"]
+          "type": "filter",
+          "expr": "length(data(\"hover_store\")) && vlSelectionTest(\"hover_store\", datum)"
         },
-        {"type": "formula", "expr": "toDate(datum[\"date\"])", "as": "date"},
         {
           "type": "filter",
-          "expr": "(isDate(datum[\"date\"]) || (isValid(datum[\"date\"]) && isFinite(+datum[\"date\"])))"
+          "expr": "(isDate(datum[\"date\"]) || (isValid(datum[\"date\"]) && isFinite(+datum[\"date\"]))) && isValid(datum[\"price\"]) && isFinite(+datum[\"price\"])"
         }
       ]
     },
@@ -34,12 +31,15 @@
       "source": "source_0",
       "transform": [
         {
-          "type": "filter",
-          "expr": "length(data(\"hover_store\")) && vlSelectionTest(\"hover_store\", datum)"
+          "type": "pivot",
+          "field": "symbol",
+          "value": "price",
+          "groupby": ["date"]
         },
+        {"type": "formula", "expr": "toDate(datum[\"date\"])", "as": "date"},
         {
           "type": "filter",
-          "expr": "(isDate(datum[\"date\"]) || (isValid(datum[\"date\"]) && isFinite(+datum[\"date\"]))) && isValid(datum[\"price\"]) && isFinite(+datum[\"price\"])"
+          "expr": "(isDate(datum[\"date\"]) || (isValid(datum[\"date\"]) && isFinite(+datum[\"date\"])))"
         }
       ]
     }
@@ -147,7 +147,7 @@
       "type": "symbol",
       "style": ["point"],
       "interactive": false,
-      "from": {"data": "data_1"},
+      "from": {"data": "data_0"},
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
@@ -167,7 +167,7 @@
       "type": "rule",
       "style": ["rule"],
       "interactive": true,
-      "from": {"data": "data_0"},
+      "from": {"data": "data_1"},
       "encode": {
         "update": {
           "stroke": {"value": "black"},
@@ -223,8 +223,8 @@
       "domain": {
         "fields": [
           {"data": "source_0", "field": "date"},
-          {"data": "data_1", "field": "date"},
-          {"data": "data_0", "field": "date"}
+          {"data": "data_0", "field": "date"},
+          {"data": "data_1", "field": "date"}
         ]
       },
       "range": [0, {"signal": "width"}]
@@ -235,7 +235,7 @@
       "domain": {
         "fields": [
           {"data": "source_0", "field": "price"},
-          {"data": "data_1", "field": "price"}
+          {"data": "data_0", "field": "price"}
         ]
       },
       "range": [{"signal": "height"}, 0],
@@ -248,7 +248,7 @@
       "domain": {
         "fields": [
           {"data": "source_0", "field": "symbol"},
-          {"data": "data_1", "field": "symbol"}
+          {"data": "data_0", "field": "symbol"}
         ],
         "sort": true
       },

diff --git a/examples/compiled/interactive_seattle_weather.vg.json b/examples/compiled/interactive_seattle_weather.vg.json
@@ -16,6 +16,10 @@
       "name": "data_0",
       "source": "source_0",
       "transform": [
+        {
+          "type": "filter",
+          "expr": "!length(data(\"click_store\")) || vlSelectionTest(\"click_store\", datum)"
+        },
         {
           "field": "date",
           "type": "timeunit",
@@ -24,25 +28,14 @@
         },
         {
           "type": "filter",
-          "expr": "!length(data(\"brush_store\")) || vlSelectionTest(\"brush_store\", datum)"
-        },
-        {
-          "type": "aggregate",
-          "groupby": ["weather"],
-          "ops": ["count"],
-          "fields": [null],
-          "as": ["__count"]
+          "expr": "(isDate(datum[\"monthdate_date\"]) || (isValid(datum[\"monthdate_date\"]) && isFinite(+datum[\"monthdate_date\"]))) && isValid(datum[\"temp_max\"]) && isFinite(+datum[\"temp_max\"]) && isValid(datum[\"precipitation\"]) && isFinite(+datum[\"precipitation\"])"
         }
       ]
     },
     {
       "name": "data_1",
       "source": "source_0",
       "transform": [
-        {
-          "type": "filter",
-          "expr": "!length(data(\"click_store\")) || vlSelectionTest(\"click_store\", datum)"
-        },
         {
           "field": "date",
           "type": "timeunit",
@@ -51,7 +44,14 @@
         },
         {
           "type": "filter",
-          "expr": "(isDate(datum[\"monthdate_date\"]) || (isValid(datum[\"monthdate_date\"]) && isFinite(+datum[\"monthdate_date\"]))) && isValid(datum[\"temp_max\"]) && isFinite(+datum[\"temp_max\"]) && isValid(datum[\"precipitation\"]) && isFinite(+datum[\"precipitation\"])"
+          "expr": "!length(data(\"brush_store\")) || vlSelectionTest(\"brush_store\", datum)"
+        },
+        {
+          "type": "aggregate",
+          "groupby": ["weather"],
+          "ops": ["count"],
+          "fields": [null],
+          "as": ["__count"]
         }
       ]
     }
@@ -304,7 +304,7 @@
           "type": "symbol",
           "style": ["point"],
           "interactive": true,
-          "from": {"data": "data_1"},
+          "from": {"data": "data_0"},
           "encode": {
             "update": {
               "opacity": {"value": 0.7},
@@ -480,7 +480,7 @@
           "type": "rect",
           "style": ["bar"],
           "interactive": true,
-          "from": {"data": "data_0"},
+          "from": {"data": "data_1"},
           "encode": {
             "update": {
               "fill": [
@@ -555,7 +555,7 @@
     {
       "name": "concat_0_x",
       "type": "time",
-      "domain": {"data": "data_1", "field": "monthdate_date"},
+      "domain": {"data": "data_0", "field": "monthdate_date"},
       "range": [0, {"signal": "width"}]
     },
     {
@@ -568,15 +568,15 @@
     {
       "name": "concat_1_x",
       "type": "linear",
-      "domain": {"data": "data_0", "field": "__count"},
+      "domain": {"data": "data_1", "field": "__count"},
       "range": [0, {"signal": "width"}],
       "nice": true,
       "zero": true
     },
     {
       "name": "concat_1_y",
       "type": "band",
-      "domain": {"data": "data_0", "field": "weather", "sort": true},
+      "domain": {"data": "data_1", "field": "weather", "sort": true},
       "range": {"step": {"signal": "concat_1_y_step"}},
       "paddingInner": 0.1,
       "paddingOuter": 0.05

diff --git a/src/compile/data/dataflow.ts b/src/compile/data/dataflow.ts
@@ -116,10 +116,12 @@ export abstract class DataFlowNode {
     // remove old links
     this._children = []; // equivalent to removing every child link one by one
     parent.removeChild(this);
-    parent.parent.removeChild(parent);
+    const loc = parent.parent.removeChild(parent);
+
+    // swap two nodes but maintain order in children
+    this._parent = newParent;
+    newParent.addChild(this, loc);
 
-    // swap two nodes
-    this.parent = newParent;
     parent.parent = this;
   }
 }