react-mutation-mapper 0.8.75 → 0.8.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/component/filter/BadgeLabel.d.ts +5 -1
- package/dist/component/filter/BadgeSelector.d.ts +19 -4
- package/dist/component/filter/ProteinImpactTypeBadgeSelector.d.ts +1 -1
- package/dist/index.es.js +59 -17
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +58 -16
- package/dist/index.js.map +1 -1
- package/dist/styles.css +3 -3
- package/package.json +3 -3
|
@@ -7,6 +7,8 @@ export declare type BadgeLabelProps = {
|
|
|
7
7
|
badgeClassName?: string;
|
|
8
8
|
badgeFirst?: boolean;
|
|
9
9
|
value?: string;
|
|
10
|
+
isDriverAnnotated?: boolean;
|
|
11
|
+
badgeLabelFormat?: (label: JSX.Element | string, badgeFirst?: boolean, value?: string, badge?: JSX.Element | null) => JSX.Element;
|
|
10
12
|
};
|
|
11
13
|
export declare const DEFAULT_BADGE_STYLE: {
|
|
12
14
|
color: string;
|
|
@@ -16,7 +18,9 @@ export declare const DEFAULT_BADGE_STYLE: {
|
|
|
16
18
|
};
|
|
17
19
|
export declare class BadgeLabel extends React.Component<BadgeLabelProps, {}> {
|
|
18
20
|
static defaultProps: Partial<BadgeLabelProps>;
|
|
19
|
-
protected
|
|
21
|
+
protected isDriverVusBadge(value: string): boolean;
|
|
22
|
+
protected isNotDriverVusProteinBadge(value: string): boolean;
|
|
23
|
+
protected get badge(): JSX.Element | null;
|
|
20
24
|
protected get badgeFirst(): JSX.Element;
|
|
21
25
|
protected get badgeLast(): JSX.Element;
|
|
22
26
|
render(): JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { CheckBoxType, Option } from 'cbioportal-frontend-commons';
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { CSSProperties } from 'react';
|
|
4
3
|
import { DataFilter } from '../../model/DataFilter';
|
|
4
|
+
import { CheckBoxType, Option } from 'cbioportal-frontend-commons';
|
|
5
5
|
export declare type BadgeSelectorOption = {
|
|
6
6
|
value: string;
|
|
7
7
|
label?: string | JSX.Element;
|
|
@@ -13,7 +13,6 @@ export declare type BadgeSelectorProps = {
|
|
|
13
13
|
name?: string;
|
|
14
14
|
placeholder?: string;
|
|
15
15
|
isDisabled?: boolean;
|
|
16
|
-
unselectOthersWhenAllSelected?: boolean;
|
|
17
16
|
numberOfColumnsPerRow?: number;
|
|
18
17
|
alignColumns?: boolean;
|
|
19
18
|
uniformBadgeWidth?: boolean;
|
|
@@ -27,12 +26,27 @@ export declare type BadgeSelectorProps = {
|
|
|
27
26
|
}, checkBoxType?: CheckBoxType) => JSX.Element;
|
|
28
27
|
getBadgeLabel?: (option: BadgeSelectorOption, selectedValues: {
|
|
29
28
|
[optionValue: string]: any;
|
|
30
|
-
}, badgeClassName?: string, badgeAlignmentStyle?: CSSProperties) => JSX.Element;
|
|
29
|
+
}, badgeClassName?: string, badgeAlignmentStyle?: CSSProperties, isDriverAnnotated?: boolean, badgeLabelFormat?: (label: JSX.Element | string, badgeFirst?: boolean, value?: string, badge?: JSX.Element | null) => JSX.Element) => JSX.Element;
|
|
31
30
|
filter?: DataFilter<string>;
|
|
32
31
|
options?: BadgeSelectorOption[];
|
|
33
32
|
badgeClassName?: string;
|
|
34
33
|
badgeContentPadding?: number;
|
|
35
34
|
badgeCharWidth?: number;
|
|
35
|
+
isDriverAnnotated?: boolean;
|
|
36
|
+
onOnlyDriverVsVusSelect?: (selectedOption: string[], allValuesSelected: boolean) => void;
|
|
37
|
+
driverAnnotationIcon?: JSX.Element;
|
|
38
|
+
onBadgeSelect?: (value: string, selectedValues: {
|
|
39
|
+
value: string;
|
|
40
|
+
}[], onChange: (values: {
|
|
41
|
+
value: string;
|
|
42
|
+
}[]) => void) => void;
|
|
43
|
+
onOnlySelect?: (value: string, onChange: (values: {
|
|
44
|
+
value: string;
|
|
45
|
+
}[]) => void, onOnlyDriverVsVusChange: (values: {
|
|
46
|
+
value: string;
|
|
47
|
+
}[]) => void) => void;
|
|
48
|
+
badgeLabelFormat?: (label: JSX.Element | string, badgeFirst?: boolean, value?: string, badge?: JSX.Element | null) => JSX.Element;
|
|
49
|
+
useOnlyFeature?: boolean;
|
|
36
50
|
};
|
|
37
51
|
export declare const DEFAULT_BADGE_CHAR_WIDTH = 10;
|
|
38
52
|
export declare const DEFAULT_BADGE_CONTENT_PADDING = 7;
|
|
@@ -53,10 +67,11 @@ export declare class BadgeSelector extends React.Component<BadgeSelectorProps, {
|
|
|
53
67
|
};
|
|
54
68
|
getBadgeLabel(option: BadgeSelectorOption, selectedValues: {
|
|
55
69
|
[optionValue: string]: any;
|
|
56
|
-
}, badgeClassName?: string, badgeAlignmentStyle?: CSSProperties): JSX.Element;
|
|
70
|
+
}, badgeClassName?: string, badgeAlignmentStyle?: CSSProperties, isDriverAnnotated?: boolean, badgeLabelFormat?: (label: JSX.Element | string, badgeFirst?: boolean, value?: string, badge?: JSX.Element | null) => JSX.Element): JSX.Element;
|
|
57
71
|
get badgeAlignmentStyles(): CSSProperties[] | undefined;
|
|
58
72
|
get options(): Option[];
|
|
59
73
|
render(): JSX.Element;
|
|
60
74
|
private onChange;
|
|
75
|
+
private onOnlyDriverVsVusChange;
|
|
61
76
|
}
|
|
62
77
|
export default BadgeSelector;
|
|
@@ -12,7 +12,7 @@ export declare type ProteinImpactTypeBadgeSelectorProps = BadgeSelectorProps & {
|
|
|
12
12
|
export declare function getProteinImpactTypeOptionLabel(option: Option): JSX.Element;
|
|
13
13
|
export declare function getProteinImpactTypeBadgeLabel(option: BadgeSelectorOption, selectedValues: {
|
|
14
14
|
[optionValue: string]: any;
|
|
15
|
-
}, badgeClassName?: string, badgeAlignmentStyle?: CSSProperties): JSX.Element;
|
|
15
|
+
}, badgeClassName?: string, badgeAlignmentStyle?: CSSProperties, isDriverAnnotated?: boolean, badgeLabelFormat?: (label: JSX.Element | string, badgeFirst?: boolean, value?: string, badge?: JSX.Element | null) => JSX.Element): JSX.Element;
|
|
16
16
|
export declare class ProteinImpactTypeBadgeSelector<P extends ProteinImpactTypeBadgeSelectorProps = ProteinImpactTypeBadgeSelectorProps> extends React.Component<P, {}> {
|
|
17
17
|
constructor(props: any);
|
|
18
18
|
static defaultProps: Partial<ProteinImpactTypeBadgeSelectorProps>;
|
package/dist/index.es.js
CHANGED
|
@@ -4,7 +4,7 @@ import ___default from 'lodash';
|
|
|
4
4
|
import { makeObservable, observable, computed, action, reaction } from 'mobx';
|
|
5
5
|
import { observer } from 'mobx-react';
|
|
6
6
|
import * as React from 'react';
|
|
7
|
-
import { DefaultTooltip, TruncatedText, getNCBIlink, cachePostMethodsOnClient, CanonicalMutationType, MutationTumorTypeFrequencyTable, FREQUENCY_COLUMNS_DEFINITION, FrequencyTableColumnEnum, CheckedSelect, getSelectedValuesMap,
|
|
7
|
+
import { DefaultTooltip, TruncatedText, getNCBIlink, cachePostMethodsOnClient, CanonicalMutationType, MutationTumorTypeFrequencyTable, FREQUENCY_COLUMNS_DEFINITION, FrequencyTableColumnEnum, CheckedSelect, DriverVsVusType, getSelectedValuesMap, BadgeListSelector, MUT_COLOR_MISSENSE, MUT_COLOR_MISSENSE_PASSENGER, MUT_COLOR_INFRAME, MUT_COLOR_INFRAME_PASSENGER, MUT_COLOR_TRUNC, MUT_COLOR_TRUNC_PASSENGER, MUT_COLOR_SPLICE, MUT_COLOR_SPLICE_PASSENGER, STRUCTURAL_VARIANT_COLOR, STRUCTURAL_VARIANT_PASSENGER_COLOR, MUT_COLOR_OTHER, getCanonicalMutationType, getProteinImpactTypeFromCanonical, ProteinImpactType, getProteinImpactType, resolveColumnVisibility, resolveColumnVisibilityByColumnDefinition, longestCommonStartingSubstring, getTextWidth, unhoverAllComponents, SVGAxis, getComponentIndex, defaultHitzoneConfig, initHitZoneFromConfig, EditableSpan, DownloadControls, EllipsisTextTooltip, remoteData, WindowWrapper } from 'cbioportal-frontend-commons';
|
|
8
8
|
import classNames from 'classnames';
|
|
9
9
|
import { CIVIC_NA_VALUE, parseMyCancerGenomeLink, uniqueGenomicLocations, indexAnnotationsByGenomicLocation, getCivicEntry, getRemoteDataGroupStatus, getMyCancerGenomeLinks, isLinearClusterHotspot, is3dHotspot, OncoKbCardDataType, defaultArraySortMethod, getVariantAnnotation, defaultSortMethod, getDbsnpRsId, getMyVariantInfoAnnotation, generateHgvsgByMutation, calcProteinChangeSortValue, Pathogenicity, extendMutations, formatNumberValueInSignificantDigits, generateTumorTypeDecomposition, formatPercentValue, countMutationsByProteinChange, numberOfLeadingDecimalZeros, filterLinearClusterHotspotsByMutations, filter3dHotspotsByMutations, isHotspot, defaultHotspotFilter, extractExonInformation, formatExonLocation, formatExonLength, ptmColor, compareByPtmTypePriority, UniprotTopologyTrackToColor, UniprotTopologyTypeToTitle, PtmSource, PTM_SOURCE_URL, getMyVariantInfoAnnotationsFromIndexedVariantAnnotations, getMyCancerGenomeData, genomicLocationString, convertUniprotFeatureToPtm, convertDbPtmToPtm, UniprotCategory, convertUniprotFeatureToUniprotTopology, groupPtmDataByPosition, groupPtmDataByTypeAndPosition, groupCancerHotspotDataByPosition, indexHotspotsData, fetchCivicGenes, fetchCivicVariants, getMutationsByTranscriptId, groupMutationsByProteinStartPos, groupHotspotsByMutations } from 'cbioportal-utils';
|
|
10
10
|
import { getIndicatorData, calculateOncoKbAvailableDataType, oncoKbAnnotationSortValue, OncoKB, OncoKbSummaryTable, LEVELS, getTumorTypeNameWithExclusionInfo, ReferenceList, generateProteinChangeQuery, StructuralVariantType, generateAnnotateStructuralVariantQuery, defaultOncoKbFilter, groupOncoKbIndicatorDataByMutations, defaultOncoKbIndicatorFilter } from 'oncokb-frontend-commons';
|
|
@@ -1851,30 +1851,62 @@ var BadgeLabel = /** @class */ (function (_super) {
|
|
|
1851
1851
|
function BadgeLabel() {
|
|
1852
1852
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
1853
1853
|
}
|
|
1854
|
+
Object.defineProperty(BadgeLabel.prototype, "isDriverVusBadge", {
|
|
1855
|
+
enumerable: false,
|
|
1856
|
+
configurable: true,
|
|
1857
|
+
writable: true,
|
|
1858
|
+
value: function (value) {
|
|
1859
|
+
return (!!value &&
|
|
1860
|
+
Object.values(DriverVsVusType).includes(value));
|
|
1861
|
+
}
|
|
1862
|
+
});
|
|
1863
|
+
Object.defineProperty(BadgeLabel.prototype, "isNotDriverVusProteinBadge", {
|
|
1864
|
+
enumerable: false,
|
|
1865
|
+
configurable: true,
|
|
1866
|
+
writable: true,
|
|
1867
|
+
value: function (value) {
|
|
1868
|
+
return (!!value &&
|
|
1869
|
+
Object.values(CanonicalMutationType).includes(value));
|
|
1870
|
+
}
|
|
1871
|
+
});
|
|
1854
1872
|
Object.defineProperty(BadgeLabel.prototype, "badge", {
|
|
1855
1873
|
get: function () {
|
|
1856
1874
|
return (React.createElement("span", { style: this.props.badgeFirst
|
|
1857
|
-
?
|
|
1875
|
+
? this.props.isDriverAnnotated
|
|
1876
|
+
? {}
|
|
1877
|
+
: { marginRight: 5 }
|
|
1858
1878
|
: { marginLeft: 5 } },
|
|
1859
|
-
React.createElement("span", { className: this.props.badgeClassName, "data-test": "badge-" + this.props.value, style: __assign(__assign({}, DEFAULT_BADGE_STYLE), this.props.badgeStyleOverride)
|
|
1879
|
+
React.createElement("span", { className: this.props.badgeClassName, "data-test": "badge-" + this.props.value, style: __assign(__assign(__assign({}, DEFAULT_BADGE_STYLE), this.props.badgeStyleOverride), (this.props.isDriverAnnotated
|
|
1880
|
+
? { marginRight: 0, width: 'auto' }
|
|
1881
|
+
: {})) }, this.props.badgeContent)));
|
|
1860
1882
|
},
|
|
1861
1883
|
enumerable: false,
|
|
1862
1884
|
configurable: true
|
|
1863
1885
|
});
|
|
1864
1886
|
Object.defineProperty(BadgeLabel.prototype, "badgeFirst", {
|
|
1865
1887
|
get: function () {
|
|
1866
|
-
|
|
1867
|
-
this.badge
|
|
1868
|
-
|
|
1888
|
+
if (this.props.badgeLabelFormat) {
|
|
1889
|
+
return this.props.badgeLabelFormat(this.props.label, true, this.props.value, this.badge);
|
|
1890
|
+
}
|
|
1891
|
+
else {
|
|
1892
|
+
return (React.createElement(React.Fragment, null,
|
|
1893
|
+
this.badge,
|
|
1894
|
+
this.props.label));
|
|
1895
|
+
}
|
|
1869
1896
|
},
|
|
1870
1897
|
enumerable: false,
|
|
1871
1898
|
configurable: true
|
|
1872
1899
|
});
|
|
1873
1900
|
Object.defineProperty(BadgeLabel.prototype, "badgeLast", {
|
|
1874
1901
|
get: function () {
|
|
1875
|
-
|
|
1876
|
-
this.props.label,
|
|
1877
|
-
|
|
1902
|
+
if (this.props.badgeLabelFormat) {
|
|
1903
|
+
return this.props.badgeLabelFormat(this.props.label, false, this.props.value, this.badge);
|
|
1904
|
+
}
|
|
1905
|
+
else {
|
|
1906
|
+
return (React.createElement(React.Fragment, null,
|
|
1907
|
+
this.props.label,
|
|
1908
|
+
this.badge));
|
|
1909
|
+
}
|
|
1878
1910
|
},
|
|
1879
1911
|
enumerable: false,
|
|
1880
1912
|
configurable: true
|
|
@@ -2005,8 +2037,8 @@ var BadgeSelector = /** @class */ (function (_super) {
|
|
|
2005
2037
|
enumerable: false,
|
|
2006
2038
|
configurable: true,
|
|
2007
2039
|
writable: true,
|
|
2008
|
-
value: function (option, selectedValues, badgeClassName, badgeAlignmentStyle) {
|
|
2009
|
-
return this.props.getBadgeLabel ? (this.props.getBadgeLabel(option, selectedValues, badgeClassName, badgeAlignmentStyle)) : (React.createElement(BadgeLabel, { label: option.label || option.value, badgeContent: option.badgeContent, badgeStyleOverride: getBadgeStyleOverride(option, selectedValues, badgeAlignmentStyle), badgeClassName: this.props.badgeClassName }));
|
|
2040
|
+
value: function (option, selectedValues, badgeClassName, badgeAlignmentStyle, isDriverAnnotated, badgeLabelFormat) {
|
|
2041
|
+
return this.props.getBadgeLabel ? (this.props.getBadgeLabel(option, selectedValues, badgeClassName, badgeAlignmentStyle, isDriverAnnotated, badgeLabelFormat)) : (React.createElement(BadgeLabel, { label: option.label || option.value, badgeContent: option.badgeContent, badgeStyleOverride: getBadgeStyleOverride(option, selectedValues, badgeAlignmentStyle), badgeClassName: this.props.badgeClassName, isDriverAnnotated: this.props.isDriverAnnotated, badgeLabelFormat: this.props.badgeLabelFormat }));
|
|
2010
2042
|
}
|
|
2011
2043
|
});
|
|
2012
2044
|
Object.defineProperty(BadgeSelector.prototype, "badgeAlignmentStyles", {
|
|
@@ -2024,7 +2056,7 @@ var BadgeSelector = /** @class */ (function (_super) {
|
|
|
2024
2056
|
return (this.props.options || []).map(function (option, index) { return ({
|
|
2025
2057
|
label: _this.getBadgeLabel(option, _this.selectedValuesMap, _this.props.badgeClassName, _this.badgeAlignmentStyles && _this.props.numberOfColumnsPerRow
|
|
2026
2058
|
? _this.badgeAlignmentStyles[index]
|
|
2027
|
-
: undefined),
|
|
2059
|
+
: undefined, _this.props.isDriverAnnotated, _this.props.badgeLabelFormat),
|
|
2028
2060
|
value: option.value,
|
|
2029
2061
|
}); });
|
|
2030
2062
|
},
|
|
@@ -2036,7 +2068,7 @@ var BadgeSelector = /** @class */ (function (_super) {
|
|
|
2036
2068
|
configurable: true,
|
|
2037
2069
|
writable: true,
|
|
2038
2070
|
value: function () {
|
|
2039
|
-
return (React.createElement(
|
|
2071
|
+
return (React.createElement(BadgeListSelector, { onChange: this.onChange, options: this.options, getOptionLabel: this.props.getOptionLabel, selectedValue: this.selectedValues, isDisabled: this.props.isDisabled, numberOfColumnsPerRow: this.props.numberOfColumnsPerRow, isDriverAnnotated: this.props.isDriverAnnotated, onOnlyDriverVsVusChange: this.onOnlyDriverVsVusChange, driverAnnotationIcon: this.props.driverAnnotationIcon, onBadgeSelect: this.props.onBadgeSelect, onOnlySelect: this.props.onOnlySelect, useOnlyFeature: this.props.useOnlyFeature }));
|
|
2040
2072
|
}
|
|
2041
2073
|
});
|
|
2042
2074
|
Object.defineProperty(BadgeSelector.prototype, "onChange", {
|
|
@@ -2047,6 +2079,14 @@ var BadgeSelector = /** @class */ (function (_super) {
|
|
|
2047
2079
|
handleOptionSelect(values, this.allValues, this.props.onSelect);
|
|
2048
2080
|
}
|
|
2049
2081
|
});
|
|
2082
|
+
Object.defineProperty(BadgeSelector.prototype, "onOnlyDriverVsVusChange", {
|
|
2083
|
+
enumerable: false,
|
|
2084
|
+
configurable: true,
|
|
2085
|
+
writable: true,
|
|
2086
|
+
value: function (values) {
|
|
2087
|
+
handleOptionSelect(values, this.allValues, this.props.onOnlyDriverVsVusSelect);
|
|
2088
|
+
}
|
|
2089
|
+
});
|
|
2050
2090
|
__decorate([
|
|
2051
2091
|
computed
|
|
2052
2092
|
], BadgeSelector.prototype, "allValues", null);
|
|
@@ -2065,6 +2105,9 @@ var BadgeSelector = /** @class */ (function (_super) {
|
|
|
2065
2105
|
__decorate([
|
|
2066
2106
|
action.bound
|
|
2067
2107
|
], BadgeSelector.prototype, "onChange", null);
|
|
2108
|
+
__decorate([
|
|
2109
|
+
action.bound
|
|
2110
|
+
], BadgeSelector.prototype, "onOnlyDriverVsVusChange", null);
|
|
2068
2111
|
BadgeSelector = __decorate([
|
|
2069
2112
|
observer
|
|
2070
2113
|
], BadgeSelector);
|
|
@@ -2286,8 +2329,8 @@ var VALUES = [
|
|
|
2286
2329
|
function getProteinImpactTypeOptionLabel(option) {
|
|
2287
2330
|
return React.createElement("span", null, option.label || option.value);
|
|
2288
2331
|
}
|
|
2289
|
-
function getProteinImpactTypeBadgeLabel(option, selectedValues, badgeClassName, badgeAlignmentStyle) {
|
|
2290
|
-
return (React.createElement(BadgeLabel, { label: option.label || option.value, badgeContent: option.badgeContent, badgeStyleOverride: getBadgeStyleOverride(option, selectedValues, badgeAlignmentStyle), badgeClassName: badgeClassName, badgeFirst: true, value: option.value }));
|
|
2332
|
+
function getProteinImpactTypeBadgeLabel(option, selectedValues, badgeClassName, badgeAlignmentStyle, isDriverAnnotated, badgeLabelFormat) {
|
|
2333
|
+
return (React.createElement(BadgeLabel, { label: option.label || option.value, badgeContent: option.badgeContent, badgeStyleOverride: getBadgeStyleOverride(option, selectedValues, badgeAlignmentStyle), badgeClassName: badgeClassName, badgeFirst: true, value: option.value, isDriverAnnotated: isDriverAnnotated, badgeLabelFormat: badgeLabelFormat }));
|
|
2291
2334
|
}
|
|
2292
2335
|
var ProteinImpactTypeBadgeSelector = /** @class */ (function (_super) {
|
|
2293
2336
|
__extends(ProteinImpactTypeBadgeSelector, _super);
|
|
@@ -2334,7 +2377,7 @@ var ProteinImpactTypeBadgeSelector = /** @class */ (function (_super) {
|
|
|
2334
2377
|
configurable: true,
|
|
2335
2378
|
writable: true,
|
|
2336
2379
|
value: function () {
|
|
2337
|
-
return (React.createElement(BadgeSelector, __assign({ options: this.options, getOptionLabel: getProteinImpactTypeOptionLabel, getBadgeLabel: getProteinImpactTypeBadgeLabel }, this.props)));
|
|
2380
|
+
return (React.createElement(BadgeSelector, __assign({ options: this.options, getOptionLabel: getProteinImpactTypeOptionLabel, getBadgeLabel: getProteinImpactTypeBadgeLabel, useOnlyFeature: true }, this.props)));
|
|
2338
2381
|
}
|
|
2339
2382
|
});
|
|
2340
2383
|
Object.defineProperty(ProteinImpactTypeBadgeSelector, "defaultProps", {
|
|
@@ -2344,7 +2387,6 @@ var ProteinImpactTypeBadgeSelector = /** @class */ (function (_super) {
|
|
|
2344
2387
|
value: {
|
|
2345
2388
|
colors: DEFAULT_PROTEIN_IMPACT_TYPE_COLORS,
|
|
2346
2389
|
alignColumns: true,
|
|
2347
|
-
unselectOthersWhenAllSelected: false,
|
|
2348
2390
|
numberOfColumnsPerRow: 2,
|
|
2349
2391
|
}
|
|
2350
2392
|
});
|