ability to set display mode for custom tracks

NishiPhalke · Sep 10, 2020 · 58f1b08 · 58f1b08
1 parent ba06449
commit 58f1b08
Show file tree

Hide file tree

Showing 24 changed files with 429 additions and 248 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -1,49 +1,31 @@
-name: Build App
-
-on:
-  create:
-    tags:
-      - v*
-
-# Environment variables available to all jobs and steps in this workflow
-env:
-  GKE_PROJECT: ${{ secrets.GKE_PROJECT }}
-  GKE_EMAIL: ${{ secrets.GKE_EMAIL }}
-  GITHUB_SHA: ${{ github.sha }}
-  DOCKER_IMAGE_NAME: umms-gb
-  REGISTRY_HOSTNAME: gcr.io
-
+name: CI
+on: [push]
 jobs:
-  setup-build-app:
-    name: build and push app
+  build:
     runs-on: ubuntu-latest
+
     steps:
+      - name: Begin CI...
+        uses: actions/checkout@v2
 
-    - name: Checkout
-      uses: actions/checkout@v2
+      - name: Use Node 12
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
 
-    # Setup gcloud CLI
-    - uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
-      with:
-        version: '270.0.0'
-        service_account_email: ${{ secrets.GKE_EMAIL }}
-        service_account_key: ${{ secrets.GKE_KEY }}
+      - name: Use cached node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            nodeModules-
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        env:
+          CI: true    
 
-    # Configure docker to use the gcloud command-line tool as a credential helper
-    - run: |
-        # Set up docker to authenticate
-        # via gcloud command-line tool.
-        gcloud auth configure-docker
-      
-    # Build the Docker image
-    - name: Build
-      run: |        
-        docker build -t "$REGISTRY_HOSTNAME"/"$GKE_PROJECT"/"$DOCKER_IMAGE_NAME":"${GITHUB_REF/refs\/tags\//}" \
-          --build-arg GITHUB_SHA="$GITHUB_SHA" \
-          --build-arg GITHUB_REF="$GITHUB_REF" .  
-    
-    - name: Push Docker Image
-      run: |
-          docker push "$REGISTRY_HOSTNAME"/"$GKE_PROJECT"/"$DOCKER_IMAGE_NAME":"${GITHUB_REF/refs\/tags\//}"
-    
-
+      - name: Build
+        run: yarn build
+        env:
+          CI: true
diff --git a/.github/workflows/buildimage.yml b/.github/workflows/buildimage.yml
@@ -0,0 +1,49 @@
+name: Build App
+
+on:
+  create:
+    tags:
+      - v*
+
+# Environment variables available to all jobs and steps in this workflow
+env:
+  GKE_PROJECT: ${{ secrets.GKE_PROJECT }}
+  GKE_EMAIL: ${{ secrets.GKE_EMAIL }}
+  GITHUB_SHA: ${{ github.sha }}
+  DOCKER_IMAGE_NAME: umms-gb
+  REGISTRY_HOSTNAME: gcr.io
+
+jobs:
+  setup-build-app:
+    name: build and push app
+    runs-on: ubuntu-latest
+    steps:
+
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    # Setup gcloud CLI
+    - uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
+      with:
+        version: '270.0.0'
+        service_account_email: ${{ secrets.GKE_EMAIL }}
+        service_account_key: ${{ secrets.GKE_KEY }}
+
+    # Configure docker to use the gcloud command-line tool as a credential helper
+    - run: |
+        # Set up docker to authenticate
+        # via gcloud command-line tool.
+        gcloud auth configure-docker
+      
+    # Build the Docker image
+    - name: Build
+      run: |        
+        docker build -t "$REGISTRY_HOSTNAME"/"$GKE_PROJECT"/"$DOCKER_IMAGE_NAME":"${GITHUB_REF/refs\/tags\//}" \
+          --build-arg GITHUB_SHA="$GITHUB_SHA" \
+          --build-arg GITHUB_REF="$GITHUB_REF" .  
+    
+    - name: Push Docker Image
+      run: |
+          docker push "$REGISTRY_HOSTNAME"/"$GKE_PROJECT"/"$DOCKER_IMAGE_NAME":"${GITHUB_REF/refs\/tags\//}"
+    
+
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^1.2.0",
     "typescript": "^3.9.7",
