Upgrade typescript to latest version, and fix new errors

package.json

@@ -286,7 +286,7 @@
     "tslib": "^1.11.1",
     "typed-css-modules": "^0.6.4",
     "typed-css-modules-webpack-plugin": "^0.1.3",
-    "typescript": "3.8.3",
+    "typescript": "4.0.3",
     "underscore": "^1.8.3",
     "url": "^0.11.0",
     "url-loader": "^1.1.2",

src/pages/patientView/vafPlot/ThumbnailExpandVAFPlot.tsx

@@ -59,7 +59,7 @@ export class ThumbnailExpandVAFPlot extends React.Component<
                 overlay={<VAFPlot {...expandedProps} />}
                 arrowContent={<div className="rc-tooltip-arrow-inner" />}
                 destroyTooltipOnHide={false}
-                mouseLeaveDelay={isWebdriver ? 2 : 0.05}
+                mouseLeaveDelay={isWebdriver() ? 2 : 0.05}
             >
                 <div className={this.props.cssClass || ''}>
                     <VAFPlot {...thumbnailProps} />

src/pages/resultsView/ResultsViewPageStore.ts

@@ -273,8 +273,10 @@ export enum SampleListCategoryType {
 }
 
 export enum GeneticEntityType {
-    'GENE' = 'gene',
-    'GENESET' = 'geneset',
+    'GENE' = 'GENE',
+    'GENESET' = 'GENESET',
+    'GENERIC_ASSAY' = 'GENERIC_ASSAY',
+    'PHOSPHOPROTEIN' = 'PHOSPHOPROTEIN',
 }
 
 export const SampleListCategoryTypeToFullId = {

src/pages/resultsView/coExpression/CoExpressionTabUtils.ts

@@ -12,7 +12,6 @@ export type CoExpressionWithEntityInfo = CoExpression & {
 };
 
 export type CoExpressionWithQ = CoExpressionWithEntityInfo & {
-    geneticEntityType: GeneticEntityType;
     qValue: number;
 };
 

src/pages/resultsView/coExpression/CoExpressionViz.tsx

@@ -434,7 +434,7 @@ export default class CoExpressionViz extends React.Component<
                     geneticEntityName: this.highlightedCoExpression
                         .geneticEntityName,
                     geneticEntityType: this.highlightedCoExpression
-                        .geneticEntityType,
+                        .geneticEntityType as GeneticEntityType,
                     geneticEntityId: this.highlightedCoExpression
                         .geneticEntityId,
                     cytoband: this.highlightedCoExpression.cytoband,

src/pages/resultsView/enrichments/EnrichmentsUtil.tsx

@@ -611,7 +611,7 @@ export function getAlterationEnrichmentColumns(
         enrichedGroupColum.tooltip = (
             <table>
                 <tr>
-                    <td>Log ratio > 0</td>
+                    <td>Log ratio {'>'} 0</td>
                     <td>: Enriched in {group1.name}</td>
                 </tr>
                 <tr>
@@ -728,7 +728,7 @@ export function getEnrichmentColumns(
         enrichedGroupColum.tooltip = (
             <table>
                 <tr>
-                    <td>Log ratio > 0</td>
+                    <td>Log ratio {'>'} 0</td>
                     <td>: Enriched in {group1.name}</td>
                 </tr>
                 <tr>
@@ -877,7 +877,7 @@ export function getGenericAssayEnrichmentColumns(
         enrichedGroupColum.tooltip = (
             <table>
                 <tr>
-                    <td>Log ratio > 0</td>
+                    <td>Log ratio {'>'} 0</td>
                     <td>: Enriched in {group1.name}</td>
                 </tr>
                 <tr>

src/pages/resultsView/mutualExclusivity/MutualExclusivityTable.tsx

@@ -211,7 +211,7 @@ export default class MutualExclusivityTable extends React.Component<
             tooltip: (
                 <table>
                     <tr>
-                        <td>Log2 ratio > 0</td>
+                        <td>Log2 ratio {'>'} 0</td>
                         <td>: Tendency towards co-occurrence</td>
                     </tr>
                     <tr>

src/pages/resultsView/plots/PlotsTab.tsx

@@ -4935,8 +4935,9 @@ export default class PlotsTab extends React.Component<IPlotsTabProps, {}> {
                                 <div style={{ marginTop: 5 }}>
                                     <div>
                                         ** Labeling of threshold values (e.g.
-                                        >8.00) excludes threshold values from
-                                        correlation coefficient calculation.
+                                        {'>'}8.00) excludes threshold values
+                                        from correlation coefficient
+                                        calculation.
                                     </div>
                                 </div>
                             )}
@@ -4945,8 +4946,8 @@ export default class PlotsTab extends React.Component<IPlotsTabProps, {}> {
                                 <div style={{ marginTop: 5 }}>
                                     <div>
                                         ** Labeling of threshold values (e.g.
-                                        >8.00) excludes threshold values from
-                                        box plot calculation.
+                                        {'>'}8.00) excludes threshold values
+                                        from box plot calculation.
                                     </div>
                                 </div>
                             )}

src/pages/resultsView/settings/DriverAnnotationControls.tsx

@@ -277,7 +277,7 @@ export default class DriverAnnotationControls extends React.Component<
                                     onClick={this.onInputClick}
                                     data-test="annotateCBioPortalCount"
                                 />
-                                cBioPortal >=
+                                cBioPortal {'>='}
                             </label>
                             <EditableSpan
                                 value={
@@ -306,7 +306,7 @@ export default class DriverAnnotationControls extends React.Component<
                                     onClick={this.onInputClick}
                                     data-test="annotateCOSMICCount"
                                 />
-                                COSMIC >=
+                                COSMIC {'>='}
                             </label>
                             <EditableSpan
                                 value={

src/pages/staticPages/tools/oncoprinter/OncoprinterGeneticUtils.ts

@@ -7,7 +7,10 @@ import {
     GeneticTrackDatum_Data,
 } from '../../../../shared/components/oncoprint/Oncoprint';
 import { percentAltered } from '../../../../shared/components/oncoprint/OncoprintUtils';
-import { AlterationTypeConstants } from '../../../resultsView/ResultsViewPageStore';
+import {
+    AlterationTypeConstants,
+    AnnotatedExtendedAlteration,
+} from '../../../resultsView/ResultsViewPageStore';
 import { cna_profile_data_to_string } from '../../../../shared/lib/oql/AccessorsForOqlFilter';
 import {
     fillGeneticTrackDatum,
@@ -707,8 +710,10 @@ export function annotateGeneticTrackData(
             const newObj = _.clone(object);
             newObj.data = newObj.data.filter(d => {
                 // clear previous annotations
-                delete d.oncoKbOncogenic;
-                delete d.putativeDriver;
+                delete (d as Partial<OncoprinterGeneticTrackDatum_Data>)
+                    .oncoKbOncogenic;
+                delete (d as Partial<OncoprinterGeneticTrackDatum_Data>)
+                    .putativeDriver;
                 // annotate and filter out if necessary
                 switch (d.molecularProfileAlterationType) {
                     case AlterationTypeConstants.COPY_NUMBER_ALTERATION:

src/pages/staticPages/tools/oncoprinter/OncoprinterHelp.tsx

@@ -164,7 +164,9 @@ export const ClinicalFormatHelp = (
         <code>Age({ClinicalTrackDataType.NUMBER})</code>&#9;
         <code>Cancer_Type({ClinicalTrackDataType.STRING})</code>&#9;
         <code>Mutation_Count({ClinicalTrackDataType.LOG_NUMBER})</code>&#9;
-        <code>Mutation_Spectrum(C>A/C>G/C>T/T>A/T>C/T>G)</code>
+        <code>
+            Mutation_Spectrum(C{'>'}A/C{'>'}G/C{'>'}T/T{'>'}A/T{'>'}C/T{'>'}G)
+        </code>
         <br />
         Each following row gives the sample id, then the value for each clinical
         attribute, or the special value {ONCOPRINTER_VAL_NA} which indicates

src/pages/studyView/StudyViewPageStore.ts

@@ -1493,7 +1493,7 @@ export class StudyViewPageStore {
         );
         //studyViewFilter can only have studyIds or sampleIdentifiers
         if (!_.isEmpty(studyViewFilter.sampleIdentifiers)) {
-            delete studyViewFilter.studyIds;
+            delete (studyViewFilter as Partial<StudyViewFilter>).studyIds;
         }
 
         studyViewFilter.patientTreatmentFilters = { filters: [] };
@@ -2291,7 +2291,7 @@ export class StudyViewPageStore {
             if (bins.length > 0) {
                 newFilter.customBins = bins;
             } else {
-                delete newFilter.customBins;
+                delete (newFilter as Partial<ClinicalDataBinFilter>).customBins;
             }
             this._clinicalDataBinFilterSet.set(uniqueKey, newFilter);
         }
@@ -4945,9 +4945,11 @@ export class StudyViewPageStore {
                         studyViewFilter.sampleIdentifiers = sampleIdentifiersFromGenomicProfileFilter;
                         // only one of [studyIds, sampleIdentifiers] should present in studyViewFilter.
                         // sending both would throw error.
-                        delete studyViewFilter.studyIds;
+                        delete (studyViewFilter as Partial<StudyViewFilter>)
+                            .studyIds;
                     }
-                    delete studyViewFilter.genomicProfiles;
+                    delete (studyViewFilter as Partial<StudyViewFilter>)
+                        .genomicProfiles;
                 }
 
                 return internalClient.fetchFilteredSamplesUsingPOST({

src/shared/api/urls.spec.ts

@@ -4,6 +4,7 @@ import { assert } from 'chai';
 import { shallow, mount } from 'enzyme';
 import sinon from 'sinon';
 import AppConfig from 'appConfig';
+import { IServerConfig } from 'config/IAppConfig';
 
 describe('url library', () => {
     before(() => {
@@ -13,7 +14,8 @@ describe('url library', () => {
     });
 
     after(() => {
-        delete AppConfig.serverConfig.genomenexus_url;
+        delete (AppConfig.serverConfig as Partial<IServerConfig>)
+            .genomenexus_url;
         delete AppConfig.apiRoot;
     });
 

src/shared/components/GeneSelectionBox/GeneSymbolValidatorMessage.tsx

@@ -246,10 +246,7 @@ export default class GeneSymbolValidatorMessage extends React.Component<
 
         return (
             <div id="geneBoxValidationStatus">
-                <GeneSymbolValidatorMessageChild
-                    replaceGene={this.props.replaceGene}
-                    {...this.props}
-                />
+                <GeneSymbolValidatorMessageChild {...this.props} />
             </div>
         );
     }

src/shared/components/mutationTable/column/cancerCellFraction/CancerCellFractionColumnFormatter.spec.tsx

@@ -5,21 +5,25 @@ import { getDefaultCancerCellFractionColumnDefinition } from './CancerCellFracti
 import CancerCellFractionElement from 'shared/components/mutationTable/column/cancerCellFraction/CancerCellFractionElement';
 import SampleManager from 'pages/patientView/SampleManager';
 import { initMutation } from 'test/MutationMockUtils';
+import { Mutation } from 'cbioportal-ts-api-client';
 
 describe('CancerCellFractionColumnFormatter', () => {
     function createMutationWithoutASCN() {
         let mutationWithoutASCN = initMutation({
             sampleId: 'S003',
         });
-        delete mutationWithoutASCN.alleleSpecificCopyNumber;
+        delete (mutationWithoutASCN as Partial<Mutation>)
+            .alleleSpecificCopyNumber;
         return mutationWithoutASCN;
     }
 
     function createMutationWithoutCCF() {
         let mutationWithoutCCF = initMutation({
             sampleId: 'S002',
         });
-        delete mutationWithoutCCF.alleleSpecificCopyNumber.ccfExpectedCopies;
+        delete (mutationWithoutCCF.alleleSpecificCopyNumber as Partial<
+            Mutation['alleleSpecificCopyNumber']
+        >).ccfExpectedCopies;
         return mutationWithoutCCF;
     }
 

src/shared/components/mutationTable/column/clonal/ClonalColumnFormatter.spec.tsx

@@ -47,9 +47,13 @@ describe('ClonalColumnFormatter', () => {
                 minorCopyNumber: 1,
             },
         });
-        delete emptyMutation.alleleSpecificCopyNumber.clonal;
-        delete emptyMutation.alleleSpecificCopyNumber.ccfExpectedCopies;
-        delete emptyMutation.alleleSpecificCopyNumber;
+        delete (emptyMutation.alleleSpecificCopyNumber as Partial<
+            Mutation['alleleSpecificCopyNumber']
+        >).clonal;
+        delete (emptyMutation.alleleSpecificCopyNumber as Partial<
+            Mutation['alleleSpecificCopyNumber']
+        >).ccfExpectedCopies;
+        delete (emptyMutation as Partial<Mutation>).alleleSpecificCopyNumber;
         return emptyMutation;
     }
 

src/shared/lib/MutationUtils.spec.ts

@@ -761,11 +761,14 @@ describe('MutationUtils', () => {
         const mutationWithoutASCNProperty = initMutation({
             sampleId: 'P1_sample1',
         });
-        delete mutationWithoutASCNProperty.alleleSpecificCopyNumber.ascnMethod;
+        delete (mutationWithoutASCNProperty.alleleSpecificCopyNumber as Partial<
+            Mutation['alleleSpecificCopyNumber']
+        >).ascnMethod;
         const mutationWithoutASCN = initMutation({
             sampleId: 'P1_sample1',
         });
-        delete mutationWithoutASCN.alleleSpecificCopyNumber;
+        delete (mutationWithoutASCN as Partial<Mutation>)
+            .alleleSpecificCopyNumber;
 
         it('checks if mutation has allele specific copy number and specified sub-property', () => {
             const hasASCNMethod = hasASCNProperty(

src/shared/lib/URLWrapper.ts

@@ -31,9 +31,7 @@ export type Property<T, NestedObjectType = any> = {
     aliases?: string[];
 };
 
-export function needToLoadSession(
-    obj: Partial<ResultsViewURLWrapper>
-): boolean {
+export function needToLoadSession(obj: Partial<URLWrapper<any>>): boolean {
     return (
         obj.sessionId !== undefined &&
         obj.sessionId !== 'pending' &&
@@ -409,7 +407,7 @@ export default class URLWrapper<
         return getRemoteSession(this.sessionId);
     }
 
-    @computed get needToLoadSession() {
+    @computed get needToLoadSession(): boolean {
         // if we have a session id
         // it's NOT equal to pending
         // we either have NO session data or the existing session data is

src/shared/lib/comparison/ComparisonStore.ts

@@ -89,7 +89,7 @@ export enum OverlapStrategy {
     EXCLUDE = 'Exclude',
 }
 
-export default class ComparisonStore {
+export default abstract class ComparisonStore {
     private tabHasBeenShown = observable.map<boolean>();
     private tabHasBeenShownReactionDisposer: IReactionDisposer;
     @observable public newSessionPending = false;
@@ -170,6 +170,13 @@ export default class ComparisonStore {
     protected async saveAndGoToSession(newSession: Session) {
         throw new Error(`saveAndGoToSession must be implemented in subclass`);
     }
+    abstract _session: MobxPromise<Session>;
+    abstract _originalGroups: MobxPromise<ComparisonGroup[]>;
+    abstract overlapStrategy: OverlapStrategy;
+    abstract usePatientLevelEnrichments: boolean;
+    abstract samples: MobxPromise<Sample[]>;
+    abstract studies: MobxPromise<CancerStudy[]>;
+    // < / >
 
     public get isLoggedIn() {
         return this.appStore.isLoggedIn;
@@ -194,14 +201,6 @@ export default class ComparisonStore {
         this.saveAndGoToSession(newSession);
     }
 
-    readonly _session: MobxPromise<Session>; // must be implemented in subclasses
-    readonly _originalGroups: MobxPromise<ComparisonGroup[]>; // must be implemented in subclasses
-    public overlapStrategy: OverlapStrategy; // must be implemented in subclasses
-    public usePatientLevelEnrichments: boolean; // must be implemented in subclasses
-    readonly samples: MobxPromise<Sample[]>; // must be implemented in subclass
-    readonly studies: MobxPromise<CancerStudy[]>; // must be implemented in subclass
-    // < / >
-
     readonly origin = remoteData({
         // the studies that the comparison groups come from
         await: () => [this._session],

src/shared/lib/createQueryStore.ts

@@ -23,7 +23,7 @@ export function createQueryStore(
         // normalize this
         query.cancer_study_list =
             query.cancer_study_list || query.cancer_study_id;
-        delete query.cancer_study_id;
+        delete (query as Partial<CancerStudyQueryUrlParams>).cancer_study_id;
 
         // check if certain parameters should be reset
         if (currentQuery) {

yarn.lock

@@ -22642,6 +22642,11 @@ typescript@3.8.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
   integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
 
+typescript@4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.3.tgz#153bbd468ef07725c1df9c77e8b453f8d36abba5"
+  integrity sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==
+
 ua-parser-js@^0.7.18:
   version "0.7.19"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"