Merge pull request #94 from leexgh/hidden-options

options for hiding y axis, hiding track selector, set plot height
onursumer · Sep 26, 2019 · a4a2bc6 · a4a2bc6
2 parents 9709dcf + 162f36c
commit a4a2bc6
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/src/LollipopMutationPlot.tsx b/src/LollipopMutationPlot.tsx
@@ -48,16 +48,19 @@ export type LollipopMutationPlotProps = {
     topYAxisDefaultMin?: number;
     yMaxFractionDigits?: number;
     yMaxLabelPostfix?: string;
+    showYAxis?: boolean;
     bottomYAxisDefaultMax?: number;
     bottomYAxisDefaultMin?: number;
     yAxisLabelPadding?: number;
+    plotLollipopHeight?: number;
     lollipopTooltipCountInfo?: (count: number, mutations?: Partial<Mutation>[]) => JSX.Element;
     customControls?: JSX.Element;
     onXAxisOffset?: (offset:number) => void;
     geneWidth: number;
     trackVisibility?: TrackVisibility;
     tracks?: TrackName[];
     trackDataStatus?: TrackDataStatus;
+    showTrackSelector?: boolean;
     onTrackVisibilityChange?: (selectedTrackIds: string[]) => void;
     autoHideControls?: boolean;
     showYMaxSlider?: boolean;
@@ -506,6 +509,7 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
                         trackVisibility={this.trackVisibility}
                         tracks={this.props.tracks}
                         trackDataStatus={this.props.trackDataStatus}
+                        showTrackSelector={this.props.showTrackSelector}
                         onTrackVisibilityChange={this.onTrackVisibilityChange}
                         getSVG={this.getSVG}
                     />
@@ -518,7 +522,7 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
                         domains={this.domains}
                         dataStore={this.props.store.dataStore}
                         vizWidth={this.props.geneWidth}
-                        vizHeight={200}
+                        vizHeight={this.props.plotLollipopHeight}
                         hugoGeneSymbol={this.hugoGeneSymbol}
                         xMax={this.proteinLength}
                         yMax={this.yMaxInput}
@@ -527,6 +531,7 @@ export default class LollipopMutationPlot extends React.Component<LollipopMutati
                         }
                         yMaxLabelPostfix={this.props.yMaxLabelPostfix}
                         yAxisLabelPadding={this.props.yAxisLabelPadding}
+                        showYAxis={this.props.showYAxis}
                         bottomYMax={this.bottomYMaxInput}
                         onXAxisOffset={this.onXAxisOffset}
                         topYAxisSymbol={this.props.topYAxisSymbol}

