Use standard packaging and installation approaches

.gitignore

@@ -1,8 +1,10 @@
 
 .idea/
 
-js/vendor
+data/
 
-csv/
+node_modules/
 
-csv_add/
+dist/
+
+yarn-error.log

README.md

@@ -8,50 +8,44 @@ Checkout the [live code demo](https://shouldervis.chpc.utah.edu/kinevis/main.htm
 
 ### Installation
 
+This repository depends on [Yarn](https://github.com/yarnpkg/yarn) as a package manager. Please [install Yarn](https://yarnpkg.com/en/docs/install) before proceeding.
+
 ##### Clone repository
 ```
 git clone https://github.com/klevis-a/kinematics-vis.git
 cd kinematics-vis
 ```
 
-##### Download code dependencies and data repository
-
-###### Windows
-```
-downloadDeps.bat
-downloadData.bat
-```
+##### Install dependencies and build
 
-###### Linux
 ```
-./downloadDeps.sh
-./downloadData.sh
+yarn install
+yarn build
 ```
 
-##### Start web server
-
-The Python 3 Simple HTTP server is utilized below, but any web server will work.
+##### Download sample dataset
 
-###### Windows
 ```
-python -m http.server
+yarn fetch_data
 ```
 
-###### Linux
+##### Start `webpack` development server
+
 ```
-python3 -m http.server
+yarn webpack serve
 ```
 
 ##### Access web application
 
-[http://localhost:8000/main.html](http://localhost:8000/main.html)
+[http://localhost:9000/main.html](http://localhost:9000/main.html)
 
 ### Usage
-Instructions for interacting with the UI are provided within the web application. Once you access the web app click the question mark that appears at the top of the upper right quadrant.
+Instructions for interacting with the UI are provided within the web application. Once you access the web app click the question mark that appears at the top of the upper right quadrant. A simple way to provide an input dataset for the web app is to utilize the sample dataset (`yarn fetch_data`). Once the sample dataset has been downloaded, click the folder icon (top of the upper left quadrant), and select a trial to analyze.
 
 ![Help](help_pointer.png)
 
-A simple way to provide an input dataset for the web app is to utilize the sample dataset (downloadData.sh or downloadData.bat). Once the sample dataset has been downloaded, click the folder icon (top of the upper left quadrant), and select a trial to analyze. To analyze your own data see `INPUT_FILES.md` for creating file formats compatible with this web app.
+### Analyzing your own datasets
+To analyze your own data see [INPUT_FILES.md](INPUT_FILES.md) for creating file formats compatible with this web app. To specify your own dataset directory edit the `DATA_DIR` variable within `webpack.config.js`.
 
 ### Contributing
 

downloadData.bat

@@ -1,3 +1,4 @@
-curl https://shouldervis.chpc.utah.edu/kinevis/csv.zip --output csv.zip
-powershell.exe -NoP -NonI -Command "Expand-Archive '.\csv.zip' '.\csv\'"
-del csv.zip
+if not exist "data" mkdir data
+curl https://shouldervis.chpc.utah.edu/kinevis/healthy.zip --output data\healthy.zip
+powershell.exe -NoP -NonI -Command "Expand-Archive '.\data\healthy.zip' '.\data\healthy\'"
+del data\healthy.zip

downloadData.sh

@@ -1,3 +1,4 @@
-curl https://shouldervis.chpc.utah.edu/kinevis/csv.zip --output csv.zip
-unzip csv.zip -d csv
-rm csv.zip
+mkdir -p data
+curl https://shouldervis.chpc.utah.edu/kinevis/healthy.zip --output data/healthy.zip
+unzip data/healthy.zip -d data/healthy
+rm data/healthy.zip

js/BaseView.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import {PerspectiveCamera} from "./vendor/three.js/build/three.module.js";
+import {PerspectiveCamera} from "three";
 
 export class BaseView {
 

js/Csv_Processor.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import {Vector3, Quaternion} from "./vendor/three.js/build/three.module.js";
+import {Vector3, Quaternion} from "three";
 
 export class HumerusLandmarks {
     static COLS = [1, 4];

js/EulerAnglesGeometry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import {LineBasicMaterial, MeshBasicMaterial, Line, Mesh, Group, Vector3, BufferGeometry,
-    RingBufferGeometry, PlaneBufferGeometry, DoubleSide, Matrix4} from "./vendor/three.js/build/three.module.js";
+    RingBufferGeometry, PlaneBufferGeometry, DoubleSide, Matrix4} from "three";
 
 
 export class Euler_yxy_angle_geometry {

js/EulerGeometry.js

@@ -1,8 +1,8 @@
 'use strict';
 
 import {Object3D, MeshPhongMaterial, Mesh, CylinderBufferGeometry, MeshBasicMaterial, SphereBufferGeometry,
-    TubeBufferGeometry, Curve, Vector3, DoubleSide} from "./vendor/three.js/build/three.module.js";
-import {BufferGeometryUtils} from "./vendor/three.js/examples/jsm/utils/BufferGeometryUtils.js"
+    TubeBufferGeometry, Curve, Vector3, DoubleSide} from "three";
+import {BufferGeometryUtils} from "three/examples/jsm/utils/BufferGeometryUtils.js"
 
 export class FatArrow extends Object3D {
     constructor(lineWidth, lineLength, coneRadius, coneHeight, color, markings, markingsStart, markingsEnd) {
@@ -74,9 +74,9 @@ export class FatArrow extends Object3D {
 
 export class Triad extends Object3D{
     static originMaterial = new MeshPhongMaterial({color: 0x000000});
-    static reds = palette('cb-Reds',5);
-    static greens = palette('cb-Greens',5);
-    static blues = palette('cb-Blues',5);
+    static reds = ['fee5d9', 'fcae91', 'fb6a4a', 'de2d26', 'a50f15'];
+    static greens = ['edf8e9', 'bae4b3', '74c476', '31a354', '006d2c'];
+    static blues = ['eff3ff', 'bdd7e7', '6baed6', '3182bd', '08519c'];
     static triadMaterialColors = ['reds', 'greens', 'blues'];
 
     static intFromColor(col) {

js/EulerScene.js

@@ -1,9 +1,9 @@
 'use strict';
 
 import {Scene, Color, Quaternion, LineBasicMaterial, BufferGeometry, PlaneBufferGeometry, EdgesGeometry,
-    Line, LineSegments, Vector3, HemisphereLight, SpotLight, EventDispatcher} from './vendor/three.js/build/three.module.js';
+    Line, LineSegments, Vector3, HemisphereLight, SpotLight, EventDispatcher} from 'three';
 import {divGeometry} from "./SceneHelpers.js"
-import {TrackballControls} from "./vendor/three.js/examples/jsm/controls/TrackballControls.js";
+import {TrackballControls} from "three/examples/jsm/controls/TrackballControls.js";
 import {Triad} from "./EulerGeometry.js";
 import {EulerStep} from "./EulerStep.js"
 import {defaultCamera} from "./BaseView.js";

js/EulerSceneSimultaneous.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import {EulerScene} from "./EulerScene.js";
-import {Quaternion, Vector3} from "./vendor/three.js/build/three.module.js";
+import {Quaternion, Vector3} from "three";
 import {EulerStep} from "./EulerStep.js";
 import {axisAngleFromQuat} from "./RotDecompositions.js";
 

js/EulerScene_AngleVis.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import {Mesh, Group, Vector3} from "./vendor/three.js/build/three.module.js";
+import {Mesh, Group, Vector3} from "three";
 import {Triad} from "./EulerGeometry.js";
 import {EulerScene} from "./EulerScene.js";
 

js/EulerScene_Axial.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import {MeshBasicMaterial, Mesh, Group, Vector3, CircleBufferGeometry, PlaneBufferGeometry,
-    DoubleSide} from "./vendor/three.js/build/three.module.js";
+    DoubleSide} from "three";
 import {EulerScene} from "./EulerScene.js";
 
 EulerScene.AXIAL_PLANE_MATERIAL = new MeshBasicMaterial({color: 0xffffff, side: DoubleSide, depthTest: false, visible: false});

js/EulerScene_Bone.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import {EulerScene} from "./EulerScene.js";
-import {MeshPhongMaterial, Mesh} from "./vendor/three.js/build/three.module.js";
+import {MeshPhongMaterial, Mesh} from "three";
 
 EulerScene.BONE_COLOR = 0xe3dac9;
 EulerScene.BONE_MATERIAL = new MeshPhongMaterial({color: EulerScene.BONE_COLOR, opacity: 0.9, transparent: true});

js/EulerScene_Sphere.js

@@ -2,7 +2,7 @@
 
 import {EulerScene} from "./EulerScene.js";
 import {SphereBufferGeometry, EdgesGeometry, LineBasicMaterial, LineSegments, Vector3, Plane,
-    CircleBufferGeometry, Quaternion} from "./vendor/three.js/build/three.module.js";
+    CircleBufferGeometry, Quaternion} from "three";
 
 EulerScene.prototype.addSphere = function(northPole) {
     this.northPole = northPole;

js/EulerScene_SphereAreaVis.js

@@ -1,8 +1,8 @@
 import {EulerScene} from "./EulerScene.js";
-import {Group, Matrix4, Mesh, Quaternion, Vector3} from "./vendor/three.js/build/three.module.js";
-import {LineMaterial} from "./vendor/three.js/examples/jsm/lines/LineMaterial.js";
-import {LineGeometry} from "./vendor/three.js/examples/jsm/lines/LineGeometry.js";
-import {Line2} from "./vendor/three.js/examples/jsm/lines/Line2.js";
+import {Group, Matrix4, Mesh, Quaternion, Vector3} from "three";
+import {LineMaterial} from "three/examples/jsm/lines/LineMaterial.js";
+import {LineGeometry} from "three/examples/jsm/lines/LineGeometry.js";
+import {Line2} from "three/examples/jsm/lines/Line2.js";
 
 EulerScene.prototype.prepare_scene_for_area_vis = function(quatFnc) {
     const recursiveEnable = child => child.layers.enable(this.areaVisLayer);

js/EulerStep.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import {createArc, arrowGeometryFromArcGeometry, updateFlatArcArrow}  from "./EulerStepStatic.js";
-import {Quaternion, Plane, MeshBasicMaterial, DoubleSide, Mesh} from "./vendor/three.js/build/three.module.js";
+import {Quaternion, Plane, MeshBasicMaterial, DoubleSide, Mesh} from "three";
 import {Triad, RotAxisWithArrow} from "./EulerGeometry.js";
 
 export class EulerStep {

js/EulerStepStatic.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import {Vector3, CylinderBufferGeometry, Mesh, Geometry, Face3, Matrix4} from "./vendor/three.js/build/three.module.js";
+import {Vector3, CylinderBufferGeometry, Mesh, Geometry, Face3, Matrix4} from "three";
 
 export function createArc(triad1, triad2, rotAxis, rotAngle, rotPlane, dim, stripBottomDistance, stripWidth, arcMaterial, radialSegments, heightSegments) {
     let coneAxis;

js/HumerusScapulaScene.js

@@ -2,9 +2,9 @@
 
 import {Scene, MeshPhongMaterial, Mesh, Color, AxesHelper, SphereBufferGeometry, MeshStandardMaterial, Matrix4,
     Line, LineBasicMaterial, BufferGeometry, PlaneBufferGeometry, LineSegments, EdgesGeometry,
-    SpotLight, Vector3} from './vendor/three.js/build/three.module.js';
+    SpotLight, Vector3} from "three";
 import {divGeometry} from "./SceneHelpers.js"
-import {TrackballControls} from "./vendor/three.js/examples/jsm/controls/TrackballControls.js";
+import {TrackballControls} from "three/examples/jsm/controls/TrackballControls.js";
 import {EulerScene} from "./EulerScene.js";
 import {defaultCamera} from "./BaseView.js";
 

js/HumerusView.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import {Vector3} from "./vendor/three.js/build/three.module.js";
+import {Vector3} from "three";
 import {AnglesVisualizationSVD, Euler_xzy_angle_geometry, Euler_yxy_angle_geometry} from "./EulerAnglesGeometry.js";
 import {EulerScene} from "./EulerScene.js";
 import {EulerSceneSimultaneous} from "./EulerSceneSimultaneous.js";

js/MiscThreeHelpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import {STLLoader} from "./vendor/three.js/examples/jsm/loaders/STLLoader.js";
+import {STLLoader} from "three/examples/jsm/loaders/STLLoader.js";
 
 export function promiseLoadSTL(url, onprogress = function () {})
 {

js/PlotManager.js

@@ -1,9 +1,10 @@
 'use strict';
 
-import {MathUtils} from "./vendor/three.js/build/three.module.js";
+import {MathUtils} from "three";
 import {range, removeAllChildNodes} from "./JSHelpers.js";
 import {realAxialRotation, shr} from "./RotDecompositions.js";
 import {HUMERUS_BASE} from "./RotationHelper.js";
+import Plotly from 'plotly.js-dist-min'
 
 export class PlotManager {
     constructor(rotationHelper, onClick, onHover, onUnhover, plotContainerDiv, plotSelectorDiv, defaultPlot, humerusBase=HUMERUS_BASE.TORSO) {

js/RotDecompositions.js

@@ -1,8 +1,7 @@
 'use strict';
 
-import {Matrix4, Quaternion, Vector3, Matrix3} from "./vendor/three.js/build/three.module.js";
-import SVD from './vendor/svd.js'
-import {Trajectory} from "./Csv_Processor.js";
+import {Matrix4, Quaternion, Vector3, Matrix3} from "three";
+import {SVD} from "svd-js";
 
 
 export function axisAngleFromQuat(quat) {

js/RotationHelper.js

@@ -1,6 +1,6 @@
-import {Matrix4, Quaternion, Vector3, Matrix3} from "./vendor/three.js/build/three.module.js";
+import {Matrix4, Quaternion, Vector3} from "three";
 import {EulerDecomposition_RY$$_RX$_RY, EulerDecomposition_RY$$_RZ$_RX, EulerDecomposition_RZ$$_RX$_RY,
-    ShortestPath, SwingTwist, svdDecomp, axisAngleFromQuat} from "./RotDecompositions.js";
+    ShortestPath, SwingTwist, svdDecomp} from "./RotDecompositions.js";
 
 export const HUMERUS_BASE = {
     TORSO: 'T',

js/SceneHelpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import {Box3} from "./vendor/three.js/build/three.module.js";
+import {Box3} from "three";
 
 export function boundingBox_objects(objects) {
     const bb = new Box3();

js/ShoulderVis.js

@@ -4,6 +4,8 @@ import {removeAllChildNodes} from "./JSHelpers.js";
 import {promiseLoadSTL} from "./MiscThreeHelpers.js";
 import {HumerusLandmarks, ScapulaLandmarks, Trajectory} from "./Csv_Processor.js";
 import {ViewManager} from "./ViewManager.js";
+import Plotly from 'plotly.js-dist-min';
+import Papa from 'papaparse';
 
 function loadJson(jsonFile) {
     return new Promise(function (resolve, reject) {

js/StlGeometryTools.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import {Matrix4, Vector3} from "./vendor/three.js/build/three.module.js";
+import {Matrix4, Vector3} from "three";
 
 export function normalizeHumerusGeometry(humerusLandmarks, humerusGeometry) {
     const hhc = humerusLandmarks.hhc;

js/ViewManager.js

@@ -1,7 +1,7 @@
 import {divGeometry} from "./SceneHelpers.js";
-import {WebGLRenderer, Vector3, EventDispatcher} from "./vendor/three.js/build/three.module.js";
+import {WebGLRenderer, Vector3, EventDispatcher} from "three";
 import {FrameSelectorController} from "./FrameSelectorController.js";
-import {GUI} from "./vendor/three.js/examples/jsm/libs/dat.gui.module.js";
+import {GUI} from "three/examples/jsm/libs/dat.gui.module.js";
 import {normalizeHumerusGeometry, normalizeScapulaGeometry} from "./StlGeometryTools.js";
 import {RotationHelper, HUMERUS_BASE} from "./RotationHelper.js";
 import {HumerusView} from "./HumerusView.js";

js/defaultAnalysis.js

@@ -15,4 +15,4 @@ const guiOptions = {
 
 const initialViewLayout = new Map([['view1', 'HUM_EULER_YXY'], ['view2', 'SCAP_EULER_YXZ'], ['view3', 'PREVIEW']]);
 
-const shoulderVis = new ShoulderVis('./csv', 'db_summary.json', initialViewLayout, guiOptions, 'humerusIsb');
+const shoulderVis = new ShoulderVis(DATA_DIR, 'db_summary.json', initialViewLayout, guiOptions, 'humerusIsb');

main.html

@@ -113,9 +113,5 @@
     </div>
     <div id="datGUI"></div>
 </div>
-<script src="js/vendor/plotly.min.js"></script>
-<script src="js/vendor/papaparse.min.js"></script>
-<script src="js/vendor/palette.js"></script>
-<script type="module" src="js/defaultAnalysis.js"></script>
 </body>
 </html>