feat(editor): add example using models from Tan 2018 (#1148)

Author: dvdkouril

editor/example/index.ts

@@ -446,19 +446,25 @@ export const editorExampleObj: {
         spec: JsonExampleSpecs.EX_SPEC_SPATIAL_DENSITY,
         image: THUMBNAILS.SPATIAL_DENSITY,
     },
+    SPATIAL_LAYOUT_SUPERIMP: {
+        group: 'Spatial Layout',
+        name: 'Multiple tracks',
+        spec: JsonExampleSpecs.EX_SPEC_SPATIAL_MULTIPLE_TRACKS,
+        image: THUMBNAILS.SPATIAL_MULTIPLE_TRACKS
+    },
+    SPATIAL_LAYOUT_TAN_COMP: {
+        group: 'Spatial Layout',
+        name: 'Human Cell Model (Tan et al., Science 2018): Comparison',
+        spec: JsonExampleSpecs.EX_SPEC_SPATIAL_TAN_COMP,
+        image: THUMBNAILS.SPATIAL_TAN,
+    },
     SPATIAL_LAYOUT_3D_YEAST_MODEL: {
         group: 'Spatial Layout',
         name: '3D Yeast Model (Nature 2010)',
         spec: JsonExampleSpecs.EX_SPEC_3D_YEAST_MODEL,
         image: THUMBNAILS.SPATIAL_YEAST,
         forceShow: true
     },
-    SPATIAL_LAYOUT_SUPERIMP: {
-        group: 'Spatial Layout',
-        name: 'Multiple tracks',
-        spec: JsonExampleSpecs.EX_SPEC_SPATIAL_MULTIPLE_TRACKS,
-        image: THUMBNAILS.SPATIAL_MULTIPLE_TRACKS
-    },
     CORCES_ET_AL: {
         group: 'Coordinated Multiple Views',
         name: 'Corces et al. 2020',

editor/example/json-spec/index.ts

@@ -26,7 +26,10 @@ import { EX_SPEC_TEMPLATE } from './track-template';
 import { EX_SPEC_MOUSE_EVENT } from './mouse-event';
 import { EX_SPEC_PERF_ALIGNMENT } from './perf-alignment';
 import { EX_SPEC_DEBUG } from './debug';
-import { EX_SPEC_SPATIAL_MINIMAL, EX_SPEC_SPATIAL_MULTIPLE_TRACKS, EX_SPEC_SPATIAL_COLOR, EX_SPEC_SPATIAL_DENSITY } from './spatial-layout';
+import {
+    EX_SPEC_SPATIAL_MINIMAL, EX_SPEC_SPATIAL_MULTIPLE_TRACKS, EX_SPEC_SPATIAL_COLOR, EX_SPEC_SPATIAL_DENSITY,
+    EX_SPEC_SPATIAL_TAN_COMP
+} from './spatial-layout';
 import { EX_SPEC_3D_YEAST_MODEL } from './3d-yeast-model';
 
 export const JsonExampleSpecs = {
@@ -67,4 +70,5 @@ export const JsonExampleSpecs = {
     EX_SPEC_3D_YEAST_MODEL,
     EX_SPEC_SPATIAL_COLOR,
     EX_SPEC_SPATIAL_DENSITY,
+    EX_SPEC_SPATIAL_TAN_COMP,
 };

editor/example/json-spec/spatial-layout.ts

@@ -215,6 +215,96 @@ export const EX_SPEC_SPATIAL_MULTIPLE_TRACKS: GoslingSpec = {
     ]
 };
 
+
+export const EX_SPEC_SPATIAL_TAN_COMP: GoslingSpec = {
+    title: 'Tan 2018 (Science) comparison',
+    arrangement: "horizontal",
+    views: [
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/tan-2018/Tan-2018_GSM3271347_gm12878_01.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            width: 500,
+            height: 500,
+            alignment: "overlay",
+            tracks: [
+                {
+                    color: {
+                        value: 'gainsboro'
+                    },
+                    size: {
+                        value: 0.005,
+                    },
+                    mark: 'sphere',
+                },
+                {
+                    color: {
+                        value: 'darkslateblue'
+                    },
+                    size: {
+                        value: 0.02,
+                    },
+                    mark: 'box',
+                    dataTransform: [{
+                        type: "filter",
+                        field: "chr",
+                        oneOf: ["1(pat)"],
+                    }],
+                },
+
+            ]
+        },
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/tan-2018/Tan-2018_GSM3271348_gm12878_02.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            width: 500,
+            height: 500,
+            alignment: "overlay",
+            tracks: [
+                {
+                    color: {
+                        value: 'gainsboro'
+                    },
+                    size: {
+                        value: 0.005,
+                    },
+                    mark: 'sphere',
+                },
+                {
+                    color: {
+                        value: 'darkslateblue'
+                    },
+                    size: {
+                        value: 0.02,
+                    },
+                    mark: 'box',
+                    dataTransform: [{
+                        type: "filter",
+                        field: "chr",
+                        oneOf: ["1(pat)"],
+                    }],
+                },
+
+            ]
+        }
+    ]
+};
+
 export const EX_SPEC_SPATIAL_SUPERIMPOSITION: GoslingSpec = {
     title: 'Spatial Layout: superimposition',
     views: [

editor/example/thumbnails.ts

@@ -35,6 +35,7 @@ import SPATIAL_YEAST from './thumbnails/SPATIAL_YEAST.png';
 import SPATIAL_COLOR from './thumbnails/SPATIAL_COLOR.png';
 import SPATIAL_DENSITY from './thumbnails/SPATIAL_DENSITY.png';
 import SPATIAL_MULTIPLE_TRACKS from './thumbnails/SPATIAL_MULTIPLE_TRACKS.png';
+import SPATIAL_TAN from './thumbnails/SPATIAL_TAN.png';
 
 export const THUMBNAILS = {
     ALIGNMENT,
@@ -74,4 +75,5 @@ export const THUMBNAILS = {
     SPATIAL_COLOR,
     SPATIAL_DENSITY,
     SPATIAL_MULTIPLE_TRACKS,
+    SPATIAL_TAN,
 };