diff --git a/src/LollipopMutationPlotControls.tsx b/src/LollipopMutationPlotControls.tsx
@@ -34,6 +34,7 @@ type LollipopMutationPlotControlsProps = {
     tracks?: TrackName[];
     trackVisibility?: TrackVisibility;
     trackDataStatus?: TrackDataStatus;
+    showTrackSelector?: boolean;
     showYMaxSlider?: boolean;
     showLegendToggle?: boolean;
     showDownloadControls?: boolean;
@@ -55,6 +56,7 @@ function formatInputValue(value: number, step: number, fractionDigits: number =
 export default class LollipopMutationPlotControls extends React.Component<LollipopMutationPlotControlsProps, {}>
 {
     public static defaultProps: Partial<LollipopMutationPlotControlsProps> = {
+        showTrackSelector: true,
         showYMaxSlider: true,
         showLegendToggle: true,
         showDownloadControls: true,
@@ -198,7 +200,7 @@ export default class LollipopMutationPlotControls extends React.Component<Lollip
                     this.props.showControls ? styles["fade-in"] : styles["fade-out"])}
             >
                 <div style={{display:"flex", alignItems:"center"}}>
-                    {this.props.trackVisibility && this.props.onTrackVisibilityChange && this.trackSelector}
+                    {this.props.trackVisibility && this.props.onTrackVisibilityChange && this.props.showTrackSelector && this.trackSelector}
                     {this.props.showYMaxSlider && this.yMaxSlider}
                     {this.props.showYMaxSlider && this.bottomYMaxSlider}
                     {this.props.customControls}

diff --git a/src/LollipopPlot.tsx b/src/LollipopPlot.tsx
@@ -21,6 +21,7 @@ export type LollipopPlotProps = {
     yMaxFractionDigits?: number;
     yMaxLabelPostfix?: string;
     yAxisLabelPadding?: number;
+    showYAxis?: boolean;
     xAxisOnTop?: boolean;
     xAxisOnBottom?: boolean;
     groups?: string[];
@@ -38,6 +39,10 @@ export default class LollipopPlot extends React.Component<LollipopPlotProps, {}>
     private plot: LollipopPlotNoTooltip|undefined;
     private handlers: any;
 
+    public static defaultProps: Partial<LollipopPlotProps> = {
+        vizHeight: 200
+    };
+
     constructor(props: LollipopPlotProps) {
         super(props);
 

diff --git a/src/LollipopPlotNoTooltip.tsx b/src/LollipopPlotNoTooltip.tsx
@@ -55,6 +55,10 @@ export default class LollipopPlotNoTooltip extends React.Component<LollipopPlotN
     private geneHeight = 14;
     private domainHeight = 24;
 
+    public static defaultProps: Partial<LollipopPlotNoTooltipProps> = {
+        showYAxis: true
+    };
+
     @autobind
     protected ref(svg:SVGElement){
         this.svg = svg;
@@ -665,14 +669,14 @@ export default class LollipopPlotNoTooltip extends React.Component<LollipopPlotN
                     {this.domains}
                     {this.xAxisOnTop && this.xAxis(0, LollipopPlacement.TOP)}
                     {this.xAxisOnBottom && this.xAxis(this.xAxisY, LollipopPlacement.BOTTOM)}
-                    {this.yAxis(this.yAxisY,
+                    {this.props.showYAxis && this.yAxis(this.yAxisY,
                         this.yMax,
                         this.yTicks,
                         LollipopPlacement.TOP,
                         this.topGroupName,
                         this.topGroupSymbol)
                     }
-                    {this.needBottomPlacement &&
+                    {this.props.showYAxis && this.needBottomPlacement &&
                         this.yAxis(this.bottomYAxisY,
                             this.bottomYMax,
                             this.bottomYTicks,

diff --git a/src/MutationMapper.tsx b/src/MutationMapper.tsx
@@ -33,9 +33,11 @@ export type MutationMapperProps = {
     windowWrapper?: {size: {width: number, height: number}};
     trackVisibility?: TrackVisibility;
     tracks?: TrackName[];
+    showTrackSelector?: boolean;
     mutationTableColumns?: DataTableColumn<Partial<Mutation>>[];
     customMutationTableProps?: Partial<TableProps<Partial<Mutation>>>;
     showFilterResetPanel?: boolean;
+    showPlotYAxis?: boolean;
     showPlotYMaxSlider?: boolean;
     showPlotLegendToggle?: boolean;
     showPlotDownloadControls?: boolean;
@@ -49,6 +51,7 @@ export type MutationMapperProps = {
     plotBottomYAxisDefaultMin?: number;
     plotYAxisLabelPadding?: number;
     plotLollipopTooltipCountInfo?: (count: number, mutations?: Partial<Mutation>[]) => JSX.Element;
+    plotLollipopHeight?: number;
     customControls?: JSX.Element;
     mutationTable?: JSX.Element;
     mutationTableInitialSortColumn?: string;
@@ -269,19 +272,22 @@ export default class MutationMapper<P extends MutationMapperProps = MutationMapp
                 showLegendToggle={this.props.showPlotLegendToggle}
                 showDownloadControls={this.props.showPlotDownloadControls}
                 trackDataStatus={this.trackDataStatus}
+                showTrackSelector={this.props.showTrackSelector}
                 onXAxisOffset={this.onXAxisOffset}
                 onTrackVisibilityChange={this.props.onTrackVisibilityChange}
                 getMutationCount={this.props.getMutationCount}
                 getLollipopColor={this.props.getLollipopColor}
                 yMaxLabelPostfix={this.plotYMaxLabelPostfix}
                 yMaxFractionDigits={this.props.plotYMaxFractionDigits}
                 yAxisLabelPadding={this.props.plotYAxisLabelPadding}
+                showYAxis={this.props.showPlotYAxis}
                 topYAxisSymbol={this.plotTopYAxisSymbol}
                 bottomYAxisSymbol={this.plotBottomYAxisSymbol}
                 topYAxisDefaultMax={this.plotTopYAxisDefaultMax}
                 topYAxisDefaultMin={this.plotBottomYAxisDefaultMin}
                 bottomYAxisDefaultMax={this.plotBottomYAxisDefaultMax}
                 bottomYAxisDefaultMin={this.plotBottomYAxisDefaultMin}
+                plotLollipopHeight={this.props.plotLollipopHeight}
                 lollipopTooltipCountInfo={this.props.plotLollipopTooltipCountInfo}
             />
         );