Use the trigger field from track api payload to pass messages to geno…

…me browser (#1019)

package.json

@@ -30,7 +30,7 @@
     "coverage": "jest --coverage"
   },
   "dependencies": {
-    "@ensembl/ensembl-genome-browser": "0.6.6",
+    "@ensembl/ensembl-genome-browser": "0.6.7",
     "@react-spring/web": "9.7.3",
     "@reduxjs/toolkit": "1.9.5",
     "@sentry/browser": "7.66.0",

src/content/app/genome-browser/hooks/useGenomeBrowser.ts

@@ -28,19 +28,35 @@ import { GenomeBrowserContext } from 'src/content/app/genome-browser/contexts/Ge
 
 import { useAppSelector } from 'src/store';
 import { getBrowserActiveGenomeId } from 'src/content/app/genome-browser/state/browser-general/browserGeneralSelectors';
+import { useGenomeTracksQuery } from 'src/content/app/genome-browser/state/api/genomeBrowserApiSlice';
 
 import type { ChrLocation } from 'src/content/app/genome-browser/state/browser-general/browserGeneralSlice';
+import type { GenomeTrackCategory } from 'src/content/app/genome-browser/state/types/tracks';
 
-const useGenomeBrowser = () => {
-  const activeGenomeId = useAppSelector(getBrowserActiveGenomeId);
+const useMandatoryGenomeBrowserContext = () => {
   const genomeBrowserContext = useContext(GenomeBrowserContext);
-
   if (!genomeBrowserContext) {
     throw new Error(
       'useGenomeBrowser must be used with GenomeBrowserContext Provider'
     );
   }
 
+  return genomeBrowserContext;
+};
+
+const useGenomeBrowser = () => {
+  const genomeBrowserContext = useMandatoryGenomeBrowserContext();
+  const activeGenomeId = useAppSelector(getBrowserActiveGenomeId);
+
+  const { currentData: trackCategories } = useGenomeTracksQuery(
+    activeGenomeId ?? '',
+    {
+      skip: !activeGenomeId
+    }
+  );
+
+  const trackIdToPathMap = getTrackIdToTrackPathMap(trackCategories ?? []);
+
   const {
     genomeBrowser,
     genomeBrowserService,
@@ -130,10 +146,11 @@ const useGenomeBrowser = () => {
       return;
     }
     const { trackId, isEnabled } = params;
+    const trackPath = trackIdToPathMap[trackId] ?? ['track', trackId];
 
     genomeBrowserCommands.toggleTrack({
       genomeBrowser,
-      trackId,
+      trackPath,
       isEnabled
     });
   };
@@ -147,11 +164,14 @@ const useGenomeBrowser = () => {
     if (!genomeBrowser) {
       return;
     }
+    const { trackId, setting, isEnabled } = params;
+    const trackPath = trackIdToPathMap[trackId] ?? ['track', trackId];
+
     genomeBrowserCommands.toggleTrackSetting({
       genomeBrowser,
-      trackId: params.trackId,
-      setting: params.setting,
-      isEnabled: params.isEnabled
+      trackPath,
+      setting,
+      isEnabled
     });
   };
 
@@ -183,4 +203,13 @@ const useGenomeBrowser = () => {
   };
 };
 
+const getTrackIdToTrackPathMap = (trackCategories: GenomeTrackCategory[]) => {
+  const tracks = trackCategories.flatMap(({ track_list }) => track_list);
+
+  return tracks.reduce((accumulator, track) => {
+    accumulator[track.track_id] = track.trigger;
+    return accumulator;
+  }, {} as Record<string, string[]>);
+};
+
 export default useGenomeBrowser;

src/content/app/genome-browser/hooks/useGenomeBrowserTracks.ts

@@ -181,13 +181,17 @@ const prepareTrackSettings = ({
 
   trackCategories.forEach((category) => {
     category.track_list.forEach((track) => {
-      const { track_id } = track;
+      const { track_id, on_by_default } = track;
       const trackType = getTrackType(track_id);
 
       if (trackType === TrackType.GENE) {
-        defaultTrackSettings[track_id] = buildDefaultGeneTrack(track_id);
+        const trackSettings = buildDefaultGeneTrack(track_id);
+        trackSettings.settings.isVisible = on_by_default;
+        defaultTrackSettings[track_id] = trackSettings;
       } else {
-        defaultTrackSettings[track_id] = buildDefaultRegularTrack(track_id);
+        const trackSettings = buildDefaultRegularTrack(track_id);
+        trackSettings.settings.isVisible = on_by_default;
+        defaultTrackSettings[track_id] = trackSettings;
       }
     });
   });

src/content/app/genome-browser/hooks/useGenomicTracks.ts

@@ -101,10 +101,11 @@ const prepareTrackIdsList = (
 ): TrackIdsList => {
   const trackIdsList = trackGroups
     .flatMap(({ track_list }) => track_list)
-    .map(({ track_id }) => {
+    .map(({ track_id, on_by_default }) => {
       const track = trackSettings[track_id];
       const isVisibleTrack =
-        (track?.settings as { isVisible?: boolean })?.isVisible ?? true;
+        (track?.settings as { isVisible?: boolean })?.isVisible ??
+        on_by_default;
       return {
         trackId: track_id,
         isEnabled: isVisibleTrack

src/content/app/genome-browser/services/genome-browser-service/genomeBrowserCommands.ts

@@ -59,26 +59,26 @@ export const setBrowserLocation = (payload: {
 
 export const toggleTrack = (payload: {
   genomeBrowser: EnsemblGenomeBrowser;
-  trackId: string;
+  trackPath: string[];
   isEnabled: boolean;
 }) => {
-  const { genomeBrowser, trackId, isEnabled } = payload;
-  genomeBrowser.switch(['track', trackId], isEnabled);
+  const { genomeBrowser, trackPath, isEnabled } = payload;
+  genomeBrowser.switch(trackPath, isEnabled);
 };
 
 // NOTE: this method can only handle boolean flags
 export const toggleTrackSetting = (payload: {
   genomeBrowser: EnsemblGenomeBrowser;
-  trackId: string;
+  trackPath: string[];
   setting: string;
   isEnabled: boolean;
 }) => {
-  const { genomeBrowser, trackId, setting, isEnabled } = payload;
+  const { genomeBrowser, trackPath, setting, isEnabled } = payload;
 
-  if (trackId === 'focus-variant') {
+  if (trackPath.includes('focus-variant')) {
     toggleFocusVariantTrackSetting(payload);
   } else {
-    genomeBrowser.switch(['track', trackId, setting], isEnabled);
+    genomeBrowser.switch([...trackPath, setting], isEnabled);
   }
 };
 

src/content/app/genome-browser/state/track-settings/trackSettingsSlice.ts

@@ -104,29 +104,6 @@ export const defaultTrackSettingsForGenome: TrackSettingsForGenome = {
   settingsForIndividualTracks: {}
 };
 
-export const saveTrackSettingsForGenome = createAsyncThunk(
-  'genome-browser-track-settings/save-track-settings-for-genome',
-  async (genomeId: string, thunkAPI) => {
-    const state = thunkAPI.getState() as RootState;
-    const trackSettingsForGenome = getAllTrackSettingsForGenome(
-      state,
-      genomeId
-    );
-    if (!trackSettingsForGenome) {
-      return; // shouldn't happen
-    }
-
-    const trackSettingsArray = Object.values(
-      trackSettingsForGenome.settingsForIndividualTracks
-    );
-
-    await trackSettingsStorageService.updateTrackSettingsForGenome(
-      genomeId,
-      trackSettingsArray
-    );
-  }
-);
-
 export const updateTrackSettingsAndSave = createAsyncThunk(
   'genome-browser-track-settings/update-track-settings-and-save',
   async (

src/content/app/genome-browser/state/types/tracks.ts

@@ -16,12 +16,36 @@
 
 import { TrackSet } from 'src/content/app/genome-browser/components/track-panel/trackPanelConfig';
 
+/**
+ * NOTE ON THE TRIGGER FIELD ON THE GenomicTrack TYPE
+ *
+ * Tracks are stored in genome browser's memory in a tree-like structure,
+ * and a trigger is an array that represents the path to a given track node.
+ * Sadly, the client needs to be aware of this implementation detail,
+ * because it needs to use this trigger to toggle a track, or its settings
+ * (which are represented as tree nodes inside the track node) on and off.
+ *
+ * The contents of a trigger array for a given track are vaguely predictable,
+ * but not certain. For some tracks, the trigger to toggle the track on/off
+ * will be ["track", track_id]. For other tracks, it will be ["track", expansion_node, track_id].
+ * Since there is no way for the client to know which is which, it has
+ * to rely on track api to tell it.
+ *
+ * The content of trigger arrays for track settings is predictable,
+ * and consist of the contents of the track trigger followed by
+ * the name of the setting. Thus, triggers for settings can be generated
+ * on the client.
+ */
+
 export type GenomicTrack = {
-  colour: string; // NOTE: the backend will want to get rid of this field
-  label: string;
   track_id: string;
+  trigger: string[]; // <-- see the note about triggers above
+  label: string;
+  colour: string; // NOTE: the backend will want to get rid of this field
   additional_info: string;
   description: string;
+  on_by_default: boolean;
+  display_order: number;
   sources: Array<{
     name: string;
     url: string | null;

tests/fixtures/genomes.ts

@@ -46,10 +46,13 @@ export const createGenomeCategories = (): GenomeTrackCategory[] => [
 
 const createTrack = (): GenomicTrack => {
   return {
+    track_id: 'gene-pc-fwd',
+    trigger: ['track', 'gene-pc-fwd'],
     additional_info: faker.lorem.words(),
     colour: 'DARK_GREY',
     label: faker.lorem.words(),
-    track_id: 'gene-pc-fwd',
+    on_by_default: true,
+    display_order: 1,
     description: faker.lorem.sentence(),
     sources: [
       {