Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gsoc 2024 single cell tab- stackedBar,piechart and bar plots added #4921

Open
wants to merge 32 commits into
base: master
Choose a base branch
from

Conversation

SURAJ-SHARMA27
Copy link
Contributor

Fix cBioPortal/cbioportal# (see https://help.github.com/en/articles/closing-issues-using-keywords)

Describe changes proposed in this pull request:

  • In this pull request stacked bar , piechart and bar plot components have been added for single cell tab along with custom tooltips and downloading options.

Any screenshots or GIFs?

screen-capture.13.webm

Notify reviewers

@zeynepkaragoz
@sowmiyaa-kumar
@alisman

Copy link

netlify bot commented Jun 11, 2024

Deploy Preview for cbioportalfrontend ready!

Name Link
🔨 Latest commit 7fe7bee
🔍 Latest deploy log https://app.netlify.com/sites/cbioportalfrontend/deploys/66aef04bc0088900080d5f54
😎 Deploy Preview https://deploy-preview-4921--cbioportalfrontend.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link
Contributor

@TJMKuijpers TJMKuijpers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Suraj, I left some comments to your code. Please have a look and let me know if something is not clear.

interface Entity {
stableId: string;
}
interface DataBin {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DataBin is defined as an export type in StudyViewUtils.tsx, you should import it from there.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@@ -158,6 +158,7 @@ export async function fetchGenericAssayData(
} as GenericAssayFilter,
};
});
console.log(params, 'here are params2');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove the console.log().

ref={(ref: any) => (this.svg = ref)}
<>
{console.log(this.props.onUserSelection)}
<DefaultTooltip
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove the console.log()

@@ -265,6 +265,7 @@ export default class PieChart extends React.Component<IPieChartProps, {}>
)})`,
}));
const colorScale = this.props.data.map(data => data.color);
console.log(colorScale, 'colorScale1');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove the console.log()

@@ -1395,6 +1396,12 @@ export class StudyViewPageStore
const chartInfo = this._genericAssayChartMap.get(
chartMeta.uniqueKey
)!;
console.log(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove console.log()

src/pages/SingleCell/PieToolTip.tsx Outdated Show resolved Hide resolved
// Create a ref to hold the SVG container
const svgRef = useRef<SVGSVGElement>(null);
// Set to store unique patient IDs
let differentPatientIds: string[] = [];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try to avoid let and use const (also for the other variables defined below)

}, [isHovered, tooltipHovered, tooltipEnabled]);

// Define color scale (replace with your desired colors)
const colors = [
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you are defining the same colors in multiple files. You could create a file SingeCellPageUtils, define the colors there and import them when needed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I have defined the colors in singleCellStore and used them by importing from there.

};
});

const handleDownloadData = () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need a handleDownloadData in the tooltip? Is it possible to only download the tooltip? And like mentioned before, try to generalize this handleDownloadData, place it in downloadUtils and import it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And please explain why we cannot use the existing download function of cBioPortal

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have generalized all the download functions into downloadUtils. The reason I haven't reused the existing download functions is that we need additional customization. For instance, in the histogram and pie chart, we want the downloaded chart to include percentages next to the legends, even though these percentages are not displayed in the chart. Because of these customizations, I wrote specific functions.

document.body.removeChild(link);
URL.revokeObjectURL(url);
};
const handleDownload = () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as handleDownloadData above

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants