@mathstack/viz 1.1.5 → 2.1.0

package/src/lib/tooltips/html-tooltip/config/position/tooltip-position.ts

@@ -0,0 +1,42 @@
+import {
+  ConnectedPosition,
+  FlexibleConnectedPositionStrategy,
+  OverlayPositionBuilder,
+} from '@angular/cdk/overlay';
+
+export type TooltipPositionConfig = {
+  originX: 'start' | 'center' | 'end';
+  originY: 'top' | 'center' | 'bottom';
+  overlayX: 'start' | 'center' | 'end';
+  overlayY: 'top' | 'center' | 'bottom';
+};
+
+export class TooltipPosition implements ConnectedPosition {
+  originX: TooltipPositionConfig['originX'];
+  originY: TooltipPositionConfig['originY'];
+  overlayX: TooltipPositionConfig['overlayX'];
+  overlayY: TooltipPositionConfig['overlayY'];
+  weight?: number;
+  offsetX?: number;
+  offsetY?: number;
+  panelClass?: string | string[];
+
+  constructor(config: TooltipPositionConfig & Partial<ConnectedPosition>) {
+    Object.assign(this, config); // Merge any additional overrides
+  }
+}
+
+export class HtmlTooltipCdkManagedPosition {
+  constructor(public positions: ConnectedPosition[]) {}
+
+  getPositionStrategy(
+    origin: Element,
+    overlayPositionBuilder: OverlayPositionBuilder
+  ): FlexibleConnectedPositionStrategy {
+    return overlayPositionBuilder
+      .flexibleConnectedTo(origin)
+      .withPositions(this.positions)
+      .withFlexibleDimensions(false)
+      .withPush(false);
+  }
+}

package/src/lib/tooltips/html-tooltip/config/size/tooltip-size-builder.ts

@@ -0,0 +1,75 @@
+import { HtmlTooltipSize } from './tooltip-size';
+
+export class HtmlTooltipSizeBuilder {
+  _width: number | string;
+  _height: number | string;
+  _minWidth: number | string;
+  _minHeight: number | string;
+  _maxWidth: number | string;
+  _maxHeight: number | string;
+
+  width(width: number | string | null) {
+    if (width === null) {
+      this._width = undefined;
+      return this;
+    }
+    this._width = width;
+    return this;
+  }
+
+  height(height: number | string | null) {
+    if (height === null) {
+      this._height = undefined;
+      return this;
+    }
+    this._height = height;
+    return this;
+  }
+
+  minWidth(minWidth: number | string | null) {
+    if (minWidth === null) {
+      this._minWidth = undefined;
+      return this;
+    }
+    this._minWidth = minWidth;
+    return this;
+  }
+
+  minHeight(minHeight: number | string | null) {
+    if (minHeight === null) {
+      this._minHeight = undefined;
+      return this;
+    }
+    this._minHeight = minHeight;
+    return this;
+  }
+
+  maxWidth(maxWidth: number | string | null) {
+    if (maxWidth === null) {
+      this._maxWidth = undefined;
+      return this;
+    }
+    this._maxWidth = maxWidth;
+    return this;
+  }
+
+  maxHeight(maxHeight: number | string | null) {
+    if (maxHeight === null) {
+      this._maxHeight = undefined;
+      return this;
+    }
+    this._maxHeight = maxHeight;
+    return this;
+  }
+
+  _build(): HtmlTooltipSize {
+    return new HtmlTooltipSize({
+      width: this._width,
+      height: this._height,
+      minWidth: this._minWidth,
+      minHeight: this._minHeight,
+      maxWidth: this._maxWidth,
+      maxHeight: this._maxHeight,
+    });
+  }
+}

package/src/lib/tooltips/html-tooltip/config/size/tooltip-size-options.ts

@@ -0,0 +1,8 @@
+export interface HtmlTooltipSizeOptions {
+  width: number | string;
+  height: number | string;
+  minWidth: number | string;
+  minHeight: number | string;
+  maxWidth: number | string;
+  maxHeight: number | string;
+}

