Configuring App Features¶

This page describes configuration for interactive App features. For the corresponding end-user workflows, see Analyzing Sample Collections.

Bookmarking¶

The GenomeSpy app can save visualization state, including scale domains and view visibilities, as bookmarks. Bookmarks are stored in the web browser's IndexedDB and are unique to the visualization's origin. Give each visualization a unique specId to enable local bookmarks:

{
  "specId": "My example visualization",

  "vconcat": { ... },
  ...
}

Pre-defined bookmarks and tours¶

Remote bookmarks are stored in a JSON file on a web server and appear in the bookmark menu. Enable tour to open the first bookmark automatically and let users navigate through the bookmark file.

{
  "bookmarks": {
    "remote": {
      "url": "tour.json",
      "tour": true
    }
  },

  "vconcat": { ... },
  ...
}

The remote object accepts the following properties:

url Required

Type: string

URL to the remote bookmark file.

initialBookmark

Type: string

Name of the bookmark that should be loaded as the initial state. The bookmark description dialog is shown only if the tour property is set to true.

tour

Type: boolean

Should the user be shown a tour of the remote bookmarks when the visualization is launched? If the initialBookmark property is not defined, the tour starts from the first bookmark.

Default value: false

afterTourBookmark

Type: string

Name of the bookmark that should be loaded when the user ends the tour. If null, the dialog will be closed and the current state is retained. If undefined, the default state without any performed actions will be loaded.

Bookmark files¶

A remote bookmark file is an array of bookmark objects. Create a bookmark in the app and choose Share from its submenu (:fontawesome-solid-ellipsis-vertical:) to copy it as a JSON object.

[
  {
    "name": "First bookmark",
    "actions": [ ... ],
    ...
  },
  {
    "name": "Second bookmark",
    "actions": [ ... ],
    ...
  }
]

Toggleable view visibility¶

GenomeSpy App can let users toggle visibility of nodes in the view hierarchy. The visibility state is included in shareable links and bookmarks.

Toggleable views need an explicit unique name. GenomeSpy uses the name to address visibility state in bookmarks and shared state.

Views have two properties for controlling visibility:

visible

Type: boolean

The default visibility of the view. An invisible view is removed from the layout and not rendered. For context, see toggleable view visibility.

Default: true

configurableVisibility

Type: boolean | AppVisibilityGroupSpec

Is the visibility configurable from the GenomeSpy App view visibility menu.

Configurability requires an explicit view name that is unique in its import scope.

Set to an object with group to make configurable views mutually exclusive in the menu (radio buttons) within the same import scope.

Default value: false for children of layer, true for others

Use object-form configurableVisibility to make views mutually exclusive in the menu. Views that share a group in the same import scope are radio buttons:

{
  "name": "rawCoverage",
  "configurableVisibility": { "group": "coverageMode" },
  ...
}

Actions¶

The app provides context-menu actions for sorting, filtering, grouping, and other sample-collection operations. See Analyzing Sample Collections for the available actions and how users access them.

Actions also require each view to have an explicit unique name. GenomeSpy uses the name to address a view in action definitions and to replay actions from bookmarks, shared state, and provenance history.

Search¶

The toolbar's location/search field can navigate to features in the data. Use the search channel on marks that represent searchable data objects.

search accepts a field definition or an array of field definitions. A datum matches when any configured field matches the entered term case-insensitively.

{
  ...,
  "mark": "rect",
  "encoding": {
    "search": { "field": "geneSymbol" },
    ...
  },
  ...
}

{
  ...,
  "mark": "rect",
  "encoding": {
    "search": [
      { "field": "geneSymbol" },
      { "field": "geneId" },
      { "field": "alias" }
    ],
    ...
  },
  ...
}