gosling.js 2.0.0-alpha.7 → 2.0.0-alpha.8

package/dist/gosling.js

@@ -35,7 +35,7 @@ import { scaleLinear, scaleLog, scaleQuantile, scaleSequential, scaleOrdinal, sc
 import { drag } from "d3-drag";
 import { sampleSize, isEqual, uniqBy } from "lodash-es";
 import { interpolateViridis } from "d3-scale-chromatic";
-import { A as Ajv, r as resolveSuperposedTracks, I as IsChannelDeep, t as traverseTracks, a as IsTemplateTrack, D as DEWFAULT_TITLE_PADDING_ON_TOP_AND_BOTTOM, b as traverseTracksAndViews, c as traverseViewArrangements, d as DEFAULT_AXIS_SIZE, e as Is2DTrack, f as DEFAULT_VIEW_SPACING, g as DEFAULT_INNER_RADIUS_PROP, h as IsOverlaidTrack, i as IsXAxis, j as IsYAxis, k as DEFAULT_CIRCULAR_VIEW_PADDING, u as uuid, l as traverseToFixSpecDownstream, m as absToChr, n as colorToHex, o as getTextStyle, p as computeChromSizes, q as cartesianToPolar, s as IsDummyTrack, v as getHiGlassColorRange, R as RADIAN_GAP, w as valueToRadian, x as pointsToDegree, y as commonjsGlobal, z as RemoteFile, B as chrToAbs, C as IsOneOfFilter, E as IsRangeFilter, F as IsIncludeFilter, G as getChannelKeysByAggregateFnc, H as getChannelKeysByType, J as sanitizeChrName, K as filterUsingGenoPos, L as IsDataDeepTileset, M as IsDomainChr, N as IsDomainInterval, O as IsDomainChrInterval, S as SUPPORTED_CHANNELS, P as IsChannelValue, Q as getValueUsingChannel, T as rectProperty, U as pointProperty, V as barProperty, W as IsStackedChannel, X as IsDomainArray, Y as PREDEFINED_COLOR_STR_MAP, Z as IsRangeArray, _ as isTabularDataFetcher, $ as drawPreEmbellishment, a0 as drawMark, a1 as drawPostEmbellishment, a2 as getRelativeGenomicPosition, a3 as hasDataTransform, a4 as IsMouseEventsDeep, a5 as flatArrayToPairArray, a6 as IsSingleView, a7 as IsMultipleViews, a8 as GenomicPositionHelper } from "./exported-utils-b3cf08ff.js";
+import { A as Ajv, r as resolveSuperposedTracks, I as IsChannelDeep, t as traverseTracks, a as IsTemplateTrack, D as DEWFAULT_TITLE_PADDING_ON_TOP_AND_BOTTOM, b as traverseTracksAndViews, c as traverseViewArrangements, d as DEFAULT_AXIS_SIZE, e as Is2DTrack, f as DEFAULT_VIEW_SPACING, g as DEFAULT_INNER_RADIUS_PROP, h as IsOverlaidTrack, i as IsXAxis, j as IsYAxis, k as DEFAULT_CIRCULAR_VIEW_PADDING, u as uuid, l as traverseToFixSpecDownstream, m as absToChr, n as colorToHex, o as getTextStyle, p as computeChromSizes, q as cartesianToPolar, s as IsDummyTrack, v as getHiGlassColorRange, R as RADIAN_GAP, w as valueToRadian, x as pointsToDegree, y as commonjsGlobal, z as RemoteFile, B as chrToAbs, C as IsOneOfFilter, E as IsRangeFilter, F as IsIncludeFilter, G as getChannelKeysByAggregateFnc, H as getChannelKeysByType, J as sanitizeChrName, K as filterUsingGenoPos, L as IsDataDeepTileset, M as IsDomainChr, N as IsDomainInterval, O as IsDomainChrInterval, S as SUPPORTED_CHANNELS, P as IsChannelValue, Q as getValueUsingChannel, T as rectProperty, U as pointProperty, V as barProperty, W as IsStackedChannel, X as IsDomainArray, Y as PREDEFINED_COLOR_STR_MAP, Z as IsRangeArray, _ as isTabularDataFetcher, $ as drawPreEmbellishment, a0 as drawMark, a1 as drawPostEmbellishment, a2 as getRelativeGenomicPosition, a3 as hasDataTransform, a4 as IsMouseEventsDeep, a5 as flatArrayToPairArray, a6 as IsSingleView, a7 as IsMultipleViews, a8 as GenomicPositionHelper } from "./exported-utils-9e651c40.js";
 import React, { useState, useImperativeHandle, useEffect } from "react";
 import { format, precisionPrefix, formatPrefix } from "d3-format";
 import slugid from "slugid";
@@ -54,8 +54,10 @@ import { dsvFormat } from "d3-dsv";
 import { createNanoEvents } from "nanoevents";
 import PubSub$1 from "pubsub-js";
 import { zoom, ZoomTransform } from "d3-zoom";
+import * as uchi from "uchimata";
+import { tableFromArrays, tableToIPC, tableFromIPC, Type } from "@uwdata/flechette";
 const name = "gosling.js";
-const version = "2.0.0-alpha.7";
+const version = "2.0.0-alpha.8";
 const $ref$1 = "#/definitions/GoslingSpec";
 const $schema$1 = "http://json-schema.org/draft-07/schema#";
 const definitions$1 = {
@@ -99,6 +101,10 @@ const definitions$1 = {
         "const": "mm9",
         type: "string"
       },
+      {
+        "const": "sacCer3",
+        type: "string"
+      },
       {
         "const": "unknown",
         type: "string"
@@ -621,6 +627,9 @@ const definitions$1 = {
       {
         $ref: "#/definitions/FilterTransform"
       },
+      {
+        $ref: "#/definitions/JoinTransform"
+      },
       {
         $ref: "#/definitions/StrConcatTransform"
       },
@@ -1213,6 +1222,16 @@ const definitions$1 = {
             description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
             type: "string"
           },
+          locus: {
+            anyOf: [
+              {
+                $ref: "#/definitions/X"
+              },
+              {
+                $ref: "#/definitions/ChannelValue"
+              }
+            ]
+          },
           mark: {
             $ref: "#/definitions/Mark"
           },
@@ -1366,6 +1385,16 @@ const definitions$1 = {
                       description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                       type: "string"
                     },
+                    locus: {
+                      anyOf: [
+                        {
+                          $ref: "#/definitions/X"
+                        },
+                        {
+                          $ref: "#/definitions/ChannelValue"
+                        }
+                      ]
+                    },
                     mark: {
                       $ref: "#/definitions/Mark"
                     },
@@ -1424,6 +1453,34 @@ const definitions$1 = {
                       description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
                       type: "number"
                     },
+                    spatial: {
+                      additionalProperties: false,
+                      properties: {
+                        chr: {
+                          type: "string"
+                        },
+                        coord: {
+                          type: "string"
+                        },
+                        x: {
+                          type: "string"
+                        },
+                        y: {
+                          type: "string"
+                        },
+                        z: {
+                          type: "string"
+                        }
+                      },
+                      required: [
+                        "x",
+                        "y",
+                        "z",
+                        "chr",
+                        "coord"
+                      ],
+                      type: "object"
+                    },
                     startAngle: {
                       description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
                       type: "number"
@@ -1674,6 +1731,34 @@ const definitions$1 = {
             description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
             type: "number"
           },
+          spatial: {
+            additionalProperties: false,
+            properties: {
+              chr: {
+                type: "string"
+              },
+              coord: {
+                type: "string"
+              },
+              x: {
+                type: "string"
+              },
+              y: {
+                type: "string"
+              },
+              z: {
+                type: "string"
+              }
+            },
+            required: [
+              "x",
+              "y",
+              "z",
+              "chr",
+              "coord"
+            ],
+            type: "object"
+          },
           startAngle: {
             description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
             type: "number"
@@ -1983,6 +2068,16 @@ const definitions$1 = {
             description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
             type: "string"
           },
+          locus: {
+            anyOf: [
+              {
+                $ref: "#/definitions/X"
+              },
+              {
+                $ref: "#/definitions/ChannelValue"
+              }
+            ]
+          },
           mark: {
             $ref: "#/definitions/Mark"
           },
@@ -2136,6 +2231,16 @@ const definitions$1 = {
                       description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                       type: "string"
                     },
+                    locus: {
+                      anyOf: [
+                        {
+                          $ref: "#/definitions/X"
+                        },
+                        {
+                          $ref: "#/definitions/ChannelValue"
+                        }
+                      ]
+                    },
                     mark: {
                       $ref: "#/definitions/Mark"
                     },
@@ -2194,6 +2299,34 @@ const definitions$1 = {
                       description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
                       type: "number"
                     },
+                    spatial: {
+                      additionalProperties: false,
+                      properties: {
+                        chr: {
+                          type: "string"
+                        },
+                        coord: {
+                          type: "string"
+                        },
+                        x: {
+                          type: "string"
+                        },
+                        y: {
+                          type: "string"
+                        },
+                        z: {
+                          type: "string"
+                        }
+                      },
+                      required: [
+                        "x",
+                        "y",
+                        "z",
+                        "chr",
+                        "coord"
+                      ],
+                      type: "object"
+                    },
                     startAngle: {
                       description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
                       type: "number"
@@ -2444,6 +2577,34 @@ const definitions$1 = {
             description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
             type: "number"
           },
+          spatial: {
+            additionalProperties: false,
+            properties: {
+              chr: {
+                type: "string"
+              },
+              coord: {
+                type: "string"
+              },
+              x: {
+                type: "string"
+              },
+              y: {
+                type: "string"
+              },
+              z: {
+                type: "string"
+              }
+            },
+            required: [
+              "x",
+              "y",
+              "z",
+              "chr",
+              "coord"
+            ],
+            type: "object"
+          },
           startAngle: {
             description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
             type: "number"
@@ -2810,6 +2971,16 @@ const definitions$1 = {
                       description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                       type: "string"
                     },
+                    locus: {
+                      anyOf: [
+                        {
+                          $ref: "#/definitions/X"
+                        },
+                        {
+                          $ref: "#/definitions/ChannelValue"
+                        }
+                      ]
+                    },
                     mark: {
                       $ref: "#/definitions/Mark"
                     },
@@ -2868,6 +3039,34 @@ const definitions$1 = {
                       description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
                       type: "number"
                     },
+                    spatial: {
+                      additionalProperties: false,
+                      properties: {
+                        chr: {
+                          type: "string"
+                        },
+                        coord: {
+                          type: "string"
+                        },
+                        x: {
+                          type: "string"
+                        },
+                        y: {
+                          type: "string"
+                        },
+                        z: {
+                          type: "string"
+                        }
+                      },
+                      required: [
+                        "x",
+                        "y",
+                        "z",
+                        "chr",
+                        "coord"
+                      ],
+                      type: "object"
+                    },
                     startAngle: {
                       description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
                       type: "number"
@@ -3463,6 +3662,59 @@ const definitions$1 = {
     ],
     type: "object"
   },
+  JoinTransform: {
+    additionalProperties: false,
+    description: "Join new data to the existing data. The data will be combined based on the overlap of genomic positions. The data will join _right_ to the new data (e.g., BigWig --> 3D Model).",
+    properties: {
+      from: {
+        additionalProperties: false,
+        description: "The new data to be combined, e.g., 3D Model",
+        properties: {
+          chromosomeField: {
+            type: "string"
+          },
+          genomicField: {
+            type: "string"
+          },
+          url: {
+            type: "string"
+          }
+        },
+        required: [
+          "url",
+          "chromosomeField",
+          "genomicField"
+        ],
+        type: "object"
+      },
+      to: {
+        additionalProperties: false,
+        description: "The existing data to be updated, e.g., BigWig",
+        properties: {
+          endField: {
+            type: "string"
+          },
+          startField: {
+            type: "string"
+          }
+        },
+        required: [
+          "startField"
+        ],
+        type: "object"
+      },
+      type: {
+        "const": "join",
+        type: "string"
+      }
+    },
+    required: [
+      "type",
+      "to",
+      "from"
+    ],
+    type: "object"
+  },
   JsonData: {
     additionalProperties: false,
     description: "The JSON data format allows users to include data directly in the Gosling's JSON specification.",
@@ -3559,11 +3811,71 @@ const definitions$1 = {
     type: "object"
   },
   Layout: {
-    "enum": [
-      "linear",
-      "circular"
+    anyOf: [
+      {
+        "const": "linear",
+        type: "string"
+      },
+      {
+        "const": "circular",
+        type: "string"
+      },
+      {
+        "const": "spatial",
+        type: "string"
+      },
+      {
+        $ref: "#/definitions/LayoutSpatial"
+      }
+    ]
+  },
+  LayoutSpatial: {
+    additionalProperties: false,
+    properties: {
+      model: {
+        additionalProperties: false,
+        properties: {
+          chromosome: {
+            type: "string"
+          },
+          position: {
+            type: "string"
+          },
+          type: {
+            "const": "csv",
+            type: "string"
+          },
+          url: {
+            type: "string"
+          },
+          xyz: {
+            items: {
+              type: "string"
+            },
+            maxItems: 3,
+            minItems: 3,
+            type: "array"
+          }
+        },
+        required: [
+          "type",
+          "url",
+          "xyz",
+          "chromosome",
+          "position"
+        ],
+        type: "object"
+      },
+      type: {
+        "const": "spatial",
+        type: "string"
+      }
+    },
+    required: [
+      "type",
+      "model"
     ],
-    type: "string"
+    type: "object"
   },
   LogBase: {
     anyOf: [
@@ -3633,7 +3945,10 @@ const definitions$1 = {
       "triangleRight",
       "triangleBottom",
       "brush",
-      "_header"
+      "_header",
+      "sphere",
+      "box",
+      "octahedron"
     ],
     type: "string"
   },
@@ -4044,6 +4359,16 @@ const definitions$1 = {
               description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
               type: "string"
             },
+            locus: {
+              anyOf: [
+                {
+                  $ref: "#/definitions/X"
+                },
+                {
+                  $ref: "#/definitions/ChannelValue"
+                }
+              ]
+            },
             mark: {
               $ref: "#/definitions/Mark"
             },
@@ -4102,6 +4427,34 @@ const definitions$1 = {
               description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
               type: "number"
             },
+            spatial: {
+              additionalProperties: false,
+              properties: {
+                chr: {
+                  type: "string"
+                },
+                coord: {
+                  type: "string"
+                },
+                x: {
+                  type: "string"
+                },
+                y: {
+                  type: "string"
+                },
+                z: {
+                  type: "string"
+                }
+              },
+              required: [
+                "x",
+                "y",
+                "z",
+                "chr",
+                "coord"
+              ],
+              type: "object"
+            },
             startAngle: {
               description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
               type: "number"
@@ -4371,6 +4724,16 @@ const definitions$1 = {
         description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
         type: "string"
       },
+      locus: {
+        anyOf: [
+          {
+            $ref: "#/definitions/X"
+          },
+          {
+            $ref: "#/definitions/ChannelValue"
+          }
+        ]
+      },
       mark: {
         $ref: "#/definitions/Mark"
       },
@@ -4429,6 +4792,34 @@ const definitions$1 = {
         description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
         type: "number"
       },
+      spatial: {
+        additionalProperties: false,
+        properties: {
+          chr: {
+            type: "string"
+          },
+          coord: {
+            type: "string"
+          },
+          x: {
+            type: "string"
+          },
+          y: {
+            type: "string"
+          },
+          z: {
+            type: "string"
+          }
+        },
+        required: [
+          "x",
+          "y",
+          "z",
+          "chr",
+          "coord"
+        ],
+        type: "object"
+      },
       startAngle: {
         description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
         type: "number"
@@ -4728,6 +5119,16 @@ const definitions$1 = {
         description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
         type: "string"
       },
+      locus: {
+        anyOf: [
+          {
+            $ref: "#/definitions/X"
+          },
+          {
+            $ref: "#/definitions/ChannelValue"
+          }
+        ]
+      },
       mark: {
         $ref: "#/definitions/Mark"
       },
@@ -4786,6 +5187,34 @@ const definitions$1 = {
         description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
         type: "number"
       },
+      spatial: {
+        additionalProperties: false,
+        properties: {
+          chr: {
+            type: "string"
+          },
+          coord: {
+            type: "string"
+          },
+          x: {
+            type: "string"
+          },
+          y: {
+            type: "string"
+          },
+          z: {
+            type: "string"
+          }
+        },
+        required: [
+          "x",
+          "y",
+          "z",
+          "chr",
+          "coord"
+        ],
+        type: "object"
+      },
       startAngle: {
         description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
         type: "number"
@@ -5095,6 +5524,16 @@ const definitions$1 = {
               description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
               type: "string"
             },
+            locus: {
+              anyOf: [
+                {
+                  $ref: "#/definitions/X"
+                },
+                {
+                  $ref: "#/definitions/ChannelValue"
+                }
+              ]
+            },
             mark: {
               $ref: "#/definitions/Mark"
             },
@@ -5153,6 +5592,34 @@ const definitions$1 = {
               description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
               type: "number"
             },
+            spatial: {
+              additionalProperties: false,
+              properties: {
+                chr: {
+                  type: "string"
+                },
+                coord: {
+                  type: "string"
+                },
+                x: {
+                  type: "string"
+                },
+                y: {
+                  type: "string"
+                },
+                z: {
+                  type: "string"
+                }
+              },
+              required: [
+                "x",
+                "y",
+                "z",
+                "chr",
+                "coord"
+              ],
+              type: "object"
+            },
             startAngle: {
               description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
               type: "number"
@@ -5448,6 +5915,16 @@ const definitions$1 = {
         description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
         type: "string"
       },
+      locus: {
+        anyOf: [
+          {
+            $ref: "#/definitions/X"
+          },
+          {
+            $ref: "#/definitions/ChannelValue"
+          }
+        ]
+      },
       mark: {
         $ref: "#/definitions/Mark"
       },
@@ -5506,6 +5983,34 @@ const definitions$1 = {
         description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
         type: "number"
       },
+      spatial: {
+        additionalProperties: false,
+        properties: {
+          chr: {
+            type: "string"
+          },
+          coord: {
+            type: "string"
+          },
+          x: {
+            type: "string"
+          },
+          y: {
+            type: "string"
+          },
+          z: {
+            type: "string"
+          }
+        },
+        required: [
+          "x",
+          "y",
+          "z",
+          "chr",
+          "coord"
+        ],
+        type: "object"
+      },
       startAngle: {
         description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
         type: "number"
@@ -5988,6 +6493,16 @@ const definitions$1 = {
         description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
         type: "string"
       },
+      locus: {
+        anyOf: [
+          {
+            $ref: "#/definitions/X"
+          },
+          {
+            $ref: "#/definitions/ChannelValue"
+          }
+        ]
+      },
       mark: {
         $ref: "#/definitions/Mark"
       },
@@ -6046,6 +6561,34 @@ const definitions$1 = {
         description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
         type: "number"
       },
+      spatial: {
+        additionalProperties: false,
+        properties: {
+          chr: {
+            type: "string"
+          },
+          coord: {
+            type: "string"
+          },
+          x: {
+            type: "string"
+          },
+          y: {
+            type: "string"
+          },
+          z: {
+            type: "string"
+          }
+        },
+        required: [
+          "x",
+          "y",
+          "z",
+          "chr",
+          "coord"
+        ],
+        type: "object"
+      },
       startAngle: {
         description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
         type: "number"
@@ -6348,6 +6891,16 @@ const definitions$1 = {
             description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
             type: "string"
           },
+          locus: {
+            anyOf: [
+              {
+                $ref: "#/definitions/X"
+              },
+              {
+                $ref: "#/definitions/ChannelValue"
+              }
+            ]
+          },
           mark: {
             $ref: "#/definitions/Mark"
           },
@@ -6497,6 +7050,16 @@ const definitions$1 = {
                       description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                       type: "string"
                     },
+                    locus: {
+                      anyOf: [
+                        {
+                          $ref: "#/definitions/X"
+                        },
+                        {
+                          $ref: "#/definitions/ChannelValue"
+                        }
+                      ]
+                    },
                     mark: {
                       $ref: "#/definitions/Mark"
                     },
@@ -6555,6 +7118,34 @@ const definitions$1 = {
                       description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
                       type: "number"
                     },
+                    spatial: {
+                      additionalProperties: false,
+                      properties: {
+                        chr: {
+                          type: "string"
+                        },
+                        coord: {
+                          type: "string"
+                        },
+                        x: {
+                          type: "string"
+                        },
+                        y: {
+                          type: "string"
+                        },
+                        z: {
+                          type: "string"
+                        }
+                      },
+                      required: [
+                        "x",
+                        "y",
+                        "z",
+                        "chr",
+                        "coord"
+                      ],
+                      type: "object"
+                    },
                     startAngle: {
                       description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
                       type: "number"
@@ -6805,6 +7396,34 @@ const definitions$1 = {
             description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
             type: "number"
           },
+          spatial: {
+            additionalProperties: false,
+            properties: {
+              chr: {
+                type: "string"
+              },
+              coord: {
+                type: "string"
+              },
+              x: {
+                type: "string"
+              },
+              y: {
+                type: "string"
+              },
+              z: {
+                type: "string"
+              }
+            },
+            required: [
+              "x",
+              "y",
+              "z",
+              "chr",
+              "coord"
+            ],
+            type: "object"
+          },
           startAngle: {
             description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
             type: "number"
@@ -7111,6 +7730,16 @@ const definitions$1 = {
             description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
             type: "string"
           },
+          locus: {
+            anyOf: [
+              {
+                $ref: "#/definitions/X"
+              },
+              {
+                $ref: "#/definitions/ChannelValue"
+              }
+            ]
+          },
           mark: {
             $ref: "#/definitions/Mark"
           },
@@ -7260,6 +7889,16 @@ const definitions$1 = {
                       description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                       type: "string"
                     },
+                    locus: {
+                      anyOf: [
+                        {
+                          $ref: "#/definitions/X"
+                        },
+                        {
+                          $ref: "#/definitions/ChannelValue"
+                        }
+                      ]
+                    },
                     mark: {
                       $ref: "#/definitions/Mark"
                     },
@@ -7318,6 +7957,34 @@ const definitions$1 = {
                       description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
                       type: "number"
                     },
+                    spatial: {
+                      additionalProperties: false,
+                      properties: {
+                        chr: {
+                          type: "string"
+                        },
+                        coord: {
+                          type: "string"
+                        },
+                        x: {
+                          type: "string"
+                        },
+                        y: {
+                          type: "string"
+                        },
+                        z: {
+                          type: "string"
+                        }
+                      },
+                      required: [
+                        "x",
+                        "y",
+                        "z",
+                        "chr",
+                        "coord"
+                      ],
+                      type: "object"
+                    },
                     startAngle: {
                       description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
                       type: "number"
@@ -7568,6 +8235,34 @@ const definitions$1 = {
             description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
             type: "number"
           },
+          spatial: {
+            additionalProperties: false,
+            properties: {
+              chr: {
+                type: "string"
+              },
+              coord: {
+                type: "string"
+              },
+              x: {
+                type: "string"
+              },
+              y: {
+                type: "string"
+              },
+              z: {
+                type: "string"
+              }
+            },
+            required: [
+              "x",
+              "y",
+              "z",
+              "chr",
+              "coord"
+            ],
+            type: "object"
+          },
           startAngle: {
             description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
             type: "number"
@@ -7927,6 +8622,16 @@ const definitions$1 = {
                       description: "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                       type: "string"
                     },
+                    locus: {
+                      anyOf: [
+                        {
+                          $ref: "#/definitions/X"
+                        },
+                        {
+                          $ref: "#/definitions/ChannelValue"
+                        }
+                      ]
+                    },
                     mark: {
                       $ref: "#/definitions/Mark"
                     },
@@ -7985,6 +8690,34 @@ const definitions$1 = {
                       description: "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
                       type: "number"
                     },
+                    spatial: {
+                      additionalProperties: false,
+                      properties: {
+                        chr: {
+                          type: "string"
+                        },
+                        coord: {
+                          type: "string"
+                        },
+                        x: {
+                          type: "string"
+                        },
+                        y: {
+                          type: "string"
+                        },
+                        z: {
+                          type: "string"
+                        }
+                      },
+                      required: [
+                        "x",
+                        "y",
+                        "z",
+                        "chr",
+                        "coord"
+                      ],
+                      type: "object"
+                    },
                     startAngle: {
                       description: 'Specify the start angle (in the range of [0, 360]) of circular tracks (`{"layout": "circular"}`).',
                       type: "number"
@@ -12369,9 +13102,9 @@ class PixiTrack extends Track {
     if (this.options && this.options.dataTransform) {
       let chosenTransform = null;
       if (this.tilesetInfo && this.tilesetInfo.transforms) {
-        for (const transform of this.tilesetInfo.transforms) {
-          if (transform.value === this.options.dataTransform) {
-            chosenTransform = transform;
+        for (const transform2 of this.tilesetInfo.transforms) {
+          if (transform2.value === this.options.dataTransform) {
+            chosenTransform = transform2;
           }
         }
       }
@@ -18270,6 +19003,7 @@ var TrackType = /* @__PURE__ */ ((TrackType2) => {
   TrackType2[TrackType2["BrushLinear"] = 4] = "BrushLinear";
   TrackType2[TrackType2["BrushCircular"] = 5] = "BrushCircular";
   TrackType2[TrackType2["Heatmap"] = 6] = "Heatmap";
+  TrackType2[TrackType2["Spatial"] = 7] = "Spatial";
   return TrackType2;
 })(TrackType || {});
 function createTrackDefs(trackInfos, theme) {
@@ -18285,6 +19019,18 @@ function createTrackDefs(trackInfos, theme) {
     } else if (IsDummyTrack(track)) {
       const dummyTrackDefs = processDummyTrack(track, boundingBox, theme);
       trackDefs.push(...dummyTrackDefs);
+    } else if ("layout" in track && track.layout === "spatial") {
+      const trackDef = {
+        type: 7,
+        trackId: track.id,
+        boundingBox,
+        options: {
+          // @ts-expect-error At this point, the spec is processed
+          spec: track,
+          processedSpec: track
+        }
+      };
+      trackDefs.push(trackDef);
     } else {
       const goslingAxisDefs = processGoslingTrack(track, boundingBox, theme);
       trackDefs.push(...goslingAxisDefs);
@@ -26021,6 +26767,53 @@ class BigWigDataFetcher {
     return level || reductionLevels.slice(-1)[0];
   }
 }
+/**
+ * Make an assertion.
+ *
+ * Usage
+ * @example
+ * ```ts
+ * const value: boolean = Math.random() <= 0.5;
+ * assert(value, "value is greater than than 0.5!");
+ * value // true
+ * ```
+ *
+ * @copyright Trevor Manz 2025
+ * @license MIT
+ * @see {@link https://github.com/manzt/manzt/blob/f7faee/utils/assert.js}
+ */
+function assert(expression, msg = "") {
+  if (!expression)
+    throw new Error(msg);
+}
+async function transform(t, data, xScale, assembly) {
+  switch (t.type) {
+    case "filter":
+      return filterData(t, data);
+    case "join":
+      return await joinData(t, data, assembly);
+    case "concat":
+      return concatString(t, data);
+    case "replace":
+      return replaceString(t, data);
+    case "log":
+      return calculateData(t, data);
+    case "exonSplit":
+      return splitExon(t, data, assembly);
+    case "genomicLength":
+      return calculateGenomicLength(t, data);
+    case "svType":
+      return inferSvType(t, data);
+    case "coverage":
+      assert(xScale, "xScale parameters is required for coverage transform");
+      return aggregateCoverage(t, data, xScale);
+    case "subjson":
+      return parseSubJSON(t, data);
+    case "displace":
+      assert(xScale, "xScale parameters is required for displace transform");
+      return displace(t, data, xScale);
+  }
+}
 function filterData(filter, data) {
   const { field, not } = filter;
   let output = Array.from(data);
@@ -26043,6 +26836,41 @@ function filterData(filter, data) {
   }
   return output;
 }
+const FETCH_CACHE = {};
+async function joinData(transform2, toData, assembly = "hg19") {
+  const { from, to } = transform2;
+  const fetchDataIfNeeded = async (url) => {
+    var _a, _b;
+    if (FETCH_CACHE[url])
+      return FETCH_CACHE[url];
+    const response = await fetch(url);
+    const text2 = await response.text();
+    const data = dsvFormat(",").parse(text2);
+    const chromSizes = computeChromSizes(assembly);
+    for (const d of data) {
+      const chrName = d[from.chromosomeField];
+      const chromPosition = d[from.genomicField];
+      d[from.genomicField] = ((_b = (_a = chromSizes.interval[chrName]) == null ? void 0 : _a[0]) != null ? _b : 0) + +chromPosition;
+    }
+    FETCH_CACHE[url] = data;
+    return data;
+  };
+  const fromData = await fetchDataIfNeeded(from.url);
+  const joinned = fromData.map((f) => {
+    var _a;
+    const found = (_a = toData.find((t) => {
+      if (to.endField) {
+        const start = +t[to.startField] <= +f[from.genomicField];
+        const end = +t[to.endField] >= +f[from.genomicField];
+        return start && end;
+      } else {
+        return +t[to.startField] == +f[from.genomicField];
+      }
+    })) != null ? _a : { value: 0 };
+    return { ...f, ...found };
+  });
+  return joinned;
+}
 function concatString(concat, data) {
   const { fields, separator, newField } = concat;
   let output = Array.from(data);
@@ -26969,7 +27797,7 @@ class LinearBrushModel {
 }
 const GOSLING_DATA_ROW_UID_FIELD = "gosling-data-row-uid";
 function getTabularData(spec, data) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const tabularData = [];
   if (!IsDataDeepTileset(spec.data)) {
     console.warn("No data is specified");
@@ -26981,28 +27809,29 @@ function getTabularData(spec, data) {
     }
     const bin = (_a = spec.data.binSize) != null ? _a : 1;
     const numericValues = data.dense;
-    const numOfGenomicPositions = data.tileSize;
-    const tileUnitSize = data.tileWidth / data.tileSize;
-    const valueName = (_b = spec.data.value) != null ? _b : "value";
-    const columnName = (_c = spec.data.column) != null ? _c : "position";
-    const startName = (_d = spec.data.start) != null ? _d : "start";
-    const endName = (_e = spec.data.end) != null ? _e : "end";
+    const numOfGenomicPositions = (_b = data.tileSize) != null ? _b : data.dense.length;
+    const tileUnitSize = ((_c = data.tileWidth) != null ? _c : 1024) / numOfGenomicPositions;
+    const valueName = (_d = spec.data.value) != null ? _d : "value";
+    const columnName = (_e = spec.data.column) != null ? _e : "position";
+    const startName = (_f = spec.data.start) != null ? _f : "start";
+    const endName = (_g = spec.data.end) != null ? _g : "end";
     const minValueName = `${valueName}_min`;
     const maxValueName = `${valueName}_max`;
-    const agg = (_f = spec.data.aggregation) != null ? _f : "mean";
+    const agg = (_h = spec.data.aggregation) != null ? _h : "mean";
     let cumVal = 0;
     let minVal = Number.MAX_SAFE_INTEGER;
     let maxVal = Number.MIN_SAFE_INTEGER;
     let binStart = Number.MIN_SAFE_INTEGER;
     let binEnd = Number.MAX_SAFE_INTEGER;
     Array.from(Array(numOfGenomicPositions).keys()).forEach((g, j) => {
+      var _a2, _b2, _c2;
       if (bin === 1) {
         const value = numericValues[j] / (agg === "mean" ? tileUnitSize : 1);
         tabularData.push({
           [valueName]: value,
-          [columnName]: data.tileX + (j + 0.5) * tileUnitSize,
-          [startName]: data.tileX + j * tileUnitSize,
-          [endName]: data.tileX + (j + 1) * tileUnitSize,
+          [columnName]: ((_a2 = data.tileX) != null ? _a2 : 0) + (j + 0.5) * tileUnitSize,
+          [startName]: ((_b2 = data.tileX) != null ? _b2 : 0) + j * tileUnitSize,
+          [endName]: ((_c2 = data.tileX) != null ? _c2 : 0) + (j + 1) * tileUnitSize,
           [minValueName]: value,
           [maxValueName]: value
         });
@@ -27044,20 +27873,20 @@ function getTabularData(spec, data) {
     if (!("dense" in data) || data.shape === void 0) {
       return;
     }
-    const bin = (_g = spec.data.binSize) != null ? _g : 1;
+    const bin = (_i = spec.data.binSize) != null ? _i : 1;
     const numOfTotalCategories = data.shape[0];
-    const categories = (_h = spec.data.categories) != null ? _h : [...Array(numOfTotalCategories).keys()];
+    const categories = (_j = spec.data.categories) != null ? _j : [...Array(numOfTotalCategories).keys()];
     const numericValues = data.dense;
     const numOfGenomicPositions = data.shape[1];
     const tileUnitSize = data.tileWidth / data.tileSize;
-    const rowName = (_i = spec.data.row) != null ? _i : "category";
-    const valueName = (_j = spec.data.value) != null ? _j : "value";
-    const columnName = (_k = spec.data.column) != null ? _k : "position";
-    const startName = (_l = spec.data.start) != null ? _l : "start";
-    const endName = (_m = spec.data.end) != null ? _m : "end";
+    const rowName = (_k = spec.data.row) != null ? _k : "category";
+    const valueName = (_l = spec.data.value) != null ? _l : "value";
+    const columnName = (_m = spec.data.column) != null ? _m : "position";
+    const startName = (_n = spec.data.start) != null ? _n : "start";
+    const endName = (_o = spec.data.end) != null ? _o : "end";
     const minValueName = `${valueName}_min`;
     const maxValueName = `${valueName}_max`;
-    const agg = (_n = spec.data.aggregation) != null ? _n : "mean";
+    const agg = (_p = spec.data.aggregation) != null ? _p : "mean";
     categories.forEach((c, i) => {
       let cumVal = 0;
       let binStart = Number.MIN_SAFE_INTEGER;
@@ -27123,8 +27952,8 @@ function getTabularData(spec, data) {
     const numericValues = data.dense;
     const tileXUnitSize = tileWidth / numBins;
     const tileYUnitSize = tileHeight / numBins;
-    const columnField = (_o = spec.data.column) != null ? _o : "x";
-    const rowField = (_p = spec.data.row) != null ? _p : "y";
+    const columnField = (_q = spec.data.column) != null ? _q : "x";
+    const rowField = (_r = spec.data.row) != null ? _r : "y";
     const aggSize = 16;
     for (let i = 0; i < numericValues.length / aggSize; i++) {
       const aggLen = Math.sqrt(aggSize);
@@ -28593,14 +29422,18 @@ const _GoslingTrackClass = class _GoslingTrackClass extends TiledPixiTrack {
     }
     tiles.forEach((tile) => __privateMethod(this, _generateTabularData, generateTabularData_fn).call(this, tile, force));
     this.combineAllTilesIfNeeded();
-    const models = tiles.flatMap((tile) => this.transformDataAndCreateModels(tile));
-    shareScaleAcrossTracks(models);
-    const flatTileData = [].concat(...models.map((d) => d.data()));
-    if (flatTileData.length !== 0) {
-      publish("rawData", { id: this.options.id, data: flatTileData });
-    }
-    tiles.forEach((tile) => {
-      __privateGet(this, _processedTileMap).set(tile, true);
+    Promise.all(tiles.flatMap((tile) => this.transformDataAndCreateModels(tile))).then((n) => {
+      const models = n.flat();
+      shareScaleAcrossTracks(models);
+      const flatTileData = [].concat(...models.map((d) => d.data()));
+      if (flatTileData.length !== 0) {
+        publish("rawData", { id: this.options.id, data: flatTileData });
+      }
+      tiles.forEach((tile) => {
+        __privateGet(this, _processedTileMap).set(tile, true);
+      });
+      this.draw();
+      this.forceDraw();
     });
   }
   /**
@@ -28858,50 +29691,24 @@ const _GoslingTrackClass = class _GoslingTrackClass extends TiledPixiTrack {
   /**
    * Apply data transformation to each of the overlaid tracks and generate GoslingTrackModels.
    */
-  transformDataAndCreateModels(tile) {
+  async transformDataAndCreateModels(tile) {
+    var _a;
     const tileInfo = __privateGet(this, _processedTileInfo)[tile.tileId];
     if (!tileInfo || tileInfo.skipRendering) {
       return [];
     }
     tileInfo.goslingModels = [];
     const resolvedTracks = this.getResolvedTracks();
-    resolvedTracks.forEach((resolvedSpec) => {
-      var _a;
+    for (const resolvedSpec of resolvedTracks) {
       let tabularDataTransformed = Array.from(tileInfo.tabularData);
-      (_a = resolvedSpec.dataTransform) == null ? void 0 : _a.forEach((t) => {
-        switch (t.type) {
-          case "filter":
-            tabularDataTransformed = filterData(t, tabularDataTransformed);
-            break;
-          case "concat":
-            tabularDataTransformed = concatString(t, tabularDataTransformed);
-            break;
-          case "replace":
-            tabularDataTransformed = replaceString(t, tabularDataTransformed);
-            break;
-          case "log":
-            tabularDataTransformed = calculateData(t, tabularDataTransformed);
-            break;
-          case "exonSplit":
-            tabularDataTransformed = splitExon(t, tabularDataTransformed, resolvedSpec.assembly);
-            break;
-          case "genomicLength":
-            tabularDataTransformed = calculateGenomicLength(t, tabularDataTransformed);
-            break;
-          case "svType":
-            tabularDataTransformed = inferSvType(t, tabularDataTransformed);
-            break;
-          case "coverage":
-            tabularDataTransformed = aggregateCoverage(t, tabularDataTransformed, this._xScale.copy());
-            break;
-          case "subjson":
-            tabularDataTransformed = parseSubJSON(t, tabularDataTransformed);
-            break;
-          case "displace":
-            tabularDataTransformed = displace(t, tabularDataTransformed, this._xScale.copy());
-            break;
-        }
-      });
+      for (const t of (_a = resolvedSpec.dataTransform) != null ? _a : []) {
+        tabularDataTransformed = await transform(
+          t,
+          tabularDataTransformed,
+          this.xScale().copy(),
+          resolvedSpec.assembly
+        );
+      }
       try {
         if (PubSub) {
           const NUM_OF_ROWS_IN_PREVIEW = 100;
@@ -28929,7 +29736,7 @@ const _GoslingTrackClass = class _GoslingTrackClass extends TiledPixiTrack {
       resolvedSpec.height = h;
       const model = new GoslingTrackModel(resolvedSpec, tabularDataTransformed, this.options.theme);
       tileInfo.goslingModels.push(model);
-    });
+    }
     return tileInfo.goslingModels;
   }
   /* *
@@ -29634,9 +30441,9 @@ function panZoomHeatmap(plot, xDomain, yDomain) {
   const baseXScale = scaleLinear().range([0, width]);
   const baseYScale = scaleLinear().range([0, height]);
   const zoomed = (event) => {
-    const { transform } = event;
-    const newXDomain = transform.rescaleX(zoomStartXScale).domain();
-    const newYDomain = transform.rescaleY(zoomStartYScale).domain();
+    const { transform: transform2 } = event;
+    const newXDomain = transform2.rescaleX(zoomStartXScale).domain();
+    const newYDomain = transform2.rescaleY(zoomStartYScale).domain();
     batch(() => {
       xDomain.value = newXDomain;
       yDomain.value = newYDomain;
@@ -29737,9 +30544,9 @@ function panZoomCircular(plot, cursorPos, xDomain) {
   let zoomStartPos = 0;
   let panStartDomain = [0, 0];
   const zoomed = (event) => {
-    const { transform, sourceEvent } = event;
+    const { transform: transform2, sourceEvent } = event;
     if (sourceEvent && sourceEvent.type === "wheel") {
-      const newXDomain = transform.rescaleX(zoomStartScaleX).domain();
+      const newXDomain = transform2.rescaleX(zoomStartScaleX).domain();
       const newDomain = newXDomain[1] - newXDomain[0];
       const originalDomain = zoomStartScaleX.domain()[1] - zoomStartScaleX.domain()[0];
       const mouseRelativePos = (zoomStartPos - zoomStartScaleX.domain()[0]) / originalDomain;
@@ -29783,10 +30590,11 @@ function panZoomCircular(plot, cursorPos, xDomain) {
   select(plot.domOverlay).call(zoomBehavior);
 }
 function getDataFetcher(spec, urlToFetchOptions) {
+  var _a;
   const { data, assembly = "hg38" } = spec;
   if (typeof data === "undefined") {
     console.warn("No data in the track spec", spec);
-    return;
+    return new JsonDataFetcherClass({ type: "json", values: [], assembly: (_a = spec.assembly) != null ? _a : "unknown" });
   }
   const { type } = data;
   const urlFetchOptions = "url" in data && (urlToFetchOptions == null ? void 0 : urlToFetchOptions[data.url]) || {};
@@ -29837,6 +30645,265 @@ function getFields(spec) {
   }
   return fields;
 }
+const ERROR_COLOR = "#ff00ff";
+async function transformObjectToArrow(t, options) {
+  var _a, _b, _c;
+  let tabularData = (_a = t["0.0"].tabularData) != null ? _a : getTabularData(options.spec, t["0.0"]);
+  tabularData = structuredClone(tabularData);
+  for (const t2 of (_b = options.spec.dataTransform) != null ? _b : []) {
+    tabularData = await transform(t2, tabularData, void 0, options.spec.assembly);
+  }
+  const xArr = [];
+  const yArr = [];
+  const zArr = [];
+  const chrArr = [];
+  const coordArr = [];
+  const parseAsNumber = (e) => {
+    if (typeof e === "string") {
+      return parseFloat(e);
+    }
+    return e;
+  };
+  assert(options.processedSpec.spatial, "ProcessedSpatilTrack is missing the definition for spatial coordinates.");
+  const spatialMapping = options.processedSpec.spatial;
+  const fieldForSpatialX = spatialMapping.x;
+  const fieldForSpatialY = spatialMapping.y;
+  const fieldForSpatialZ = spatialMapping.z;
+  const fieldForSpatialChr = spatialMapping.chr;
+  const fieldForSpatialCoord = spatialMapping.coord;
+  for (const [i] of tabularData.entries()) {
+    xArr.push(parseAsNumber(tabularData[i][fieldForSpatialX]));
+    yArr.push(parseAsNumber(tabularData[i][fieldForSpatialY]));
+    zArr.push(parseAsNumber(tabularData[i][fieldForSpatialZ]));
+    chrArr.push(tabularData[i][fieldForSpatialChr]);
+    coordArr.push(parseAsNumber(tabularData[i][fieldForSpatialCoord]));
+  }
+  let arrays = {
+    x: xArr,
+    y: yArr,
+    z: zArr,
+    chr: chrArr,
+    coord: coordArr
+  };
+  const allFields = Object.keys((_c = tabularData[0]) != null ? _c : {});
+  const alreadyAddedFields = [
+    fieldForSpatialX,
+    fieldForSpatialY,
+    fieldForSpatialZ,
+    fieldForSpatialChr,
+    fieldForSpatialCoord
+  ];
+  const additionalFields = [];
+  for (const c of allFields) {
+    if (alreadyAddedFields.indexOf(c) === -1) {
+      additionalFields.push(c);
+    }
+  }
+  const suppArray = {};
+  for (const d of tabularData) {
+    for (const f of additionalFields) {
+      if (!suppArray[f]) {
+        suppArray[f] = [];
+      }
+      suppArray[f].push(Number.isNaN(+d[f]) ? d[f] : parseAsNumber(d[f]));
+    }
+  }
+  arrays = { ...suppArray, ...arrays };
+  const table = tableFromArrays(arrays);
+  const buffer = tableToIPC(table, { format: "file" });
+  return buffer;
+}
+function fetchValuesFromColumn(columnName, arrowIpc) {
+  const table = tableFromIPC(arrowIpc);
+  const column = table.getChild(columnName);
+  const t = column.type;
+  if (t.typeId === Type.Int || t.typeId === Type.Float) {
+    return column.toArray();
+  } else if (t.typeId === Type.Dictionary || t.typeId === Type.Utf8) {
+    return column.toArray();
+  }
+  return void 0;
+}
+function findMinAndMaxOfColumn(column) {
+  let minVal = Infinity;
+  let maxVal = -Infinity;
+  for (const v of column) {
+    minVal = Math.min(minVal, v);
+    maxVal = Math.max(maxVal, v);
+  }
+  return [minVal, maxVal];
+}
+function getRange(size) {
+  if (size.range) {
+    return [size.range[0], size.range[1]];
+  } else {
+    return [0.01, 1e-3];
+  }
+}
+const randomColors = (n) => {
+  const colors = [];
+  for (let j = 0; j < n; j++) {
+    let colorStr = "#";
+    for (let i = 0; i < 6; i++) {
+      const maxNum = 16;
+      const randNum = Math.floor(Math.random() * maxNum);
+      colorStr += randNum.toString(16);
+    }
+    colors.push(colorStr);
+  }
+  return colors;
+};
+function handleColorField(arrowIpc, color2) {
+  var _a, _b;
+  if (color2 === void 0) {
+    return "red";
+  } else if (typeof color2 === "string") {
+    return color2;
+  } else if ("value" in color2) {
+    return color2.value;
+  } else if ("field" in color2) {
+    if (!color2.type) {
+      color2.type = "nominal";
+    }
+    if (color2.type === "nominal") {
+      assert(color2.field, "color.field is required for nominal color");
+      const values = fetchValuesFromColumn(color2.field, arrowIpc);
+      const colScale = (_a = color2.range) != null ? _a : randomColors(50);
+      assert(
+        typeof colScale === "string" || Array.isArray(colScale) && colScale.every((it) => typeof it === "string"),
+        "color.range must be a string or an array of strings"
+      );
+      const colorConfig = {
+        values: [...values],
+        min: 0,
+        max: values.length - 1,
+        colorScale: colScale
+      };
+      return colorConfig;
+    } else if (color2.type === "quantitative") {
+      assert(color2.field, "color.field is required for quantitative color");
+      const values = fetchValuesFromColumn(color2.field, arrowIpc);
+      assert(values, "color.field must be a valid field in the data table");
+      assert(
+        values.every((it) => typeof it === "number"),
+        "color.field must be a numeric field"
+      );
+      const [minVal, maxVal] = color2.domain ? [color2.domain[0], color2.domain[1]] : findMinAndMaxOfColumn(values);
+      const colScale = (_b = color2.range) != null ? _b : "viridis";
+      assert(
+        typeof colScale === "string" || Array.isArray(colScale) && colScale.every((it) => typeof it === "string"),
+        "color.range must be a string or an array of strings"
+      );
+      const colorConfig = {
+        values: [...values],
+        min: Number(minVal),
+        max: Number(maxVal),
+        colorScale: colScale
+      };
+      return colorConfig;
+    } else {
+      return ERROR_COLOR;
+    }
+  } else {
+    return ERROR_COLOR;
+  }
+}
+function handleSizeField(arrowIpc, size) {
+  if (size === void 0) {
+    return 0.01;
+  } else if (typeof size === "number") {
+    return size;
+  } else if ("value" in size) {
+    return size.value;
+  } else if ("field" in size) {
+    if (!size.type) {
+      size.type = "quantitative";
+    }
+    if (size.type === "nominal") {
+      console.warn("not implemented!");
+    } else if (size.type === "quantitative") {
+      assert(size.field, "size.field is required for quantitative size");
+      const values = fetchValuesFromColumn(size.field, arrowIpc);
+      const [rangeMax, rangeMin] = getRange(size);
+      assert(values, "size.field must be a valid field in the data table");
+      assert(
+        values.every((it) => typeof it === "number"),
+        "size.field must be a numeric field"
+      );
+      const [minVal, maxVal] = findMinAndMaxOfColumn(values);
+      const sizeConfig = {
+        values: [...values],
+        min: minVal,
+        max: maxVal,
+        scaleMin: rangeMin,
+        scaleMax: rangeMax
+      };
+      return sizeConfig;
+    } else {
+      return 0.01;
+    }
+  }
+  return 0.01;
+}
+function createSpatialTrack(options, dataFetcher, container) {
+  dataFetcher.tilesetInfo((info) => {
+    dataFetcher.fetchTilesDebounced(
+      async (t) => {
+        var _a;
+        if (!t["0.0"].tileWidth) {
+          t["0.0"].tileWidth = info.max_width;
+        }
+        const ipcBuffer = await transformObjectToArrow(t, options);
+        if (!ipcBuffer) {
+          console.error("could not tranform into Apache Arrow");
+          return;
+        }
+        let chromatinScene = uchi.initScene();
+        let tracks = [];
+        if ("_overlay" in options.spec) {
+          tracks = options.spec._overlay;
+        } else {
+          tracks = [options.spec];
+        }
+        for (const ov of tracks) {
+          const color2 = handleColorField(ipcBuffer, ov.color);
+          const scale = handleSizeField(ipcBuffer, ov.size);
+          if (!ov.mark) {
+            ov.mark = "sphere";
+          }
+          assert(
+            ov.mark === "sphere" || ov.mark === "octahedron" || ov.mark === "box",
+            "Unsupported mark type for spatial view"
+          );
+          const viewConfig = {
+            scale,
+            color: color2,
+            mark: ov.mark
+          };
+          let s = uchi.load(ipcBuffer.slice().buffer, { center: true, normalize: true });
+          const filterTransform = ((_a = ov.dataTransform) != null ? _a : []).find((t2) => t2.type === "filter");
+          if (filterTransform) {
+            const field = filterTransform.field;
+            assert(field === "chr", "Field for transform should be 'chr'");
+            assert("oneOf" in filterTransform, "oneOf is required for this filter transform");
+            const oneOf = filterTransform.oneOf;
+            const first = oneOf[0];
+            assert(typeof first === "string", "only string is supported for chromosome filtering");
+            const res = await uchi.selectChromosome(s.data, first);
+            console.warn(`selectChromosome result: res.numRows = ${res.numRows}`);
+            if (res) {
+              s = { data: res, name: `Filtered structure (${oneOf})` };
+            }
+          }
+          chromatinScene = uchi.addStructureToScene(chromatinScene, s, viewConfig);
+        }
+        const [, createdCanvas] = uchi.display(chromatinScene, { alwaysRedraw: false, withHUD: false });
+        container.appendChild(createdCanvas);
+      },
+      ["0.0"]
+    );
+  });
+}
 function renderTrackDefs(trackDefs, linkedEncodings, pixiManager, urlToFetchOptions) {
   const plotDict = {};
   const cursorPosX = signal(Number.NEGATIVE_INFINITY);
@@ -29952,6 +31019,18 @@ function renderTrackDefs(trackDefs, linkedEncodings, pixiManager, urlToFetchOpti
       const dummyPlot = new DummyTrack(dummyOptions, pixiManager.makeContainer(boundingBox).overlayDiv);
       plotDict[trackId] = dummyPlot;
     }
+    if (type === TrackType.Spatial) {
+      const container = pixiManager.makeContainer(boundingBox).overlayDiv;
+      const spatialTrackOptions = options;
+      console.warn("!@$!#%@# detected spatial track !@#$!#%@#");
+      if (spatialTrackOptions.spec.data) {
+        if ("sampleLength" in spatialTrackOptions.spec.data) {
+          spatialTrackOptions.spec.data.sampleLength = 3e4;
+        }
+      }
+      const datafetcher = getDataFetcher(spatialTrackOptions.spec, urlToFetchOptions);
+      createSpatialTrack(spatialTrackOptions, datafetcher, container);
+    }
   });
   return plotDict;
 }