-    "umms-gb": "^2.0.17"
+    "umms-gb": "^2.0.18"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^4.2.4",

diff --git a/src/components/customtrack/addtrack.tsx b/src/components/customtrack/addtrack.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { AddTrackProps } from './types';
-import { Button, Modal, Message, Input, Radio } from 'semantic-ui-react';
+import { Button, Modal, Message, Input, Radio, Dropdown } from 'semantic-ui-react';
 import ColorPicker from './colorpicker';
 import { TEST_QUERY } from './queries';
 
 const AddTrack: React.FC<AddTrackProps> = (props) => {
     const [title, setTitle] = useState<string>('');
+    const [displayMode, setDisplayMode] = useState<string>();
     const [addBamTrack, setAddBamTrack] = useState<boolean>(false);
     const [url, setUrl] = useState<string>('');
     const [baiUrl, setBaiUrl] = useState<string>();
@@ -14,7 +15,7 @@ const AddTrack: React.FC<AddTrackProps> = (props) => {
     const [testing, setTesting] = useState<boolean>(false);
     const onAccept = () => {
         if (url.startsWith('gs://') || baiUrl) {
-            props.onAccept && props.onAccept([{ url, domain: props.domain, baiUrl, color, title }]);
+            props.onAccept && props.onAccept([{ url, domain: props.domain, baiUrl, displayMode, color, title }]);
             return;
         }
         setTesting(true);
@@ -38,7 +39,7 @@ const AddTrack: React.FC<AddTrackProps> = (props) => {
             .then(() => {
                 setError('');
                 setTesting(false);
-                props.onAccept && props.onAccept([{ url, domain: props.domain, color, title }]);
+                props.onAccept && props.onAccept([{ url, domain: props.domain, displayMode, color, title }]);
             })
             .catch((e) => {
                 setError(url);
@@ -62,6 +63,7 @@ const AddTrack: React.FC<AddTrackProps> = (props) => {
                                     </Message>
                                 )}
                                 <Radio
+                                    checked={addBamTrack}
                                     label={'Add Bam Track'}
                                     onChange={(_, data) => {
                                         let val = data.checked as boolean;
@@ -87,6 +89,21 @@ const AddTrack: React.FC<AddTrackProps> = (props) => {
                                         <br />
                                     </>
                                 )}
+                                <strong>Display Mode:</strong>&nbsp;
+                                <Dropdown
+                                    placeholder="Select Display Mode"
+                                    selection
+                                    onChange={(_, data) => {
+                                        setDisplayMode(data.value as string);
+                                    }}
+                                    options={[
+                                        { key: 'dense', text: 'dense', value: 'dense' },
+                                        { key: 'squish', text: 'squish', value: 'squish' },
+                                        { key: 'full', text: 'full', value: 'full' },
+                                    ]}
+                                />
+                                <br />
+                                <br />
                                 <ColorPicker color={color} onChangeComplete={(color) => setColor(color)} />
                                 <br />
                             </Modal.Description>

diff --git a/src/components/customtrack/customtrack.tsx b/src/components/customtrack/customtrack.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
-import { CustomTrackProps } from './types';
-import { WrappedTrack, WrappedFullBigWig, EmptyTrack, WrappedDenseBigBed } from 'umms-gb';
+import { CustomTrackProps, DEFAULT_BIGBED_DISPLAYMODE, DEFAULT_BIGWIG_DISPLAYMODE } from './types';
+import {
+    WrappedTrack,
+    WrappedFullBigWig,
+    EmptyTrack,
+    WrappedDenseBigBed,
+    WrappedSquishBigBed,
+    WrappedDenseBigWig,
+} from 'umms-gb';
 import { TrackType, deduceTrackType } from './deducetype';
 const CustomTrack: React.FC<CustomTrackProps> = (props) => {
     if (!props.data) {
@@ -10,9 +17,12 @@ const CustomTrack: React.FC<CustomTrackProps> = (props) => {
             </WrappedTrack>
         );
     }
-    switch (deduceTrackType(props.data)) {
+    const trackType = deduceTrackType(props.data);
+    const displayMode =
+        props.displayMode || (trackType === 'BIGBED' ? DEFAULT_BIGBED_DISPLAYMODE : DEFAULT_BIGWIG_DISPLAYMODE);
+    switch (trackType) {
         case TrackType.BIGBED:
-            return (
+            return displayMode === 'dense' ? (
                 <WrappedDenseBigBed
                     title={props.title}
                     width={props.width}
@@ -25,9 +35,36 @@ const CustomTrack: React.FC<CustomTrackProps> = (props) => {
                     titleSize={12}
                     trackMargin={12}
                 />
+            ) : (
+                <WrappedSquishBigBed
+                    title={props.title}
+                    width={props.width}
+                    height={props.height}
+                    rowHeight={10}
+                    transform={'translate (0,0)'}
+                    id={props.id}
+                    color={props.color}
+                    domain={props.domain}
+                    data={props.data}
+                    titleSize={12}
+                    trackMargin={12}
+                />
             );
         case TrackType.BIGWIG:
-            return (
+            return displayMode === 'dense' ? (
+                <WrappedDenseBigWig
+                    title={props.title}
+                    width={props.width}
+                    height={props.height}
+                    transform={'translate (0,0)'}
+                    id={props.id}
+                    color={props.color}
+                    domain={props.domain}
+                    data={props.data}
+                    titleSize={12}
+                    trackMargin={12}
+                />
+            ) : (
                 <WrappedFullBigWig
                     title={props.title}
                     width={props.width}

diff --git a/src/components/customtrack/types.ts b/src/components/customtrack/types.ts
@@ -4,7 +4,16 @@ export type AddTrackProps = {
     open: boolean;
     endpoint: string;
     onClose: () => void;
-    onAccept: (modalState: { title: string; url: string; baiUrl?: string; color: string; domain: Domain }[]) => void;
+    onAccept: (
+        modalState: {
+            title: string;
+            url: string;
+            baiUrl?: string;
+            displayMode?: string;
+            color: string;
+            domain: Domain;
+        }[]
+    ) => void;
 };
 
 export interface Domain {
@@ -22,10 +31,14 @@ export type CustomTrackProps = {
     data?: any;
     id: string;
     height: number;
+    displayMode?: string;
     width: number;
     title: string;
     color: string;
     domain: Domain;
     onHeightChanged?: (value: number) => void;
     transform: string;
 };
+
+export const DEFAULT_BIGBED_DISPLAYMODE = 'dense';
+export const DEFAULT_BIGWIG_DISPLAYMODE = 'full';
diff --git a/src/components/search/refseqsearchbox.tsx b/src/components/search/refseqsearchbox.tsx
@@ -11,10 +11,11 @@ const RefSeqSearchBox: React.FC<RefSeqSearchBoxProps> = (props) => {
     const onSubmit = useCallback(() => {
         if (selectedGene && isCoordinate(selectedGene.description)) {
             props.onSearchSubmit && props.onSearchSubmit(selectedGene.description);
+            return;
         }
         let g = selectedGene && selectedGene.description ? selectedGene.description : results && results[0].description;
         if (g === undefined) return;
-        props.onSearchSubmit && props.onSearchSubmit(g);
+        props.onSearchSubmit && isCoordinate(g) && props.onSearchSubmit(g);
     }, [results, props, selectedGene]);
     const onSearchChange = useCallback(
         async (e, { value }) => {

diff --git a/src/components/search/searchbox.tsx b/src/components/search/searchbox.tsx
@@ -10,11 +10,15 @@ const SearchBox: React.FC<SearchBoxProps> = (props) => {
     const [results, setResults] = useState<Result[]>();
 
     const onSubmit = useCallback(() => {
-        if (searchVal && isCoordinate(searchVal)) props.onSearchSubmit && props.onSearchSubmit(searchVal);
+        if (searchVal && isCoordinate(searchVal)) {
+            props.onSearchSubmit && props.onSearchSubmit(searchVal);
+            return;
+        }
         let gene = selectedsearchVal ? selectedsearchVal : results && results[0];
-
         if (gene === undefined) return;
-        props.onSearchSubmit && props.onSearchSubmit(gene.description.split('\n')[1]);
+        props.onSearchSubmit &&
+            isCoordinate(gene.description.split('\n')[1]) &&
+            props.onSearchSubmit(gene.description.split('\n')[1]);
     }, [searchVal, results, props, selectedsearchVal]);
     const onSearchChange = useCallback(
         async (e, { value }) => {