commonjs && esnext

.gitignore

@@ -6,3 +6,5 @@ build
 # intellij
 .idea
 *.iml
+/lib/
+/tsconfig.tsbuildinfo

package.json

@@ -4,23 +4,21 @@
   "description": "RCSB 1D Feature Viewer",
   "main": "build/RcsbFv.js",
   "files": [
-    "build/RcsbFv.js",
-    "build/*ts",
-    "build/**/*ts",
-    "build/**/**/*ts",
-    "build/**/**/**/*ts",
+    "lib/",
     "build/rcsb-saguaro.js"
   ],
   "scripts": {
     "devServer": "webpack-dev-server --config webpack.server.dev.config.js",
     "build": "webpack --config ./webpack.config.js",
-    "buildApp": "npm run build",
+    "buildApp": "npm run build-tsc && npm run build-commonjs && npm run build",
     "buildAll": "npm run buildApp && npm run buildAllDoc",
     "buildDoc": "typedoc --excludeExternals --externalPattern \"**/node_modules/**\" ./src/RcsbFv.ts && sed -i '' '/---/d' docs/index.html",
     "cpExamples": "ncp examples docs/examples",
     "buildAllDoc": "npm run buildDoc && npm run cpExamples",
     "packApp": "npm run buildApp && npm pack",
     "publishApp": "npm publish --tag development",
+    "build-tsc": "tsc --incremental",
+    "build-commonjs": "tsc --build tsconfig.commonjs.json --incremental",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

src/RcsbBoard/RcsbBoard.ts

@@ -1,4 +1,4 @@
-import {zoom, ZoomBehavior, ZoomedElementBaseType, zoomIdentity, ZoomTransform} from "d3-zoom";
+import {zoom, ZoomBehavior, zoomIdentity, ZoomTransform} from "d3-zoom";
 
 import {
     MainGConfInterface,
@@ -69,7 +69,7 @@ export class RcsbBoard {
     private upToDate: boolean = true;
     private isIntersecting: boolean = true;
 
-    private zoomEventHandler:ZoomBehavior<ZoomedElementBaseType, any> = zoom();
+    private zoomEventHandler:ZoomBehavior<Element, any> = zoom();
 
     private mouseoverCallBack: Array<()=>void> = new Array<()=> void>();
     private mouseoutCallBack: Array<()=>void> = new Array<()=> void>();
@@ -276,7 +276,7 @@ export class RcsbBoard {
 
     private startTracks(): void{
     	this.tracks.forEach(track=>{
-            track.init(this._width, this._xScale);
+            track.init(this._xScale);
         });
     	this.setBoardHeight();
         this.tracks.forEach((track)=> {
@@ -285,11 +285,11 @@ export class RcsbBoard {
 
     }
 
-    private updateBoard(): void{
+    /*private updateBoard(): void{
         this.tracks.forEach((track)=> {
             track.update();
         })
-    }
+    }*/
 
     public reset(): void{
         this.tracks = new Array<RcsbDisplayInterface>();

src/RcsbBoard/RcsbD3/RcsbD3DisplayManager/RcsbD3BondManager.ts

@@ -1,8 +1,6 @@
 import {Selection, BaseType, select} from "d3-selection";
-import {ScaleLinear} from "d3-scale";
 import {RcsbD3Constants} from "../RcsbD3Constants";
 import {RcsbFvTrackDataElementInterface} from "../../../RcsbDataManager/RcsbDataManager";
-import {LineDecoratorInterface} from "./RcsbD3BlockManager";
 import {RcsbScaleInterface} from "../RcsbD3ScaleFactory";
 
 export interface PlotBondInterface {

src/RcsbBoard/RcsbD3/RcsbD3DisplayManager/RcsbD3LineManager.ts

@@ -2,7 +2,6 @@ import {Selection} from "d3-selection";
 import {Line} from "d3-shape";
 import {RcsbD3Constants} from "../RcsbD3Constants";
 import {RcsbFvTrackDataElementInterface} from "../../../RcsbDataManager/RcsbDataManager";
-import {ClearAreaInterface} from "./RcsbD3AreaManager";
 
 export interface PlotLineInterface {
     points: RcsbFvTrackDataElementInterface[];

src/RcsbBoard/RcsbD3/RcsbD3DisplayManager/RcsbD3PinManager.ts

@@ -1,5 +1,4 @@
 import {Selection, BaseType, select} from "d3-selection";
-import {ScaleLinear} from "d3-scale";
 import {RcsbD3Constants} from "../RcsbD3Constants";
 import {RcsbFvTrackDataElementInterface} from "../../../RcsbDataManager/RcsbDataManager";
 import {RcsbScaleInterface} from "../RcsbD3ScaleFactory";

src/RcsbBoard/RcsbD3/RcsbD3Manager.ts

@@ -71,7 +71,7 @@ export class RcsbD3Manager {
 
     private _dom: Selection<HTMLElement | null, any, null, undefined>;
     private _svg: Selection<SVGSVGElement, any, null, undefined>;
-    private _zoomG: Selection<SVGGElement, any, null, undefined>;
+    private _zoomG: Selection<Element, any, null, undefined>;
     private _svgG: Selection<SVGGElement, any, null, undefined>;
     private _pane: Selection<SVGRectElement, any, null, undefined>;
     private _trackHeightPosition: number = 0;
@@ -81,7 +81,7 @@ export class RcsbD3Manager {
         return this._svgG;
     }
 
-    zoomG(): Selection<SVGGElement, any, null, undefined> {
+    zoomG(): Selection<Element, any, null, undefined> {
         return this._zoomG;
     }
 
@@ -119,7 +119,7 @@ export class RcsbD3Manager {
     }
 
     addMainG(config: MainGConfInterface): void {
-        this._zoomG = this._svg.append<SVGGElement>(RcsbD3Constants.G);
+        this._zoomG = this._svg.append<Element>(RcsbD3Constants.G);
         this._svgG = this._zoomG.attr(RcsbD3Constants.CLASS, config.masterClass)
             .append<SVGGElement>(RcsbD3Constants.G)
             .attr(RcsbD3Constants.CLASS, config.innerClass)

src/RcsbBoard/RcsbDisplay/RcsbAbstractDisplay.ts

@@ -13,16 +13,15 @@ import {RcsbTooltipManager} from "../RcsbTooltip/RcsbTooltipManager";
 import {EventType} from "../../RcsbFv/RcsbFvContextManager/RcsbFvContextManager";
 import {RcsbDisplayInterface} from "./RcsbDisplayInterface";
 
-export abstract class RcsbAbstractDisplay extends RcsbAbstractTrack implements RcsbDisplayInterface{
+export abstract class RcsbAbstractDisplay extends RcsbAbstractTrack implements RcsbDisplayInterface {
 
     protected _displayColor: string  | RcsbFvColorGradient = "#FF6666";
-    private elementClickCallBack: (d?:RcsbFvTrackDataElementInterface, e?:MouseEvent)=>void;
-    private elementEnterCallBack: (d?:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void;
-    private elementLeaveCallBack: (d?:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void;
-    private highlightEnterElement: (d?:RcsbFvTrackDataElementInterface)=>void;
-    private highlightLeaveElement: (d?:RcsbFvTrackDataElementInterface)=>void;
+    private elementClickCallBack: (d:RcsbFvTrackDataElementInterface, e?:MouseEvent)=>void;
+    private elementEnterCallBack: (d:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void;
+    private elementLeaveCallBack: (d:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void;
+    private highlightEnterElement: (d:RcsbFvTrackDataElementInterface)=>void;
+    private highlightLeaveElement: (d:RcsbFvTrackDataElementInterface)=>void;
     protected includeTooltip: boolean = true;
-    private readonly boardId: string;
     private readonly trackId: string;
     protected tooltipManager: RcsbTooltipManager;
     protected minRatio: number = 0;
@@ -33,28 +32,27 @@ export abstract class RcsbAbstractDisplay extends RcsbAbstractTrack implements R
 
     constructor(boardId: string, trackId: string) {
         super();
-        this.boardId = boardId;
         this.trackId = trackId;
         this.tooltipManager = new RcsbTooltipManager(boardId);
     }
 
-    setElementClickCallBack(f:(d?:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void): void{
+    setElementClickCallBack(f:(d:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void): void{
         this.elementClickCallBack = f;
     }
 
-    getElementClickCallBack(): (d?:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void{
+    getElementClickCallBack(): (d:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void{
         return this.elementClickCallBack;
     }
 
-    setElementEnterCallBack(f:(d?:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void): void{
+    setElementEnterCallBack(f:(d:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void): void{
         this.elementEnterCallBack = f;
     }
 
-    getElementEnterCallBack(): (d?:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void{
+    getElementEnterCallBack(): (d:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void{
         return this.elementEnterCallBack;
     }
 
-    setElementLeaveCallBack(f:(d?:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void): void{
+    setElementLeaveCallBack(f:(d:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void): void{
         this.elementLeaveCallBack = f;
     }
 
@@ -82,7 +80,7 @@ export abstract class RcsbAbstractDisplay extends RcsbAbstractTrack implements R
         this.g.selectAll("."+classes.rcsbElement).remove();
     }
 
-    public setHighlightHoverElement(enter: (d?:RcsbFvTrackDataElementInterface)=>void, leave: (d?:RcsbFvTrackDataElementInterface)=>void){
+    public setHighlightHoverElement(enter: (d:RcsbFvTrackDataElementInterface)=>void, leave: (d:RcsbFvTrackDataElementInterface)=>void){
         this.highlightEnterElement = enter;
         this.highlightLeaveElement = leave;
     }

src/RcsbBoard/RcsbDisplay/RcsbAbstractTrack.ts

@@ -20,7 +20,6 @@ export abstract class RcsbAbstractTrack {
     protected contextManager: RcsbFvContextManager;
     private _bgColor: string = "#FFFFFF";
     private _height: number;
-    private _width: number;
     private _data: RcsbFvTrackData;
     protected updateDataOnMove:(d:LocationViewInterface)=>Promise<RcsbFvTrackData>;
     protected xScale: RcsbScaleInterface;
@@ -46,8 +45,7 @@ export abstract class RcsbAbstractTrack {
         return this._bgColor;
     }
 
-    init(width: number, scale:RcsbScaleInterface, compositeFlag?: boolean, compositeHeight?: number): void{
-        this._width = width;
+    init(scale:RcsbScaleInterface, compositeFlag?: boolean, compositeHeight?: number): void{
         this.xScale = scale;
     	if(this.g != null) {
             this.g.remove();
@@ -109,7 +107,7 @@ export abstract class RcsbAbstractTrack {
     highlightRegion(d:Array<RcsbFvTrackDataElementInterface>|null, options?:{color?:string, rectClass?: string;}): void {
         const height: number = this._height;
         const xScale: RcsbScaleInterface = this.xScale;
-        if(typeof(height)==="number" && d!= null ) {
+        if(d != null ) {
             const highlightRegConfig: HighlightRegionInterface = {
                 trackG: this.g,
                 height: height,

src/RcsbBoard/RcsbDisplay/RcsbAreaDisplay.ts

@@ -1,7 +1,6 @@
 import {RcsbLineDisplay} from "./RcsbLineDisplay";
 import {area, Area, curveStep, curveCardinal, curveBasis, curveLinear} from "d3-shape";
 import {InterpolationTypes} from "../../RcsbFv/RcsbFvConfig/RcsbFvDefaultConfigValues";
-import {BaseType, Selection} from "d3-selection";
 import {
     MoveAreaInterface,
     PlotAreaInterface,

src/RcsbBoard/RcsbDisplay/RcsbAxisDisplay.ts

@@ -1,12 +1,12 @@
 import {RcsbAbstractDisplay} from "./RcsbAbstractDisplay";
-import {Axis, AxisDomain, axisBottom} from "d3-axis";
+import {Axis, axisBottom} from "d3-axis";
 import {format} from "d3-format";
 import classes from "../scss/RcsbBoard.module.scss";
 import {RcsbD3Constants} from "../RcsbD3/RcsbD3Constants";
 
 export class RcsbAxisDisplay extends RcsbAbstractDisplay {
 
-    private xAxis: Axis<AxisDomain>;
+    private xAxis: Axis<number>;
     private readonly length: number|undefined;
 
     constructor(boardId: string, trackId:string, length?:number) {
@@ -21,7 +21,7 @@ export class RcsbAxisDisplay extends RcsbAbstractDisplay {
 
     update(){
         if(this.xAxis == null) {
-            this.xAxis = axisBottom<AxisDomain>(this.xScale.getScale());
+            this.xAxis = axisBottom<number>(this.xScale.getScale());
             if(this.length != null && this.length < 9)
                 this.xAxis.tickValues( Array(this.length).fill(0).map((v,i)=>{return (i+1)}) ).tickFormat(format("d"));
             this.g.classed(classes.rcsbAxis, true)

src/RcsbBoard/RcsbDisplay/RcsbCompositeDisplay.ts

@@ -1,5 +1,4 @@
 import {RcsbDisplayInterface} from "./RcsbDisplayInterface";
-import {ScaleLinear} from "d3-scale";
 import {LocationViewInterface} from "../RcsbBoard";
 import {RcsbD3Manager} from "../RcsbD3/RcsbD3Manager";
 import {
@@ -23,9 +22,9 @@ export class RcsbCompositeDisplay implements RcsbDisplayInterface{
     private _bgColor: string;
     private compositeHeight: number;
 
-    setElementClickCallBack: (f:(d?:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void)=>void;
-    setElementEnterCallBack: (f:(d?:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void)=>void;
-    setElementLeaveCallBack: (f:(d?:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void)=>void;
+    setElementClickCallBack: (f:(d:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void)=>void;
+    setElementEnterCallBack: (f:(d:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void)=>void;
+    setElementLeaveCallBack: (f:(d:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void)=>void;
     setUpdateDataOnMove: (f:(d:LocationViewInterface)=>Promise<RcsbFvTrackData>)=>void;
     setTooltip: (flag: boolean)=>void;
     setMinRatio: (ratio: number) => void;
@@ -68,9 +67,9 @@ export class RcsbCompositeDisplay implements RcsbDisplayInterface{
         });
     }
 
-    init(width: number, scale:RcsbScaleInterface): void{
+    init(scale:RcsbScaleInterface): void{
         this.innerDisplays.forEach((de)=>{
-            de.display.init(width, scale, true, this.compositeHeight);
+            de.display.init(scale, true, this.compositeHeight);
         });
     }
 
@@ -114,7 +113,7 @@ export class RcsbCompositeDisplay implements RcsbDisplayInterface{
         });
     }
 
-    setHighlightHoverElement(f: (d?:RcsbFvTrackDataElementInterface)=>void, g: (d?:RcsbFvTrackDataElementInterface)=>void): void{
+    setHighlightHoverElement(f: (d:RcsbFvTrackDataElementInterface)=>void, g: (d:RcsbFvTrackDataElementInterface)=>void): void{
         this.innerDisplays.forEach(de=>{
             de.display.setHighlightHoverElement(f,g);
         })
@@ -153,7 +152,7 @@ export class RcsbCompositeDisplay implements RcsbDisplayInterface{
         return this._data;
     }
 
-    highlightRegion(d:Array<RcsbFvTrackDataElementInterface>, options?:{color?:string, rectClass?: string;}): void {
+    highlightRegion(d:Array<RcsbFvTrackDataElementInterface> | null, options?:{color?:string, rectClass?: string;}): void {
         if(this.innerDisplays.length > 0 ){
             this.innerDisplays[0].display.highlightRegion(d,options);
         }

src/RcsbBoard/RcsbDisplay/RcsbDisplayInterface.ts

@@ -14,7 +14,7 @@ export interface RcsbDisplayInterface {
     //RcsbAbstractTrack
     height: (h?: number) => number;
     trackColor: (c?: string) => string;
-    init: (width: number, scale:RcsbScaleInterface, compositeFlag?: boolean, compositeHeight?: number) => void;
+    init: (scale:RcsbScaleInterface, compositeFlag?: boolean, compositeHeight?: number) => void;
     data: (d: RcsbFvTrackData | RcsbFvTrackDataMap) => RcsbFvTrackData | RcsbFvTrackDataMap;
     setUpdateDataOnMove:( f:(d:LocationViewInterface)=>Promise<RcsbFvTrackData> )=> void;
     setBoardHighlight: (f:(d:RcsbFvTrackDataElementInterface, operation:'set'|'add', mode:'select'|'hover', propFlag?: boolean) => void) => void;
@@ -30,10 +30,10 @@ export interface RcsbDisplayInterface {
     update: (compKey?: string) => void;
     displayEmpty: () => void;
     move: ()=> void;
-    setElementClickCallBack: (f:(d?:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void)=>void;
-    setElementEnterCallBack: (f:(d?:RcsbFvTrackDataElementInterface)=>void, e?: MouseEvent)=>void;
-    setElementLeaveCallBack: (f:(d?:RcsbFvTrackDataElementInterface)=>void, e?: MouseEvent)=>void;
-    setHighlightHoverElement: (f: (d?:RcsbFvTrackDataElementInterface)=>void, g: (d?:RcsbFvTrackDataElementInterface)=>void)=>void;
+    setElementClickCallBack: (f:(d:RcsbFvTrackDataElementInterface, e?: MouseEvent)=>void)=>void;
+    setElementEnterCallBack: (f:(d:RcsbFvTrackDataElementInterface)=>void, e?: MouseEvent)=>void;
+    setElementLeaveCallBack: (f:(d:RcsbFvTrackDataElementInterface)=>void, e?: MouseEvent)=>void;
+    setHighlightHoverElement: (f: (d:RcsbFvTrackDataElementInterface)=>void, g: (d:RcsbFvTrackDataElementInterface)=>void)=>void;
     setTooltip: (flag: boolean)=>void;
     setMinRatio: (ratio: number) => void;
     setSelectDataInRange: (flag: boolean) => void;

src/RcsbBoard/RcsbDisplay/RcsbLineDisplay.ts

@@ -1,5 +1,5 @@
 import {RcsbAbstractDisplay} from "./RcsbAbstractDisplay";
-import {Selection, BaseType, pointer, ContainerElement} from "d3-selection";
+import {pointer, ContainerElement} from "d3-selection";
 import {
     MoveLineInterface,
     PlotLineInterface,

src/RcsbBoard/RcsbDisplay/RcsbVlineDisplay.ts

@@ -1,6 +1,5 @@
 import {RcsbAbstractDisplay} from "./RcsbAbstractDisplay";
 import {Selection, BaseType} from "d3-selection";
-import {RcsbDisplayInterface} from "./RcsbDisplayInterface";
 import {
     MoveVlineInterface,
     PlotVlineInterface,

src/RcsbBoard/RcsbTooltip/RcsbTooltipManager.ts

@@ -5,7 +5,6 @@ import {computePosition, detectOverflow} from "@floating-ui/dom";
 export class RcsbTooltipManager {
 
     private readonly boardId: string;
-    private readonly divHeight:number = 25;
 
     private tooltipDiv: HTMLDivElement;
     private tooltipDescriptionDiv: HTMLDivElement;
@@ -163,10 +162,6 @@ export class RcsbTooltipManager {
         this.tooltipDescriptionDiv.style.visibility = "hidden";
     }
 
-    private static capitalizeFirstLetter(string: string): string {
-        return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
-    }
-
     private static bNode(): HTMLSpanElement{
         const b:HTMLSpanElement = document.createElement<"span">("span");
         b.append(" | ");

src/RcsbFv/RcsbFv.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import {createRoot, Root} from "react-dom/client";
 import {RcsbFvBoard, RcsbFvBoardFullConfigInterface} from "./RcsbFvBoard/RcsbFvBoard";
 import {

src/RcsbFv/RcsbFvBoard/Components/BoardProgress.tsx

@@ -4,8 +4,7 @@ import classes from "../../RcsbFvStyles/RcsbFvRow.module.scss";
 import {RcsbFvDefaultConfigValues} from "../../RcsbFvConfig/RcsbFvDefaultConfigValues";
 import {RcsbFvBoardConfigInterface, RcsbFvRowConfigInterface} from "../../RcsbFvConfig/RcsbFvConfigInterface";
 import {Subscription} from "rxjs";
-import {EventType, RcsbFvContextManager, RowReadyInterface} from "../../RcsbFvContextManager/RcsbFvContextManager";
-import {RowStatusMap} from "../Utils/RowStatusMap";
+import {EventType, RcsbFvContextManager} from "../../RcsbFvContextManager/RcsbFvContextManager";
 import {computePosition, detectOverflow} from "@floating-ui/dom";
 
 interface BoardProgressInterface {
@@ -53,7 +52,7 @@ export class BoardProgress extends React.Component <BoardProgressInterface> {
     }
 
     /**Row Track Board Ready Event
-     * @param rowData
+     * @param fraction
      * */
     private rowReady(fraction: number):void{
         if(fraction  >= 100){

src/RcsbFv/RcsbFvBoard/RcsbFvBoard.tsx

@@ -100,6 +100,7 @@ export class RcsbFvBoard extends React.Component <RcsbFvBoardInterface, RcsbFvBo
     }
 
     componentWillUnmount(): void {
+        this.subscription.unsubscribe();
         this.props.contextManager.unsubscribeAll();
     }