Restructure source folder.

index.html

@@ -35,19 +35,19 @@
     <canvas id="renderCanvas"></canvas>
     <script>
       var vis = new Baby.Plots("renderCanvas", {});
-      // vis.fromJSON(surfaceData);
+      vis.fromJSON(plot);
       // vis.turntable = true;
-      vis.addMeshStream(
-        "https://cdn.glitch.com/",
-        "b12df82c-ed15-473a-b9aa-f1ccd97600ac%2FEat_",
-        ".glb?v=1610559236379",
-        2,
-        101,
-        100,
-        {
-          meshRotation: [Math.PI /2, 0, 0]
-        }
-      )
+      // vis.addMeshStream(
+      //   "https://cdn.glitch.com/",
+      //   "b12df82c-ed15-473a-b9aa-f1ccd97600ac%2FEat_",
+      //   ".glb?v=1610559236379",
+      //   2,
+      //   101,
+      //   100,
+      //   {
+      //     meshRotation: [Math.PI /2, 0, 0]
+      //   }
+      // )
       vis.doRender();
       // vis.createButtons("label");
       window.onresize = function () {

babyplots.ts → src/babyplots.ts

@@ -112,7 +112,7 @@ import { v4 as uuidv4 } from "uuid";
 
 const axios = require('axios').default;
 
-import { AnnotationManager } from "./Label";
+import { AnnotationManager } from "./utils/Label";
 
 /**
  * Interface for object containing information about axis setup.
@@ -134,7 +134,7 @@ export interface AxisData {
     rownames: string[];
 }
 
-import { Axes } from "./Axes";
+import { Axes } from "./utils/Axes";
 
 export interface shapeLegendData {
     title: string;
@@ -297,15 +297,15 @@ export function getUniqueVals(source: string[]): string[] {
     return result;
 }
 
-import { ImgStack } from "./ImgStack";
-import { ShapeCloud } from "./ShapeCloud";
-import { PointCloud } from "./PointCloud";
-import { Surface } from "./Surface";
-import { HeatMap } from "./HeatMap";
-import { MeshStream } from "./MeshStream";
+import { ImgStack } from "./plotTypes/ImgStack";
+import { ShapeCloud } from "./plotTypes/ShapeCloud";
+import { PointCloud } from "./plotTypes/PointCloud";
+import { Surface } from "./plotTypes/Surface";
+import { HeatMap } from "./plotTypes/HeatMap";
+import { MeshStream } from "./plotTypes/MeshStream";
 import { BoundingBox } from "@babylonjs/core/Culling/boundingBox";
-import { styleText } from "./styleText";
-import { buttonSVGs, legendSVGs } from "./SVGs";
+import { styleText } from "./utils/styleText";
+import { buttonSVGs, legendSVGs } from "./utils/SVGs";
 import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
 
 export const PLOTTYPES = {

HeatMap.d.ts → src/plotTypes/HeatMap.d.ts

@@ -1,5 +1,5 @@
 import { Scene } from "@babylonjs/core/scene";
-import { CoordinatePlot, LegendData } from "./babyplots";
+import { CoordinatePlot, LegendData } from "../babyplots";
 export declare class HeatMap extends CoordinatePlot {
     constructor(scene: Scene, coordinates: number[][], colorVar: string[], size: number, legendData: LegendData, xScale?: number, yScale?: number, zScale?: number, name?: string);
     private _createHeatMap;

HeatMap.ts → src/plotTypes/HeatMap.ts

@@ -23,7 +23,7 @@ import { Color3, Vector3 } from "@babylonjs/core/Maths/math";
 import { BoxBuilder } from "@babylonjs/core/Meshes/Builders/boxBuilder";
 import { PlaneBuilder } from "@babylonjs/core/Meshes/Builders/planeBuilder";
 import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
-import { CoordinatePlot, LegendData} from "./babyplots";
+import { CoordinatePlot, LegendData} from "../babyplots";
 
 export class HeatMap extends CoordinatePlot {
     constructor(

ImgStack.d.ts → src/plotTypes/ImgStack.d.ts

@@ -1,5 +1,5 @@
 import { Scene } from "@babylonjs/core/scene";
-import { Plot, LegendData } from "./babyplots";
+import { Plot, LegendData } from "../babyplots";
 export declare class ImgStack extends Plot {
     private _backgroundColor;
     private _intensityMode;

ImgStack.ts → src/plotTypes/ImgStack.ts

@@ -22,7 +22,7 @@ import { Mesh } from "@babylonjs/core/Meshes/mesh";
 import { Color3 } from "@babylonjs/core/Maths/math";
 import { VertexData } from "@babylonjs/core/Meshes/mesh.vertexData";
 import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
-import { Plot, LegendData } from "./babyplots";
+import { Plot, LegendData } from "../babyplots";
 import chroma from "chroma-js";
 import { Size } from "babylonjs";
 

MeshStream.d.ts → src/plotTypes/MeshStream.d.ts

@@ -1,18 +1,21 @@
 import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
 import { AssetContainer } from "@babylonjs/core/assetContainer";
 import { Scene } from "@babylonjs/core/scene";
-import { LegendData, Plot } from "./babyplots";
+import { LegendData, Plot } from "../babyplots";
 import { Vector3 } from "@babylonjs/core/Maths/math";
 import "@babylonjs/loaders/glTF";
 export declare class MeshStream extends Plot {
     private _rootUrl;
     private _filenames;
-    private _allLoaded;
-    private _frameIndex;
     private _prevTime;
     private _containers;
     private _camera;
     private _rotation;
+    allLoaded: boolean;
+    frameIndex: number;
+    loading: boolean;
+    frameTotal: number;
+    playing: boolean;
     frameDelay: number;
     worldextends: {
         min: Vector3;

MeshStream.ts → src/plotTypes/MeshStream.ts

@@ -21,24 +21,26 @@ import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
 import { AssetContainer } from "@babylonjs/core/assetContainer";
 import { Scene } from "@babylonjs/core/scene";
 import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
-import { LegendData, Plot } from "./babyplots";
+import { LegendData, Plot } from "../babyplots";
 import { Axis, Color3, Space, Vector3 } from "@babylonjs/core/Maths/math";
 
 import "@babylonjs/loaders/glTF";
 import { FramingBehavior } from "@babylonjs/core/Behaviors/Cameras/framingBehavior";
-import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
 
 
 export class MeshStream extends Plot {
     private _rootUrl: string;
     private _filenames: string[] = [];
-    private _allLoaded: boolean = false;
-    private _frameIndex: number = 0;
     private _prevTime: number = performance.now();
     private _containers: AssetContainer[] = [];
     private _camera: ArcRotateCamera;
     private _rotation: number[];
-
+
+    allLoaded: boolean = false;
+    frameIndex: number = 0;
+    loading: boolean = true;
+    frameTotal: number;
+    playing: boolean;
     frameDelay: number;
     worldextends: { min: Vector3; max: Vector3; };
 
@@ -66,6 +68,7 @@ export class MeshStream extends Plot {
         for (let iter = fileIteratorStart; iter <= fileIteratorEnd; iter++) {
             this._filenames.push(filePrefix + iter.toString() + fileSuffix);
         }
+        this.frameTotal = this._filenames.length;
         this._createMeshStream();
     }
 
@@ -95,6 +98,7 @@ export class MeshStream extends Plot {
             }
             // add the previous meshes to the scene
             prevContainer.addAllToScene();
+            this.frameIndex++;
             t0 = performance.now();
             if (idx === 1) {
                 // position camera
@@ -117,8 +121,8 @@ export class MeshStream extends Plot {
         this._containers.push(lastContainer);
         prevContainer.removeAllFromScene();
         lastContainer.addAllToScene();
-        this._allLoaded = true;
-        this._frameIndex = 0;
+        this.allLoaded = true;
+        this.frameIndex = 0;
     }
 
     async _loadMesh(filename: string): Promise<AssetContainer> {
@@ -138,20 +142,20 @@ export class MeshStream extends Plot {
     }
 
     update(): boolean {
-        if (this._allLoaded) {
+        if (this.allLoaded) {
             let timeNow = performance.now();
             if (timeNow - this._prevTime > this.frameDelay) {
                 this._prevTime = timeNow;
-                if (this._frameIndex === 0) {
+                if (this.frameIndex === 0) {
                     this._containers[this._containers.length - 1].removeAllFromScene();
                 } else {
-                    this._containers[this._frameIndex - 1].removeAllFromScene();
+                    this._containers[this.frameIndex - 1].removeAllFromScene();
                 }
-                this._containers[this._frameIndex].addAllToScene();
-                if (this._frameIndex === this._containers.length - 1) {
-                    this._frameIndex = 0;
+                this._containers[this.frameIndex].addAllToScene();
+                if (this.frameIndex === this._containers.length - 1) {
+                    this.frameIndex = 0;
                 } else {
-                    this._frameIndex++;
+                    this.frameIndex++;
                 }
             }
             // go through the loaded meshes sequentially, then reset.

PointCloud.d.ts → src/plotTypes/PointCloud.d.ts

@@ -1,5 +1,5 @@
 import { Scene } from "@babylonjs/core/scene";
-import { LegendData, CoordinatePlot } from "./babyplots";
+import { LegendData, CoordinatePlot } from "../babyplots";
 export declare class PointCloud extends CoordinatePlot {
     private _pointPicking;
     private _selectionCallback;

PointCloud.ts → src/plotTypes/PointCloud.ts

@@ -23,7 +23,7 @@ import { Vector3, Color4, Color3 } from "@babylonjs/core/Maths/math";
 import { VertexData } from "@babylonjs/core/Meshes/mesh.vertexData";
 import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
 import { FloatArray } from "@babylonjs/core/types";
-import { LegendData, CoordinatePlot } from "./babyplots";
+import { LegendData, CoordinatePlot } from "../babyplots";
 
 export class PointCloud extends CoordinatePlot {
     private _pointPicking: boolean = false;

ShapeCloud.d.ts → src/plotTypes/ShapeCloud.d.ts

@@ -1,6 +1,6 @@
 import { Scene } from "@babylonjs/core/scene";
 import "@babylonjs/core/Meshes/thinInstanceMesh";
-import { CoordinatePlot, LegendData } from "./babyplots";
+import { CoordinatePlot, LegendData } from "../babyplots";
 import { PickingInfo } from "@babylonjs/core/Collisions/pickingInfo";
 import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
 export declare class ShapeCloud extends CoordinatePlot {

ShapeCloud.ts → src/plotTypes/ShapeCloud.ts

@@ -26,7 +26,7 @@ import { TorusBuilder } from "@babylonjs/core/Meshes/Builders/torusBuilder";
 import { CylinderBuilder } from "@babylonjs/core/Meshes/Builders/cylinderBuilder";
 import { Color3, Color4, Matrix, Vector3 } from "@babylonjs/core/Maths/math";
 import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
-import { CoordinatePlot, LegendData } from "./babyplots";
+import { CoordinatePlot, LegendData } from "../babyplots";
 import { v4 as uuidv4 } from "uuid";
 import { PickingInfo } from "@babylonjs/core/Collisions/pickingInfo";
 import { TransformNode } from "@babylonjs/core/Meshes/transformNode";

Surface.d.ts → src/plotTypes/Surface.d.ts

@@ -1,5 +1,5 @@
 import { Scene } from "@babylonjs/core/scene";
-import { LegendData, CoordinatePlot } from "./babyplots";
+import { LegendData, CoordinatePlot } from "../babyplots";
 export declare class Surface extends CoordinatePlot {
     constructor(scene: Scene, coordinates: number[][], colorVar: string[], size: number, legendData: LegendData, xScale?: number, yScale?: number, zScale?: number, name?: string);
     private _createSurface;

Surface.ts → src/plotTypes/Surface.ts

@@ -21,7 +21,7 @@ import { Scene } from "@babylonjs/core/scene";
 import { Mesh } from "@babylonjs/core/Meshes/mesh";
 import { VertexData } from "@babylonjs/core/Meshes/mesh.vertexData";
 import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
-import { LegendData, CoordinatePlot } from "./babyplots";
+import { LegendData, CoordinatePlot } from "../babyplots";
 import chroma from "chroma-js";
 
 

Axes.d.ts → src/utils/Axes.d.ts

@@ -1,6 +1,6 @@
 import { Scene } from "@babylonjs/core/scene";
 import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
-import { AxisData } from "./babyplots";
+import { AxisData } from "../babyplots";
 export declare class Axes {
     private _axes;
     private _axisLabels;

Axes.ts → src/utils/Axes.ts

@@ -25,7 +25,7 @@ import { LinesMesh } from "@babylonjs/core/Meshes/linesMesh";
 import { Vector3, Axis, Color3} from "@babylonjs/core/Maths/math";
 import { DynamicTexture } from "@babylonjs/core/Materials/Textures/dynamicTexture";
 import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
-import { AxisData } from "./babyplots";
+import { AxisData } from "../babyplots";
 
 /**
  * Class to store and update plot axes.

SVGs.d.ts → src/utils/SVGs.d.ts

@@ -6,6 +6,9 @@ export declare const buttonSVGs: {
     replay: string;
     loop: string;
     record: string;
+    play: string;
+    pause: string;
+    loading: string;
 };
 export declare const legendSVGs: {
     heatmap: string;