feat: density example (#1145)

Author: dvdkouril

editor/example/index.ts

@@ -440,6 +440,12 @@ export const editorExampleObj: {
         spec: JsonExampleSpecs.EX_SPEC_SPATIAL_COLOR,
         image: THUMBNAILS.SPATIAL_COLOR,
     },
+    SPATIAL_LAYOUT_DENSITY: {
+        group: 'Spatial Layout',
+        name: 'Density',
+        spec: JsonExampleSpecs.EX_SPEC_SPATIAL_DENSITY,
+        image: THUMBNAILS.SPATIAL_DENSITY,
+    },
     SPATIAL_LAYOUT_3D_YEAST_MODEL: {
         group: 'Spatial Layout',
         name: '3D Yeast Model (Nature 2010)',

editor/example/json-spec/index.ts

@@ -26,7 +26,7 @@ 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 } from './spatial-layout';
+import { EX_SPEC_SPATIAL_MINIMAL, EX_SPEC_SPATIAL_MULTIPLE_TRACKS, EX_SPEC_SPATIAL_COLOR, EX_SPEC_SPATIAL_DENSITY } from './spatial-layout';
 import { EX_SPEC_3D_YEAST_MODEL } from './3d-yeast-model';
 
 export const JsonExampleSpecs = {
@@ -66,4 +66,5 @@ export const JsonExampleSpecs = {
     EX_SPEC_SPATIAL_MULTIPLE_TRACKS,
     EX_SPEC_3D_YEAST_MODEL,
     EX_SPEC_SPATIAL_COLOR,
+    EX_SPEC_SPATIAL_DENSITY,
 };

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

@@ -98,6 +98,63 @@ export const EX_SPEC_SPATIAL_COLOR: GoslingSpec = {
     ]
 };
 
+export const EX_SPEC_SPATIAL_DENSITY: GoslingSpec = {
+    title: 'Density',
+    subtitle: '',
+    arrangement: "horizontal",
+    views: [
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/stevens-2017/densities/Stevens-2017_GSM2219498_Cell_2_model_7_with-densities_r05.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            tracks: [
+                {
+                    color: {
+                        field: "densityVals",
+                        type: "quantitative",
+                    },
+                    width: 500,
+                    height: 500
+                }
+            ]
+        },
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/stevens-2017/densities/Stevens-2017_GSM2219498_Cell_2_model_7_with-densities_r05.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            tracks: [
+                {
+                    color: {
+                        field: "densityVals",
+                        type: "quantitative",
+                    },
+                    size: {
+                        field: "densityVals",
+                        type: "quantitative",
+                        range: [0.03, 0.002],
+                    },
+                    width: 500,
+                    height: 500
+                }
+            ]
+        },
+    ]
+};
+
 export const EX_SPEC_SPATIAL_MULTIPLE_TRACKS: GoslingSpec = {
     title: 'Spatial Layout: multiple tracks in one view',
     views: [

editor/example/thumbnails.ts

@@ -33,6 +33,7 @@ import ISLANDVIEWER from './thumbnails/ISLANDVIEWER.png';
 import SPATIAL_MINIMAL from './thumbnails/SPATIAL_MINIMAL.png';
 import SPATIAL_YEAST from './thumbnails/SPATIAL_YEAST.png';
 import SPATIAL_COLOR from './thumbnails/SPATIAL_COLOR.png';
+import SPATIAL_DENSITY from './thumbnails/SPATIAL_DENSITY.png';
 
 export const THUMBNAILS = {
     ALIGNMENT,
@@ -70,4 +71,5 @@ export const THUMBNAILS = {
     SPATIAL_MINIMAL,
     SPATIAL_YEAST,
     SPATIAL_COLOR,
+    SPATIAL_DENSITY,
 };