viz updates

.gitignore

@@ -116,3 +116,7 @@ docs/build
 hiplot/static/built
 src/**/*css.d.ts
 *.code-workspace
+
+
+npm-build
+npm-package

build.sh

@@ -0,0 +1,15 @@
+rm -rf hiplot/static/built/*
+rm -rf dist && mkdir dist pypi-build
+mkdir -p npm-build/dist npm-build/dist-dev dist
+cp .circleci/hotfixes/internmap.js node_modules/internmap/src/index.js
+npm run build-dev
+mv dist/* npm-build/dist-dev/
+npm run build
+npm run prepublish
+mv dist/* npm-build/dist/ && mkdir -p hiplot/static/built/ && cp npm-build/dist/hiplot.bundle.js hiplot/static/built/
+
+mkdir -p npm-package/hiplot
+
+cp -r package.json tsconfig.json webpack.config.js README.md LICENSE src npm-build/dist npm-package/hiplot
+rm -rf npm-package/hiplot/dist/hiplot-*  # Leftover from setup.py
+python setup.py sdist bdist_wheel

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hiplot",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "description": "HiPlot is a lightweight interactive visualization tool to help AI researchers discover correlations and patterns in high-dimensional data using parallel plots and other graphical ways to represent information.",
   "main": "dist/hiplot.lib.js",
   "types": "dist/hiplot.d.ts",

setup.py

@@ -36,8 +36,8 @@ def readme() -> str:
 
 
 setup(
-    name="hiplot",
-    version=version,
+    name="hiplot-mm",
+    version="0.0.2",
     description="High dimensional Interactive Plotting tool",
     long_description=readme(),
     long_description_content_type="text/markdown",

src/parallel/parallel.scss

@@ -23,7 +23,7 @@
 }
 
 .pplotLabel :global(.label-name) {
-    transform-origin: bottom left;
+    transform-origin: top left;
 }
 
 .axis .tickSelected {

src/parallel/parallel.tsx

@@ -65,14 +65,14 @@ export interface ParallelPlotDisplayData {
 export interface ParallelPlotData extends HiPlotPluginData, ParallelPlotDisplayData {
 };
 
-const TOP_MARGIN_PIXELS = 80;
+const TOP_MARGIN_PIXELS = 100;
 export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlotState> {
   on_resize: () => void = null;
   m = [
     TOP_MARGIN_PIXELS, // top
-    TOP_MARGIN_PIXELS * 0.5, // right
-    10, // bottom
-    10 // left
+    TOP_MARGIN_PIXELS * 0.125, // right
+    TOP_MARGIN_PIXELS * 0.125, // bottom
+    TOP_MARGIN_PIXELS * 0.25, // left
   ]; // Margins
   // Available space minus margins
   w: number;
@@ -267,8 +267,8 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
       this.yscale[k] = this.createScale(k);
       return true;
     }.bind(this)).reverse().sort(function(this: ParallelPlot, a: string, b: string) {
-      const pda = this.state.order.findIndex((e) => e == a);
-      const pdb = this.state.order.findIndex((e) => e == b);
+      const pda = this.state.order.findIndex((e) => e == b);
+      const pdb = this.state.order.findIndex((e) => e == a);
       return (pdb == -1 ? this.state.order.length : pdb) - (pda == -1 ? this.state.order.length : pda);
     }.bind(this));
     this.setState({
@@ -683,10 +683,10 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
 
   updateAxisTitlesAnglesAndFontSize() {
     // Set optimal rotation angle and scale fonts so that everything fits on screen
-    const MIN_ROTATION_ANGLE = 20;
-    const MAX_ROTATION_ANGLE = 70;
+    const MIN_ROTATION_ANGLE = 90;
+    const MAX_ROTATION_ANGLE = 90;
     const MAX_FONT_SIZE = 16;
-    const MIN_FONT_SIZE = 6;
+    const MIN_FONT_SIZE = 10;
     const MAX_X = this.dimensions_dom.node().parentElement.parentElement.getBoundingClientRect().right;
     const ROTATION_ANGLE_RADS = Math.max(MIN_ROTATION_ANGLE * Math.PI / 180, Math.min(MAX_ROTATION_ANGLE * Math.PI / 180,
       Math.atan(24 * this.state.dimensions.length / this.state.width)