Merge pull request #37 from FZJ-INM1-BDA/chore/removeNgxBootstrapDep

remove ngx-bootstrap dependency

README.md

@@ -7,7 +7,7 @@ Interactive Atlas Viewer is an frontend module wrapping around [nehuba](https://
 A live version of the Interactive Atlas Viewer is available at [https://interactive-viewer.apps.hbp.eu](https://interactive-viewer.apps.hbp.eu). This section is useful for developers who would like to develop this project.
 
 ### General information
-Interactive atlas viewer is built with [Angular (v6.0)](https://angular.io/), [Bootstrap (v4)](http://getbootstrap.com/), and [fontawesome icons](https://fontawesome.com/). Some other notable packages used are: [ngx-bootstrap](https://valor-software.com/ngx-bootstrap/) for UI and [ngrx/store](https://github.com/ngrx/platform) for state management. 
+Interactive atlas viewer is built with [Angular (v6.0)](https://angular.io/), [Bootstrap (v4)](http://getbootstrap.com/), and [fontawesome icons](https://fontawesome.com/). Some other notable packages used are [ngrx/store](https://github.com/ngrx/platform) for state management. 
 
 Releases newer than [v0.2.9](https://github.com/HumanBrainProject/interactive-viewer/tree/v0.2.9) also uses a nodejs backend, which uses [passportjs](http://www.passportjs.org/) for user authentication, [express](https://expressjs.com/) as a http framework.
 

docs/releases/v2.1.0.md

@@ -12,3 +12,7 @@
 
 - Fixed a bug where on parcellation load, the colour of the parcellation fails to load (#454, #462)
 - Fixed a bug where, URL state is no longer parsed as state properly (#461)
+
+## Under the hood stuff
+
+- Removed `ngx-bootstrap` as dependency

package.json

@@ -72,7 +72,6 @@
     "kg-dataset-previewer": "0.0.10",
     "lodash.merge": "^4.6.2",
     "mini-css-extract-plugin": "^0.8.0",
-    "ngx-bootstrap": "^5.3.2",
     "node-sass": "^4.12.0",
     "protractor": "^5.4.2",
     "raw-loader": "^0.5.1",

src/atlasViewer/atlasViewer.component.ts

@@ -28,7 +28,6 @@ import { AtlasViewerAPIServices } from "./atlasViewer.apiService.service";
 import { AtlasViewerConstantsServices, UNSUPPORTED_INTERVAL, UNSUPPORTED_PREVIEW } from "./atlasViewer.constantService.service";
 import { WidgetServices } from "./widgetUnit/widgetService.service";
 
-import { TabsetComponent } from "ngx-bootstrap/tabs";
 import { LocalFileService } from "src/services/localFile.service";
 import { LoggingService } from "src/services/logging.service";
 import { AGREE_COOKIE, AGREE_KG_TOS, SHOW_BOTTOM_SHEET, SHOW_KG_TOS } from "src/services/state/uiState.store";
@@ -76,8 +75,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
   @ViewChild(FixedMouseContextualContainerDirective) public rClContextualMenu: FixedMouseContextualContainerDirective
   @ViewChild(MouseHoverDirective) private mouseOverNehuba: MouseHoverDirective
 
-  @ViewChild('mobileMenuTabs') public mobileMenuTabs: TabsetComponent
-
   /**
    * required for styling of all child components
    */

src/atlasViewer/atlasViewer.style.css

@@ -61,10 +61,6 @@ mat-sidenav {
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 }
 
-.mobileMenuTabs {
-  margin: 40px 0 0 5px;
-}
-
 landmark-ui,
 region-menu
 {

src/atlasViewerExports/export.module.ts

@@ -3,7 +3,6 @@ import { createCustomElement } from '@angular/elements'
 import { FormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { BsDropdownModule } from "ngx-bootstrap/dropdown";
 import { ComponentsModule } from "../components/components.module";
 import { MarkdownDom } from '../components/markdown/markdown.component'
 import { PanelComponent } from "../components/panel/panel.component";
@@ -18,7 +17,6 @@ import { SampleBoxUnit } from "./sampleBox/sampleBox.component";
     BrowserAnimationsModule,
     FormsModule,
     ComponentsModule,
-    BsDropdownModule.forRoot(),
   ],
   declarations : [
     SampleBoxUnit,

src/components/components.module.ts

@@ -13,7 +13,6 @@ import { SafeHtmlPipe } from '../util/pipes/safeHtml.pipe'
 import { TreeSearchPipe } from '../util/pipes/treeSearch.pipe';
 import { ConfirmDialogComponent } from './confirmDialog/confirmDialog.component';
 import { DialogComponent } from './dialog/dialog.component';
-import { DropdownComponent } from './dropdown/dropdown.component';
 import { AppendSiblingFlagPipe } from './flatTree/appendSiblingFlag.pipe';
 import { ClusteringPipe } from './flatTree/clustering.pipe';
 import { FilterCollapsePipe } from './flatTree/filterCollapse.pipe';
@@ -46,7 +45,6 @@ import { TreeBaseDirective } from './tree/treeBase.directive';
     /* components */
     MarkdownDom,
     ReadmoreComponent,
-    DropdownComponent,
     TreeComponent,
     PanelComponent,
     PaginationComponent,
@@ -79,7 +77,6 @@ import { TreeBaseDirective } from './tree/treeBase.directive';
 
     MarkdownDom,
     ReadmoreComponent,
-    DropdownComponent,
     TreeComponent,
     PanelComponent,
     PaginationComponent,

src/components/dropdown/dropdown.animation.ts

-import { animate, state, style, transition, trigger } from "@angular/animations";
-
-export const dropdownAnimation = trigger('showState', [
-  state('show',
-    style({
-      opacity : '1.0',
-    }),
-  ),
-  state('hide',
-    style({
-      "opacity" : '0.0',
-      'pointer-events': 'none',
-    }),
-  ),
-  transition('show => hide', [
-    animate('230ms ease-in'),
-  ]),
-  transition('hide => show', [
-    animate('230ms ease-out'),
-  ]),
-])

src/components/dropdown/dropdown.component.spec.ts

-import { async, TestBed } from '@angular/core/testing'
-import {} from 'jasmine'
-import { AngularMaterialModule } from '../../ui/sharedModules/angularMaterial.module'
-import { HoverableBlockDirective } from '../hoverableBlock.directive'
-import { RadioList } from '../radiolist/radiolist.component'
-import { DropdownComponent } from './dropdown.component';
-
-describe('dropdown component', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        AngularMaterialModule,
-      ],
-      declarations : [
-        DropdownComponent,
-        HoverableBlockDirective,
-        RadioList,
-      ],
-    }).compileComponents()
-  }))
-  it('should create component', async(() => {
-
-    const fixture = TestBed.createComponent(DropdownComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }))
-})

src/components/dropdown/dropdown.component.ts

-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild } from "@angular/core";
-import { IExraBtnClickEvent, IExtraButton, IHasExtraButtons } from '../radiolist/radiolist.component'
-import { dropdownAnimation } from "./dropdown.animation";
-
-@Component({
-  selector : 'dropdown-component',
-  templateUrl : './dropdown.template.html',
-  styleUrls : [
-    `./dropdown.style.css`,
-  ],
-  animations: [
-    dropdownAnimation,
-  ],
-  changeDetection : ChangeDetectionStrategy.OnPush,
-})
-
-export class DropdownComponent {
-
-  @Input() public activeDisplayBtns: IExtraButton[] = []
-  @Output() public activeDisplayBtnClicked: EventEmitter<{extraBtn: IExtraButton, event: MouseEvent}> = new EventEmitter()
-
-  @Input() public inputArray: IHasExtraButtons[] = []
-  @Input() public selectedItem: any | null = null
-  @Input() public checkSelected: (selectedItem: any, item: any) => boolean = (si, i) => si === i
-
-  @Input() public listDisplay: (obj: any) => string = (obj) => obj.name
-  @Input() public activeDisplay: (obj: any|null) => string = (obj) => obj ? obj.name : `Please select an item.`
-
-  @Output() public itemSelected: EventEmitter<any> = new EventEmitter()
-  @Output() public extraBtnClicked: EventEmitter<IExraBtnClickEvent> = new EventEmitter()
-
-  @ViewChild('dropdownToggle', {read: ElementRef}) public dropdownToggle: ElementRef
-
-  public openState: boolean = false
-
-  @HostListener('document:click', ['$event'])
-  public close(event: MouseEvent) {
-    const contains = this.dropdownToggle.nativeElement.contains(event.target)
-    if (contains) {
-      this.openState = !this.openState
-    } else {
-      this.openState = false;
-    }
-  }
-
-  public handleActiveDisplayBtnClick(btn: IExtraButton, event: MouseEvent) {
-    this.activeDisplayBtnClicked.emit({
-      extraBtn: btn,
-      event,
-    })
-  }
-}

src/components/dropdown/dropdown.style.css

-:host
-{
-  position:relative;
-  display:block;
-}
-
-span[dropdownToggle]:hover
-{
-  cursor:default;
-}
-span[dropdownToggle]
-{
-  display:block;
-  text-align:left;
-}
-span[dropdownToggle]
-{
-  padding:0.5em 0.8em;
-  border-radius:0px;
-  cursor:default;
-  white-space: nowrap;
-}
-
-:host-context([darktheme="false"]) span[dropdownToggle]
-{
-  border:none;
-  box-shadow: 0 4px 6px 0 rgba(30,30,30,0.05);
-  background-color:rgba(255,255,255,0.8);
-}
-
-:host-context([darktheme="false"]) span[dropdownToggle]:hover
-{
-  box-shadow:rgba(30,30,30,0.1);
-  background-color:rgba(250,250,250,0.99);
-}
-
-
-:host-context([darktheme="true"]) span[dropdownToggle]
-{
-  border:none;
-  box-shadow: 0 4px 6px 0 rgba(0,0,0,0.05);
-  background-color:rgba(30,30,30,0.8);
-  color:rgba(255,255,255,0.8);
-}
-
-:host-context([darktheme="true"]) span[dropdownToggle]:hover
-{
-  box-shadow:rgba(0,0,0,0.1);
-  background-color:rgba(30,30,30,0.99);
-}
-
-radio-list
-{
-  width:100%;
-  height:0;
-  overflow-x:hidden;
-  display:block;
-}
-
-
-:host-context([isMobile="true"]) .dropdownTitle {
-  border: 1px solid !important;
-}
-
-:host-context([isMobile="true"]) .dropdownTitleOpen {
-  border: solid !important;
-  border-width: 1px 1px 0 1px !important;
-}
-
-:host-context([darktheme="true"][isMobile="true"]) .dropdownTitle {
-  border-color: white !important;
-}
-
-:host-context([darktheme="false"][isMobile="true"]) .dropdownTitle {
-  border-color: black !important;
-}
\ No newline at end of file

src/components/dropdown/dropdown.template.html

-<!-- TODO remove dependency on ismobile -->
-<div class="d-flex flex-column">
-  <div class="d-flex">
-
-    <span
-      class="btn btn-default dropdownTitle flex-grow-1 m-auto"
-      [innerHTML]="activeDisplay(selectedItem)"
-      [hoverable]="{translateY:-2}"
-      #dropdownToggle
-      dropdownToggle
-      [ngClass]="openState ? 'dropdownTitleOpen' : 'dropdownTitle'">
-    </span>
-    
-    <span
-      *ngFor="let btn of activeDisplayBtns"
-      class="btn btn-default"
-      (click)="handleActiveDisplayBtnClick(btn, $event)"
-      [hoverable]="{translateY:-1}"
-      dropdownToggle>
-      <div class="d-flex align-items-center">
-        <small [ngClass]="btn.faIcon"></small>
-      </div>
-    </span>
-  </div>
-</div>
-
-<!-- needed to ensure dropdown width matches  -->
-<ul class="m-0 h-0 overflow-hidden">
-  <li *ngFor="let item of inputArray">
-    {{ listDisplay(item) }}
-  </li>
-</ul>
-<radio-list
-  [ulClass]="'dropdown-menu shadow'"
-  (itemSelected)="itemSelected.emit($event)"
-  [listDisplay]="listDisplay"
-  [checkSelected]="checkSelected"
-  [selectedItem]="selectedItem"
-  [inputArray]="inputArray"
-  [@showState]="openState ? 'show' : 'hide'"
-  (extraBtnClicked)="extraBtnClicked.emit($event)">
-</radio-list>

src/main.module.ts

@@ -14,8 +14,6 @@ import { GetNamesPipe } from "./util/pipes/getNames.pipe";
 
 import {HttpClientModule} from "@angular/common/http";
 import { EffectsModule } from "@ngrx/effects";
-import { TabsModule } from 'ngx-bootstrap/tabs'
-import { TooltipModule } from "ngx-bootstrap/tooltip";
 import {CaptureClickListenerDirective} from "src/util/directives/captureClickListener.directive";
 import { AtlasViewerAPIServices } from "./atlasViewer/atlasViewer.apiService.service";
 import { AtlasWorkerService } from "./atlasViewer/atlasViewer.workerService.service";
@@ -68,8 +66,6 @@ import {TemplateCoordinatesTransformation} from "src/services/templateCoordinate
     AngularMaterialModule,
     UtilModule,
 
-    TooltipModule.forRoot(),
-    TabsModule.forRoot(),
     EffectsModule.forRoot([
       DataBrowserUseEffect,
       UseEffects,

src/res/css/extra_styles.css

@@ -70,16 +70,6 @@ ul#statusContainer
   /* width:25em; */
   max-width:999999px;
 }
-.inputSearchContainer .popover-arrow
-{
-  display:none;
-}
-
-.inputSearchContainer .popover-content.popover-body
-{
-  padding:0;
-  max-width:999999px;
-}
 
 .mute-text
 {
@@ -268,26 +258,6 @@ markdown-dom pre code
   color: rgba(255, 255, 255, 1.0);
 }
 
-.darktheme.popover
-{
-  background-color:rgba(0, 0, 0, 0.8);
-}
-
-.darktheme.popover .popover-body
-{
-  color:white;
-}
-
-.darktheme.popover.popover-bottom>.arrow::after
-{
-  border-bottom-color: rgba(0, 0, 0, 0.8);
-}
-
-.darktheme.popover.popover-right>.arrow::after
-{
-  border-right-color: rgba(0, 0, 0, 0.8);
-}
-
 .r-90
 {
   transform: rotate(90deg)!important;
@@ -476,21 +446,6 @@ markdown-dom pre code
   top: 0!important;
 }
 
-/* TODO fix hack */
-/* ngx boostrap default z index for modal-container is 1050, which is higher than material tooltip 1000 */
-/* when migration away from ngx bootstrap is complete, remove these classes */
-
-modal-container.modal
-{
-  z-index: 950;
-}
-
-bs-modal-backdrop.modal-backdrop
-{
-  z-index: 940;
-}
-
-
 .outline-none {
     outline: none;
 }

src/ui/databrowserModule/databrowser.module.ts

 import { CommonModule } from "@angular/common";
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { FormsModule } from "@angular/forms";
-import { PopoverModule } from "ngx-bootstrap/popover";
-import { TooltipModule } from "ngx-bootstrap/tooltip";
 import { ComponentsModule } from "src/components/components.module";
 import { AngularMaterialModule } from 'src/ui/sharedModules/angularMaterial.module'
 import { DoiParserPipe } from "src/util/pipes/doiPipe.pipe";
@@ -37,8 +35,6 @@ import { DatasetPreviewList, UnavailableTooltip } from "./singleDataset/datasetP
     FormsModule,
     UtilModule,
     AngularMaterialModule,
-    TooltipModule.forRoot(),
-    PopoverModule.forRoot(),
   ],
   declarations: [
     DataBrowser,