hide axis and invert added to menu

Author: mathematicalmichael

src/component.tsx

@@ -331,6 +331,7 @@ export class HiPlot extends React.Component<HiPlotProps, HiPlotState> {
 
         // Setup contextmenu when we right-click a parameter
         this.contextMenuRef.current.addCallback(this.columnContextMenu.bind(this), this);
+        this.contextMenuRef.current.addCallback(this.columnContextMenuFooter.bind(this), this, "last");
 
         // Load experiment provided in constructor if any
         if (this.props.experiment) {
@@ -452,6 +453,31 @@ export class HiPlot extends React.Component<HiPlotProps, HiPlotState> {
             link_colorize.addClass('disabled').css('pointer-events', 'none');
         }
         contextmenu.append(link_colorize);
+
+    }
+    columnContextMenuFooter(column: string, cm: HTMLDivElement) {
+        var contextmenu = $(cm);
+        const ppRef = this.plugins_ref[DefaultPlugins.PARALLEL_PLOT];
+        const pp = ppRef && ppRef.current ? ppRef.current as unknown as ParallelPlot : null;
+        contextmenu.append($('<div class="dropdown-divider"></div>'));
+
+        if (pp && pp.can_hide_axis && pp.can_hide_axis(column)) {
+            var hide_axis = $('<a class="dropdown-item" href="#">Hide axis</a>');
+            hide_axis.click(function(this: HiPlot, event) {
+                if (pp.remove_axis) {
+                    pp.remove_axis(column);
+                }
+                event.preventDefault();
+            }.bind(this));
+            contextmenu.append(hide_axis);
+        }
+
+        var close_menu = $('<a class="dropdown-item" href="#">Close menu</a>');
+        close_menu.click(function(this: HiPlot, event) {
+            this.contextMenuRef.current.hide();
+            event.preventDefault();
+        }.bind(this));
+        contextmenu.append(close_menu);
     }
     createNewParamsDef(rows_filtered: Array<Datapoint>): ParamDefMap {
         var new_pd = Object.assign({}, this.state.params_def);

src/contextmenu.tsx

@@ -23,6 +23,7 @@ interface ContextMenuState {
 export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuState> {
     context_menu_div: React.RefObject<HTMLDivElement> = React.createRef();
     trigger_callbacks: Array<{cb: (column: string, element: HTMLDivElement) => void, obj: any}> = [];
+    trigger_callbacks_last: Array<{cb: (column: string, element: HTMLDivElement) => void, obj: any}> = [];
     hide: any;
     constructor(props: ContextMenuProps) {
         super(props);
@@ -39,11 +40,16 @@ export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuSt
         }.bind(this);
         $(window).on("click", this.hide);
     }
-    addCallback(fn: (column: string, element: HTMLDivElement) => void, obj: any) {
-        this.trigger_callbacks.push({cb: fn, obj: obj});
+    addCallback(fn: (column: string, element: HTMLDivElement) => void, obj: any, priority: "normal" | "last" = "normal") {
+        if (priority === "last") {
+            this.trigger_callbacks_last.push({cb: fn, obj: obj});
+        } else {
+            this.trigger_callbacks.push({cb: fn, obj: obj});
+        }
     }
     removeCallbacks(obj: any) {
         this.trigger_callbacks = this.trigger_callbacks.filter(trigger => trigger.obj != obj);
+        this.trigger_callbacks_last = this.trigger_callbacks_last.filter(trigger => trigger.obj != obj);
     }
     show(pageX: number, pageY: number, column: string) {
         // This assumes parent has `relative` positioning
@@ -77,6 +83,9 @@ export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuSt
             this.trigger_callbacks.forEach(function(trigger) {
                 trigger.cb(me.state.column, cm);
             });
+            this.trigger_callbacks_last.forEach(function(trigger) {
+                trigger.cb(me.state.column, cm);
+            });
             // After content is added, check if menu overflows viewport and reposition if needed
             requestAnimationFrame(() => {
                 const rect = cm.getBoundingClientRect();

src/parallel/parallel.tsx

@@ -500,6 +500,7 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
           .attr("text-anchor", "left")
           .classed("pplot-label", true)
           .classed("label-name", true)
+          .classed(style.label, true)
           .classed(style.axisLabelText, true)
           .classed(style.pplotLabel, true)
           .each(function(dim) {
@@ -965,6 +966,10 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
   getRestorableColumnsCount(): number {
     return Array.from(this.state.hide).filter(d => this.can_restore_axis(d)).length;
   }
+
+  can_hide_axis(d: string): boolean {
+    return this.state.dimensions.indexOf(d) !== -1;
+  }
   path = function(this: ParallelPlot, d: Datapoint, ctx: CanvasRenderingContext2D, color?: string) {
     if (color) ctx.strokeStyle = color;
     var has_started = false;