Add Categorical Bar Chart on Study View #4951

olzhasmukayev · 2024-07-25T17:40:15Z

Choose chart type:

netlify · 2024-07-25T17:40:30Z

✅ Deploy Preview for cbioportalfrontend ready!

Name	Link
🔨 Latest commit	`b2aed9a`
🔍 Latest deploy log	https://app.netlify.com/sites/cbioportalfrontend/deploys/678936556ead7f0008ebdff6
😎 Deploy Preview	https://deploy-preview-4951.preview.cbioportal.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

gblaih · 2024-08-08T21:55:09Z

src/pages/studyView/StudyViewConfig.ts

@@ -312,3 +324,18 @@ export const STUDY_VIEW_CONFIG: StudyViewConfig = _.assign(
    studyViewFrontEnd,
    (getServerConfig() || {}).study_view
 );
+
+export const chartChangeOptionsMap: ChangeChartOptionsMap = {


is this used?

gblaih · 2024-08-08T21:58:58Z

src/pages/studyView/StudyViewPageStore.ts

+        uniqueKey: string,
+        data: ClinicalDataCount[] | string[]
+    ): void {
+        const { totalCount, naCount } = (data as (


add comments here to explain what's happening here. can also add comments below to describe the method of choosing which chart

gblaih · 2024-08-08T22:05:32Z

src/pages/studyView/chartHeader/ChartHeader.tsx

@@ -414,6 +416,85 @@ export class ChartHeader extends React.Component<IChartHeaderProps, {}> {
            );
        }

+        if (
+            this.props.chartControls &&


can simplify to this.props.chartControls?.showChartChangeOptions

gblaih · 2024-08-08T22:10:06Z

src/pages/studyView/charts/categoryBarChart/CategoryBarChart.tsx

+
+    @autobind
+    private onSelection(bars: { data: BarDatum[] }[]): void {
+        const dataBins = _.flatten(


when performing multiple array functions, lets chain multiple lodash functions like
_(bars) .function() .function() ...
lodash has a map function

gblaih · 2024-08-08T22:12:05Z

src/pages/studyView/charts/categoryBarChart/CategoryBarChart.tsx

+const TILT_ANGLE = 30;
+
+@observer
+export default class CategoryBarChart


i'm noticing some similarities with our existing BarChart component. can we look into maybe extending it or reusing that code to prevent duplicate code?

gblaih · 2024-08-08T22:14:38Z

src/pages/studyView/charts/categoryBarChart/CategoryBarChart.tsx

+    }
+}
+
+const onlyContainsNA = (element: BarDatum): boolean => {


like said above, these functions are in BarChart as well. we could make export these functions to prevent duplication

gblaih · 2024-08-08T22:16:41Z

src/pages/studyView/charts/categoryBarChart/CategoryBarChartAxisLabel.tsx

+import { VictoryLabel, Helpers } from 'victory';
+import { Tooltip, OverlayTrigger } from 'react-bootstrap';
+
+export class CategoryBarChartAxisLabel extends VictoryLabel {


same as above. i think we have very similar components with our BarChart component. it would be nice to reuse this somehow. lets look into this for all similarly related components

gblaih · 2024-08-08T22:23:18Z

src/pages/studyView/charts/categoryBarChart/CustomBinsModal.tsx

+    updateCurrentBinsValue() {
+        let newBins: number[] = [];
+        if (this.currentBinMethod === BinMethodOption.CUSTOM) {
+            newBins = _.sortBy(


lodash chaining here as well

gblaih · 2024-08-08T22:28:34Z

src/pages/studyView/charts/ChartContainer.tsx

@@ -1451,6 +1484,11 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
                () => (this.newlyAdded = false),
                STUDY_VIEW_CONFIG.thresholds.chartHighlight
            );
+        } else if (this.chartChanged) {


currently when changing a chart type, the highlight doesn't go away. look into the mechanism behind this and figure out why

inodb · 2024-08-13T15:19:54Z

@olzhasmukayev Nice work! Can we enable it for Metastatic Sites as well?

- in custom selection text box take inputs with commas, space or new line or all combined also - add an example placeholder

Adds a condition to the link text where if all resources are of the same type, then rename the Files & Links tab to the resourceDefinition displayName

* fix log scale breaking box plot * update screenshots --------- Co-authored-by: Bryan Lai <[email protected]>

…nd (cBioPortal#5080)

* Update screenshots * Fix quick search test * Update api clients and fix typing of new Clickhouse dependent code * Add a wait for bin screenshot test

- [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected]

* Update api client * resolve type complains

- [email protected] - [email protected]

* Fix: handle empty "Files and Links" tab in patient view --------- Co-authored-by: alisman <[email protected]>

…l#5019)

…oPortal#5084) * Update logScalePossible for generic assay negative data * make sure that return type is always boolean * Add test for negative and positive data of type number

* Add ellipse for long label in Timeline chart with a tooltip when too truncated. Also add padding between end of label and arrow. * fix: limit width of left bar

* Update screenshots * Fix quick search test * Update api clients and fix typing of new Clickhouse dependent code * Add a wait for bin screenshot test

* Update api client * resolve type complains

olzhasmukayev force-pushed the feat/category-bar-chart branch from 8f83fcc to c4893d4 Compare July 26, 2024 06:23

gblaih reviewed Aug 8, 2024

View reviewed changes

inodb changed the title ~~feat: add category bar chart~~ Add Categorical Bar Chart on Study View Aug 13, 2024

inodb added the enhancement label Aug 13, 2024

olzhasmukayev force-pushed the feat/category-bar-chart branch 2 times, most recently from 66fcf9a to 4a7e78b Compare August 19, 2024 19:03

olzhasmukayev force-pushed the feat/category-bar-chart branch from b3116f6 to dcf08bf Compare September 12, 2024 13:06

olzhasmukayev force-pushed the feat/category-bar-chart branch 2 times, most recently from 3b5fffa to 14d9b89 Compare December 18, 2024 05:52

inodb added the gsoc label Jan 3, 2025

arishta and others added 10 commits January 16, 2025 21:24

Add gene column in the Mutations table (cBioPortal#5049)

49c3b00

custom-selection-added (cBioPortal#5064)

ff46447

- in custom selection text box take inputs with commas, space or new line or all combined also - add an example placeholder

Change file and links name to resource displayName (cBioPortal#5061)

8dc244c

Adds a condition to the link text where if all resources are of the same type, then rename the Files & Links tab to the resourceDefinition displayName

update screenshost after gene table update (cBioPortal#5076)

668e837

Fix log scale breaking box plot in plots tab (cBioPortal#5079)

e7ad163

* fix log scale breaking box plot * update screenshots --------- Co-authored-by: Bryan Lai <[email protected]>

serve dist should always serve https after change to js load in backe…

601127a

…nd (cBioPortal#5080)

Fix screenshots. Update test. Update api clients (cBioPortal#5081)

98828fc

* Update screenshots * Fix quick search test * Update api clients and fix typing of new Clickhouse dependent code * Add a wait for bin screenshot test

Publish

2422a3e

- [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected] - [email protected]

Update api client (cBioPortal#5082)

02da08a

* Update api client * resolve type complains

Publish

a4252af

- [email protected] - [email protected]

Nelliney and others added 5 commits January 16, 2025 21:25

Bugfix/hide empty tab (cBioPortal#4969)

d3c2424

* Fix: handle empty "Files and Links" tab in patient view --------- Co-authored-by: alisman <[email protected]>

Reduce api calls for generic assay meta in study view page (cBioPorta…

afe709e

…l#5019)

Update function logScalePossible for generic assay negative data (cBi…

d705fa6

…oPortal#5084) * Update logScalePossible for generic assay negative data * make sure that return type is always boolean * Add test for negative and positive data of type number

Add truncation of timeline label (cBioPortal#4990)

fb38c77

* Add ellipse for long label in Timeline chart with a tooltip when too truncated. Also add padding between end of label and arrow. * fix: limit width of left bar

update screens (cBioPortal#5085)

278fdf5

olzhasmukayev force-pushed the feat/category-bar-chart branch from c76f0bc to 278fdf5 Compare January 16, 2025 16:26

olzhasmukayev and others added 3 commits January 16, 2025 21:32

Merge branch 'master' into feat/category-bar-chart

ee860de

Fix screenshots. Update test. Update api clients (cBioPortal#5081)

265211e

* Update screenshots * Fix quick search test * Update api clients and fix typing of new Clickhouse dependent code * Add a wait for bin screenshot test

Update api client (cBioPortal#5082)

b2aed9a

* Update api client * resolve type complains

olzhasmukayev mentioned this pull request Jan 16, 2025

Add Category Bar Chart in Study View Page #5086

Closed

3 tasks

dippindots added the needs discussion label Jan 28, 2025

alisman closed this Jan 29, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Categorical Bar Chart on Study View #4951

Add Categorical Bar Chart on Study View #4951

olzhasmukayev commented Jul 25, 2024 •

edited by inodb

Loading

netlify bot commented Jul 25, 2024 •

edited

Loading

gblaih Aug 8, 2024

gblaih Aug 8, 2024

gblaih Aug 8, 2024

gblaih Aug 8, 2024

gblaih Aug 8, 2024

gblaih Aug 8, 2024

gblaih Aug 8, 2024

gblaih Aug 8, 2024

gblaih Aug 8, 2024

inodb commented Aug 13, 2024

Add Categorical Bar Chart on Study View #4951

Add Categorical Bar Chart on Study View #4951

Conversation

olzhasmukayev commented Jul 25, 2024 • edited by inodb Loading

netlify bot commented Jul 25, 2024 • edited Loading

✅ Deploy Preview for cbioportalfrontend ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

inodb commented Aug 13, 2024

olzhasmukayev commented Jul 25, 2024 •

edited by inodb

Loading

netlify bot commented Jul 25, 2024 •

edited

Loading