Merge pull request #8 from mindthemath/hotfix/flash

fix more UI issues

Author: mathematicalmichael

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "hiplot-mm"
-version = "0.0.4rc12"
+version = "0.0.4rc13"
 description = "High dimensional Interactive Plotting tool"
 readme = "README.md"
 license = "MIT"

src/parallel/parallel.tsx

@@ -974,27 +974,13 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
         });
     }
 
-    // show ticks
-    div.selectAll("." + pstyle.axis + " g").style("display", null);
-    div.selectAll(".background").style("visibility", null);
-
     // update axes
     div.selectAll("." + pstyle.axis).each((d: string, i, nodes) => {
       const node = nodes[i];
-      // hide lines for better performance
-      d3.select(node).selectAll("line").style("display", "none");
-
       // transition axis numbers
       d3.select(node).transition().duration(720).call(this.get_axis(d));
 
-      // bring lines back
-      d3.select(node).selectAll("line").transition().delay(800).style("display", null);
-
-      d3.select(node)
-        .selectAll("text")
-        .style("font-weight", null)
-        .style("font-size", null)
-        .style("display", null);
+      d3.select(node).selectAll(".tick text").style("font-weight", null).style("font-size", null);
     });
     this.setState(function (prevState) {
       return { brush_count: prevState.brush_count + 1 };

src/plotxy.tsx

@@ -192,14 +192,16 @@ export class PlotXY extends React.Component<PlotXYProps, PlotXYState> {
       if (!paramDef) {
         return null;
       }
+      if (paramDef.type === ParamType.TIMESTAMP) {
+        return null;
+      }
       if (paramDef.ticks_format) {
         return d3.format(paramDef.ticks_format);
       }
       const isNumericLike =
         paramDef.type === ParamType.NUMERIC ||
         paramDef.type === ParamType.NUMERICLOG ||
-        paramDef.type === ParamType.NUMERICPERCENTILE ||
-        paramDef.type === ParamType.TIMESTAMP;
+        paramDef.type === ParamType.NUMERICPERCENTILE;
       if (!isNumericLike || typeof scale.domain !== "function") {
         return null;
       }
@@ -215,6 +217,28 @@ export class PlotXY extends React.Component<PlotXYProps, PlotXYState> {
       }
       return d3.format(".3~e");
     }
+    function getTickValues(param: string, scale: any, approxTickCount: number): any[] | null {
+      const paramDef = me.props.params_def[param];
+      if (
+        !paramDef ||
+        paramDef.type !== ParamType.NUMERICLOG ||
+        typeof scale.ticks !== "function"
+      ) {
+        return null;
+      }
+      const ticks = scale.ticks(approxTickCount);
+      if (!Array.isArray(ticks)) {
+        return null;
+      }
+      const majorTicks = ticks.filter((tick: number) => {
+        if (!Number.isFinite(tick) || tick <= 0) {
+          return false;
+        }
+        const lg = Math.log10(tick);
+        return Math.abs(lg - Math.round(lg)) < 1e-10;
+      });
+      return majorTicks.length > 1 ? majorTicks : null;
+    }
     function redraw_axis() {
       me.svg.selectAll(".axis_render").remove();
       me.svg.selectAll(".brush").remove();
@@ -242,6 +266,10 @@ export class PlotXY extends React.Component<PlotXYProps, PlotXYState> {
       ]);
       const xTickFormatter = getTickFormatter(me.state.axis_x, x_scale);
       const yTickFormatter = getTickFormatter(me.state.axis_y, y_scale);
+      const yTickCount = 1 + me.state.height / 40;
+      const xTickCount = 1 + me.state.width / 80;
+      const xTickValues = getTickValues(me.state.axis_x, x_scale, xTickCount);
+      const yTickValues = getTickValues(me.state.axis_y, y_scale, yTickCount);
       zoom_brush = d3
         .brush()
         .extent([
@@ -256,7 +284,8 @@ export class PlotXY extends React.Component<PlotXYProps, PlotXYState> {
           .call(
             d3
               .axisLeft(y_scale)
-              .ticks(1 + me.state.height / 40)
+              .ticks(yTickCount)
+              .tickValues(yTickValues as any)
               .tickFormat(yTickFormatter as any)
               .tickSizeInner(margin.left + margin.right - me.state.width),
           )
@@ -289,7 +318,8 @@ export class PlotXY extends React.Component<PlotXYProps, PlotXYState> {
           .call(
             d3
               .axisBottom(x_scale)
-              .ticks(1 + me.state.width / 80)
+              .ticks(xTickCount)
+              .tickValues(xTickValues as any)
               .tickFormat(xTickFormatter as any)
               .tickSizeInner(margin.bottom + margin.top - me.state.height),
           )

src/rowsdisplaytable.tsx

@@ -69,6 +69,24 @@ export class RowsDisplayTable extends React.Component<TablePluginProps, RowsDisp
 
   setSelected_debounced = _.debounce(this.setSelected, 150);
 
+  private getUidFromRowData(rowData: Array<any>): string {
+    const uidIdx = this.ordered_cols.indexOf("uid");
+    if (uidIdx >= 0) {
+      const direct = rowData[uidIdx];
+      if (this.props.dp_lookup[direct] !== undefined) {
+        return direct;
+      }
+      if (this.dt && this.dt.colReorder) {
+        const reorderedUidIdx = this.dt.colReorder.order().indexOf(uidIdx);
+        const remapped = rowData[reorderedUidIdx];
+        if (this.props.dp_lookup[remapped] !== undefined) {
+          return remapped;
+        }
+      }
+    }
+    return rowData[uidIdx];
+  }
+
   static defaultProps = {
     hide: [],
     order_by: [["uid", "asc"]],
@@ -110,7 +128,6 @@ export class RowsDisplayTable extends React.Component<TablePluginProps, RowsDisp
       });
     }
     me.ordered_cols.unshift("");
-    const uidColIndex = me.ordered_cols.indexOf("uid");
 
     dom.empty();
     var columns: Array<{ [k: string]: any }> = this.ordered_cols.map(function (x) {
@@ -138,8 +155,8 @@ export class RowsDisplayTable extends React.Component<TablePluginProps, RowsDisp
       if (!me.dt) {
         return "";
       }
-      const individualUidColIdx = me.dt.colReorder.order().indexOf(uidColIndex);
-      const color = me.props.get_color_for_row(me.props.dp_lookup[row[individualUidColIdx]], 1.0);
+      const uid = me.getUidFromRowData(row);
+      const color = me.props.get_color_for_row(me.props.dp_lookup[uid], 1.0);
       return `<span class="${style.colorBlock}" style="background-color: ${color}" />`;
     };
     this.dt = dom.DataTable({
@@ -206,14 +223,13 @@ export class RowsDisplayTable extends React.Component<TablePluginProps, RowsDisp
         }
         const rowIdx = me.dt.cell(this).index().row;
         const row = me.dt.row(rowIdx);
-        const individualUidColIdx = me.dt.colReorder.order().indexOf(uidColIndex);
 
         dom.find(`.table-primary`).removeClass("table-primary");
         const rowNode = row.node();
         if (rowNode) {
           $(rowNode).addClass("table-primary");
         }
-        me.props.setHighlighted([me.props.dp_lookup[row.data()[individualUidColIdx]]]);
+        me.props.setHighlighted([me.props.dp_lookup[me.getUidFromRowData(row.data())]]);
       })
       .on("mouseout", "td", function () {
         if (!me.dt || me.empty) {
@@ -302,15 +318,11 @@ export class RowsDisplayTable extends React.Component<TablePluginProps, RowsDisp
       return;
     }
     const ordered_cols = this.ordered_cols;
-    const ock = dt.colReorder.transpose(
-      Array.from(Array(ordered_cols.length).keys()),
-      "toOriginal",
-    );
 
     dt.clear();
     dt.rows.add(
       selected.map(function (row) {
-        return ock.map((x) => (x == "" ? "" : row[ordered_cols[x]]));
+        return ordered_cols.map((col) => (col == "" ? "" : row[col]));
       }),
     );
     if (dt.search() == "") {