package/src/lib/tooltips/html-tooltip/config/size/tooltip-size.ts

@@ -0,0 +1,15 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { HtmlTooltipSizeOptions } from './tooltip-size-options';
+
+export class HtmlTooltipSize implements HtmlTooltipSizeOptions {
+  width: number | string;
+  height: number | string;
+  minWidth: number | string;
+  minHeight: number | string;
+  maxWidth: number | string;
+  maxHeight: number | string;
+
+  constructor(options: HtmlTooltipSizeOptions) {
+    safeAssign(this, options);
+  }
+}

package/src/lib/tooltips/html-tooltip/html-tooltip.directive.spec.ts

@@ -0,0 +1,537 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
+import { ViewContainerRef } from '@angular/core';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { NgOnChangesUtilities } from '@mathstack/app-kit';
+import { Subject } from 'rxjs';
+import { ChartComponent } from '../../charts';
+import { EventType } from '../../events';
+import { ChartComponentStub } from '../../testing/stubs/chart.component.stub';
+import { MainServiceStub } from '../../testing/stubs/services/main.service.stub';
+import { VicHtmlTooltipConfigBuilder } from './config/html-tooltip-builder';
+import { HtmlTooltipCdkManagedPosition } from './config/position/tooltip-position';
+import { TooltipPositionBuilder } from './config/position/tooltip-position-builder';
+import { HtmlTooltipDirective } from './html-tooltip.directive';
+
+const fakeOuput = {
+  anchor: { x: 2, y: 4 },
+  origin: document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
+  customPosition: () =>
+    new HtmlTooltipCdkManagedPosition([
+      new TooltipPositionBuilder()
+        .fromTopLeft()
+        .attachBottomCenter()
+        .getPosition(),
+    ]),
+  defaultPosition: new HtmlTooltipCdkManagedPosition([
+    new TooltipPositionBuilder()
+      .fromTopLeft()
+      .attachBottomCenter()
+      .getPosition(),
+  ]),
+  fromAnchor: () =>
+    new HtmlTooltipCdkManagedPosition([
+      new TooltipPositionBuilder()
+        .fromTopLeft()
+        .attachBottomCenter()
+        .getPosition(),
+    ]),
+  type: EventType.HoverMove,
+};
+
+describe('HtmlTooltipDirective', () => {
+  let directive: HtmlTooltipDirective;
+  let mainServiceStub: MainServiceStub;
+  let destroySpy: jasmine.Spy;
+
+  beforeEach(() => {
+    mainServiceStub = new MainServiceStub();
+    TestBed.configureTestingModule({
+      providers: [
+        ViewContainerRef,
+        Overlay,
+        OverlayPositionBuilder,
+        HtmlTooltipDirective,
+        {
+          provide: ChartComponent,
+          useClass: ChartComponentStub,
+        },
+        {
+          provide: Overlay,
+          useValue: mainServiceStub.overlayStub,
+        },
+      ],
+    });
+    directive = TestBed.inject(HtmlTooltipDirective);
+    destroySpy = spyOn(directive, 'ngOnDestroy');
+  });
+
+  describe('init()', () => {
+    beforeEach(() => {
+      spyOn(directive, 'createOverlayRef');
+    });
+    it('calls createOverlay once if overlayRef is falsy', () => {
+      directive.init();
+      expect(directive.createOverlayRef).toHaveBeenCalledTimes(1);
+    });
+    it('does not call createOverlay if overlayRef is truthy', () => {
+      directive.overlayRef = 'hello' as any;
+      directive.init();
+      expect(directive.createOverlayRef).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    let changes: any;
+    beforeEach(() => {
+      spyOn(directive, 'updateForConfigChanges');
+      spyOn(directive, 'init');
+      directive.config = 'config' as any;
+      changes = {};
+    });
+    describe('if overlayRef and config are truthy', () => {
+      beforeEach(() => {
+        directive.overlayRef = 'overlay' as any;
+        directive.config = 'hello' as any;
+      });
+      it('calls updateForConfigChanges once with the correct value', () => {
+        directive.ngOnChanges(changes);
+        expect(directive.updateForConfigChanges).toHaveBeenCalledOnceWith(
+          changes
+        );
+      });
+    });
+    describe('if overlayRef is falsy and config is truthy', () => {
+      beforeEach(() => {
+        directive.config = 'hello' as any;
+      });
+      it('does not call updateForConfigChanges', () => {
+        directive.ngOnChanges(changes);
+        expect(directive.updateForConfigChanges).not.toHaveBeenCalled();
+      });
+      it('calls init', () => {
+        directive.ngOnChanges(changes);
+        expect(directive.init).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  describe('createOverlayRef', () => {
+    beforeEach(() => {
+      spyOn(directive, 'setPositionStrategy');
+      spyOn(directive, 'subscribeToBackdropClick');
+      spyOn(directive, 'updateVisibility');
+      mainServiceStub.overlayStub.create.and.returnValue('test ref' as any);
+      directive.config = new VicHtmlTooltipConfigBuilder()
+        .hasBackdrop(true)
+        .positionFromOutput(fakeOuput)
+        .applyEventsDisabledClass(true)
+        .size((size) => size.width(100))
+        .getConfig();
+    });
+
+    it('calls overlay.create once with the correct values', fakeAsync(() => {
+      directive.createOverlayRef();
+      tick();
+      expect(mainServiceStub.overlayStub.create).toHaveBeenCalledTimes(1);
+    }));
+    it('calls getPositionStrategy once', fakeAsync(() => {
+      directive.createOverlayRef();
+      tick();
+      expect(directive.setPositionStrategy).toHaveBeenCalledTimes(1);
+    }));
+    it('sets overlayRef to the correct value', fakeAsync(() => {
+      directive.createOverlayRef();
+      tick();
+      expect(directive.overlayRef).toEqual('test ref' as any);
+    }));
+    it('calls listenForBackdropClicks once if config hasBackdrop is true', fakeAsync(() => {
+      directive.config.hasBackdrop = true;
+      directive.createOverlayRef();
+      tick();
+      expect(directive.subscribeToBackdropClick).toHaveBeenCalledTimes(1);
+    }));
+    it('does not call listenForBackdropClicks if config hasBackdrop is false', fakeAsync(() => {
+      directive.config.hasBackdrop = false;
+      directive.createOverlayRef();
+      tick();
+      expect(directive.subscribeToBackdropClick).not.toHaveBeenCalled();
+    }));
+    it('calls updateVisibility', fakeAsync(() => {
+      directive.createOverlayRef();
+      tick();
+      expect(directive.updateVisibility).toHaveBeenCalledTimes(1);
+    }));
+  });
+
+  describe('getPositionStrategy', () => {
+    beforeEach(() => {
+      (directive as any).overlayPositionBuilder = 'builder' as any;
+      directive.config = new VicHtmlTooltipConfigBuilder()
+        .hasBackdrop(true)
+        .positionFromOutput(fakeOuput)
+        .applyEventsDisabledClass(true)
+        .size((size) => size.width(100))
+        .getConfig();
+      spyOn(directive.config.position, 'getPositionStrategy').and.returnValue(
+        'position' as any
+      );
+    });
+    it('calls getPositionStrategy once with the correct value', () => {
+      directive.setPositionStrategy();
+      expect(
+        directive.config.position.getPositionStrategy
+      ).toHaveBeenCalledOnceWith(fakeOuput.origin, 'builder' as any);
+    });
+  });
+
+  describe('subscribeToBackdropClick', () => {
+    const click = new Subject<string>();
+    const click$ = click.asObservable();
+    beforeEach(() => {
+      const overlayRef = {
+        backdropClick: () => click$,
+      } as any;
+      directive.overlayRef = overlayRef;
+      directive.backdropUnsubscribe = new Subject<void>();
+      spyOn(directive.backdropClick, 'emit');
+    });
+    it('calls backdropClick.emit once if subscription emits', () => {
+      directive.subscribeToBackdropClick();
+      click.next('click');
+      expect(directive.backdropClick.emit).toHaveBeenCalledTimes(1);
+      directive.backdropUnsubscribe.next();
+      directive.backdropUnsubscribe.complete();
+    });
+  });
+
+  describe('subscribeToKeyboardEvents', () => {
+    let addEventListenerSpy: jasmine.Spy;
+    beforeEach(() => {
+      addEventListenerSpy = spyOn(
+        (directive as any).document,
+        'addEventListener'
+      );
+    });
+    it('should add keydown event listener to document', () => {
+      directive.subscribeToKeyboardEvents();
+      expect(addEventListenerSpy).toHaveBeenCalledWith(
+        'keydown',
+        directive.onKeydown,
+        true
+      );
+    });
+  });
+
+  describe('unsubscribeFromKeyboardEvents', () => {
+    let removeEventListenerSpy: jasmine.Spy;
+    beforeEach(() => {
+      removeEventListenerSpy = spyOn(
+        (directive as any).document,
+        'removeEventListener'
+      );
+    });
+    it('should remove keydown event listener from document', () => {
+      directive.unsubscribeFromKeyboardEvents();
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'keydown',
+        directive.onKeydown,
+        true
+      );
+    });
+  });
+
+  describe('onKeydown', () => {
+    beforeEach(() => {
+      spyOn(directive, 'hide');
+    });
+    it('should call hide when Escape key is pressed', () => {
+      const event = { key: 'Escape' } as KeyboardEvent;
+      directive.onKeydown(event);
+      expect(directive.hide).toHaveBeenCalled();
+    });
+    it('should not call hide for other keys', () => {
+      const event = { key: 'Enter' } as KeyboardEvent;
+      directive.onKeydown(event);
+      expect(directive.hide).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('updateVisibility', () => {
+    beforeEach(() => {
+      spyOn(directive, 'show');
+      spyOn(directive, 'hide');
+    });
+    it('calls show once if overlayRef is defined and config.show is true', () => {
+      directive.config = { show: true } as any;
+      directive.overlayRef = 'something' as any;
+      directive.updateVisibility();
+      expect(directive.show).toHaveBeenCalledTimes(1);
+    });
+    it('calls hide once if overlayRed is defined and config.show is false', () => {
+      directive.config = { show: false } as any;
+      directive.overlayRef = 'something' as any;
+      directive.updateVisibility();
+      expect(directive.hide).toHaveBeenCalledTimes(1);
+    });
+    it('does not call show if overlayRef is undefined', () => {
+      directive.updateVisibility();
+      expect(directive.show).not.toHaveBeenCalled();
+    });
+    it('does not call hide if overlayRef is undefined', () => {
+      directive.updateVisibility();
+      expect(directive.hide).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('show', () => {
+    let hasAttachedSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      spyOn(directive, 'getTemplatePortal').and.returnValue('tp' as any);
+      hasAttachedSpy = jasmine.createSpy('hasAttached');
+      spyOn(directive, 'updatePositionStrategy');
+      spyOn(window, 'requestAnimationFrame').and.callFake((callback: any) => {
+        callback();
+        return 0;
+      });
+      directive.overlayRef = {
+        attach: jasmine.createSpy('attach'),
+        hasAttached: hasAttachedSpy,
+      } as any;
+    });
+
+    it('calls updatePosition once', fakeAsync(() => {
+      directive.show();
+      tick();
+      expect(directive.updatePositionStrategy).toHaveBeenCalledTimes(1);
+    }));
+
+    it('calls attach on overlayRef with the correct value if hasAttached returns false', fakeAsync(() => {
+      hasAttachedSpy.and.returnValue(false);
+      directive.show();
+      tick();
+      expect(directive.overlayRef.attach).toHaveBeenCalledOnceWith('tp');
+    }));
+
+    it('does not call attach if hasAttached returns true', fakeAsync(() => {
+      hasAttachedSpy.and.returnValue(true);
+      directive.show();
+      tick();
+      expect(directive.overlayRef.attach).not.toHaveBeenCalled();
+    }));
+  });
+
+  describe('hide', () => {
+    let hasAttachedSpy: jasmine.Spy;
+    beforeEach(() => {
+      hasAttachedSpy = jasmine.createSpy('hasAttached');
+      directive.overlayRef = {
+        detach: jasmine.createSpy('detach'),
+        hasAttached: hasAttachedSpy,
+      } as any;
+    });
+    it('calls detach on overlayRef with the correct value if hasAttached returns true', () => {
+      hasAttachedSpy.and.returnValue(true);
+      directive.hide();
+      expect(directive.overlayRef.detach).toHaveBeenCalledOnceWith();
+    });
+    it('does not call detach if hasAttached returns false', () => {
+      hasAttachedSpy.and.returnValue(false);
+      directive.hide();
+      expect(directive.overlayRef.detach).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('updateForConfigChanges', () => {
+    let changesSpy: jasmine.Spy;
+    const changes = {
+      config: {
+        previousValue: {
+          panelClass: ['old'],
+        },
+      },
+    };
+    beforeEach(() => {
+      spyOn(directive, 'updatePositionStrategy');
+      spyOn(directive, 'updateClasses');
+      spyOn(directive, 'updateSize');
+      spyOn(directive, 'updateBackdrop');
+      spyOn(directive, 'updateVisibility');
+      changesSpy = spyOn(directive, 'configChanged');
+    });
+    it('calls updatePosition once if position changed', () => {
+      changesSpy.and.returnValues(true, true, true, true);
+      directive.updateForConfigChanges(changes as any);
+      expect(directive.updatePositionStrategy).toHaveBeenCalledTimes(1);
+    });
+    it('calls updateClasses once if panelClass changed', () => {
+      changesSpy.and.returnValues(false, true, true, true);
+      directive.updateForConfigChanges(changes as any);
+      expect(directive.updateClasses).toHaveBeenCalledOnceWith(['old']);
+    });
+    it('calls updateSize once if size changed', () => {
+      changesSpy.and.returnValues(false, false, true, true);
+      directive.updateForConfigChanges(changes as any);
+      expect(directive.updateSize).toHaveBeenCalledTimes(1);
+    });
+    it('calls updateBackdrop once if hasBackdrop changed', () => {
+      changesSpy.and.returnValues(false, false, false, true);
+      directive.updateForConfigChanges(changes as any);
+      expect(directive.updateBackdrop).toHaveBeenCalledTimes(1);
+    });
+    it('calls updateVisibility once', () => {
+      changesSpy.and.returnValues(false, false, false, false);
+      directive.updateForConfigChanges('changes' as any);
+      expect(directive.updateVisibility).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('configChanged', () => {
+    let changesSpy: jasmine.Spy;
+    beforeEach(() => {
+      changesSpy = spyOn(NgOnChangesUtilities, 'inputObjectChanged');
+    });
+    it('calls objectOnNgChangesChanged once with the correct value', () => {
+      directive.configChanged('changes' as any, 'show');
+      expect(NgOnChangesUtilities.inputObjectChanged).toHaveBeenCalledOnceWith(
+        'changes' as any,
+        'config',
+        'show'
+      );
+    });
+    it('returns the correct value', () => {
+      changesSpy.and.returnValue(true);
+      expect(directive.configChanged('changes' as any, 'show')).toEqual(true);
+    });
+  });
+
+  describe('updatePosition', () => {
+    beforeEach(() => {
+      spyOn(directive, 'setPositionStrategy');
+      directive.positionStrategy = 'test strategy' as any;
+      directive.overlayRef = {
+        updatePositionStrategy: jasmine.createSpy('updatePositionStrategy'),
+      } as any;
+    });
+    it('calls getPositionStrategy once', () => {
+      directive.updatePositionStrategy();
+      expect(directive.setPositionStrategy).toHaveBeenCalledTimes(1);
+    });
+    it('calls updatePositionStrategy once with the correct value', () => {
+      directive.updatePositionStrategy();
+      expect(directive.overlayRef.updatePositionStrategy).toHaveBeenCalledWith(
+        'test strategy' as any
+      );
+    });
+  });
+
+  describe('updateClasses', () => {
+    beforeEach(() => {
+      directive.overlayRef = {
+        addPanelClass: jasmine.createSpy('addPanelClass'),
+        removePanelClass: jasmine.createSpy('removePanelClass'),
+      } as any;
+      directive.config = {
+        panelClass: ['two'],
+      } as any;
+    });
+    it('calls removePanelClass once with the correct value', () => {
+      directive.updateClasses(['old']);
+      expect(directive.overlayRef.removePanelClass).toHaveBeenCalledOnceWith([
+        'old',
+      ]);
+    });
+    it('calls addPanelClass once with the correct value', () => {
+      directive.updateClasses(['old']);
+      expect(directive.overlayRef.addPanelClass).toHaveBeenCalledOnceWith([
+        'two',
+      ]);
+    });
+  });
+
+  describe('updateSize', () => {
+    beforeEach(() => {
+      directive.config = {
+        size: 'size',
+      } as any;
+      directive.overlayRef = {
+        updateSize: jasmine.createSpy('updateSize'),
+      } as any;
+    });
+    it('calls updateSize on overlayRef with the correct value', () => {
+      directive.updateSize();
+      expect(directive.overlayRef.updateSize).toHaveBeenCalledOnceWith(
+        'size' as any
+      );
+    });
+  });
+
+  describe('updateBackdrop', () => {
+    beforeEach(() => {
+      spyOn(directive, 'destroyBackdropSubscription');
+      spyOn(directive, 'destroyOverlay');
+      spyOn(directive, 'createOverlayRef');
+      spyOn(directive, 'hide');
+    });
+    it('calls destroyBackdropSubscription once', () => {
+      directive.updateBackdrop();
+      expect(directive.destroyBackdropSubscription).toHaveBeenCalledTimes(1);
+    });
+    it('calls destroyOverlay once', () => {
+      directive.updateBackdrop();
+      expect(directive.destroyOverlay).toHaveBeenCalledTimes(1);
+    });
+    it('calls createOverlay once', () => {
+      directive.updateBackdrop();
+      expect(directive.createOverlayRef).toHaveBeenCalledTimes(1);
+    });
+    it('calls hide once', () => {
+      directive.updateBackdrop();
+      expect(directive.hide).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('ngOnDestroy', () => {
+    beforeEach(() => {
+      spyOn(directive, 'destroyOverlay');
+      spyOn(directive, 'destroyBackdropSubscription');
+      destroySpy.and.callThrough();
+    });
+    it('calls destroyOverlay', () => {
+      directive.ngOnDestroy();
+      expect(directive.destroyOverlay).toHaveBeenCalledTimes(1);
+    });
+    it('calls destroyBackdropSubscription', () => {
+      directive.ngOnDestroy();
+      expect(directive.destroyBackdropSubscription).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('destroyBackdropSubscription', () => {
+    beforeEach(() => {
+      spyOn(directive.backdropUnsubscribe, 'next');
+      spyOn(directive.backdropUnsubscribe, 'complete');
+    });
+    it('calls next once', () => {
+      directive.destroyBackdropSubscription();
+      expect(directive.backdropUnsubscribe.next).toHaveBeenCalledTimes(1);
+    });
+    it('calls complete once', () => {
+      directive.destroyBackdropSubscription();
+      expect(directive.backdropUnsubscribe.complete).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('destroyOverlay', () => {
+    beforeEach(() => {
+      directive.overlayRef = {
+        dispose: jasmine.createSpy('dispose'),
+      } as any;
+    });
+    it('calls dispose on overlayRef', () => {
+      directive.destroyOverlay();
+      expect(directive.overlayRef.dispose).toHaveBeenCalledTimes(1);
+    });
+  });
+});