Displacement type pile with overlaying tracks does not work

[ThHarbig]

When adding "alignment": "overlay" while using "displacement": {"type": "pile"} the displacement no longer works (see demoE%5DE)H%27displacementG(%27Mpile%27JpaddXgG3.5)H%27markG%27poXt%27H%27xG(TstartYxeG(TendYsizeG(%27valueG3)H%27colorG(ETO%27H%27MnomXal%27H%27domaXSE~%27PNIPN%2FZpNIZpNIUncertaX_OIR%2FR%27VrangeSE~%27%23CB3B8CqCB71A3qCB96B3Igrayq029F73q5A9F8Cq5A9F8C%27VlegendGtrueE)H%27widthG700H%27heightG260K~)K~%5DK)K%5D%2CK%27styleG(%27outlXeWidthG0)%0A)%20%20EK~~G!%20H%2CEI%27H~%27J%2C%20%27K%0AMtypeG%27NathogenicOsignificanceQFieldsSE~(%27XdexGRZbenignIBenignSG%5BT%27fieldG%27VE%5DH%27XinY%27JMgenomic%27)H%27ZLikelyjJnameG%27qI%23~*%01~qjZYXVTSRQONMKJIHGE)) Replacing it with a dataTransform is a work-around:

          "dataTransform": [
            {
              "type": "displace",
              "method": "pile",
              "boundingBox": {
                "padding": 3.5,
                "startField": "start",
                "endField": "end"
              },
              "newField": "row"
            }
          ],
          "row": {"field": "row", "type": "nominal"},

This also fixes the slightly buggy piling that is visible when using "displacement": {"type": "pile"}

[sehilyi]

Gosling currently supports displacement in two ways, i.e., (1) displacement and (2) displace Data Transform. Having these two options make processing specs more complicated, so I wonder if it makes sense to remove the former option and provide a single method for users.

interface SingleTrackBase extends CommonTrackDef {
    ...
-    // Resolving overlaps
-    displacement?: Displacement;
}

The original purpose for adding the former option was to support an easier way to use displacement. (1) displacement

"displacement": {"type": "pile"} // internally add `displace` `dataTransform`  based on spec (e..g, x, xe) and add `row` channel when processing the spec

(2) displace dataTransform

          "dataTransform": [
            {
              "type": "displace",
              "method": "pile",
              "boundingBox": {
                "padding": 3.5,
                "startField": "start",
                "endField": "end"
              },
              "newField": "row"
            }
          ],
          "row": {"field": "row", "type": "nominal"},

cc @manzt @etowahadams

[ThHarbig]

Somehow related to piling issues: In the example below (sorry for the weird link, GitHub will somehow not format it properly) the piling is off and the points are not placed on the axis although there would be enough space. I initially thought it would be because I set startField and endField to the same value, but if I do this with the example in the original post it works fine.

demo

[ThHarbig]

Thank you for the fix @sehilyi, I am adapting the IslandViewer example now. Can I pile from bottom to top instead of top to bottom (or inner circle/outer circle in circular layout) as well?

[sehilyi]

The y channel supports flipping, so I think you can replace the row with with y channel and then use the flip option.

{
      "style": {"outlineWidth": 1, "outline": "black"},
      "data": {
        "url": "https://s3.amazonaws.com/gosling-lang.org/data/IslandViewer/NC_004631.1_annotations.csv",
        "type": "csv",
        "genomicFields": ["Gene start", "Gene end"]
      },
      "dataTransform": [
        {
          "type": "displace",
          "method": "pile",
          "boundingBox": {
            "padding": 3.5,
            "startField": "Gene start",
            "endField": "Gene end"
          },
          "newField": "row"
        }
      ],
-      "row": {"field": "row", "type": "nominal"},
+      "y": {"field": "row", "type": "nominal", "flip": true},
      "mark": "point",
      "x": {"field": "Gene start", "type": "genomic"},
      "xe": {"field": "Gene end", "type": "genomic"},
      "size": {"value": 3},
      "color": {
        "field": "Type",
        "type": "nominal",
        "domain": ["Victors", "BLAST", "RGI", "PAG"],
        "range": ["#460B80", "#A684EA", "#FF9CC1", "#FF9CC1"]
      }
    },