feat WIP: handle display tic spectra

src/__tests__/units/helpers/calc.test.tsx

@@ -1,4 +1,4 @@
-import { almostEqual, calcSlope } from '../../../helpers/calc';
+import { almostEqual, calcSlope, findClosest } from '../../../helpers/calc';
 
 describe('Test calculation helpers', () => {
   describe('Test almostEqual function', () => {
@@ -39,4 +39,20 @@ describe('Test calculation helpers', () => {
       expect(output).toEqual(3);
     });
   });
+
+  describe('Test findClosest function', () => {
+    it('Get closest number from array of interger', () => {
+      const arr = [ 1, 2, 4, 5, 6, 6, 8, 9 ];
+      const target = 2.7;
+      const output = findClosest(arr, target)
+      expect(output).toEqual(2);
+    });
+
+    it('Get closest number from array of float', () => {
+      const arr = [ 1.0, 1.5, 1.9 ];
+      const target = 1.2;
+      const output = findClosest(arr, target)
+      expect(output).toEqual(1.0);
+    });
+  });
 });

src/components/d3_line_rect/index.js

@@ -10,8 +10,11 @@ import {
 import { resetAll } from '../../actions/manager';
 import { selectUiSweep, scrollUiWheel, clickUiTarget } from '../../actions/ui';
 // import RectFocus from './rect_focus';
-import LineFocus from './line_focus';
+// import LineFocus from './line_focus';
 import RectFocus from './rect_focus';
+import MultiFocus from './multi_focus';
+import { extractParams } from '../../helpers/extractParams';
+import { findClosest } from '../../helpers/calc';
 import {
   drawMain, drawLabel, drawDisplay, drawDestroy,
 } from '../common/draw';
@@ -24,10 +27,15 @@ class ViewerLineRect extends React.Component {
   constructor(props) {
     super(props);
 
-    const { clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct } = props;
+    const {
+      clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, entities,
+    } = props;
     this.rootKlassLine = '.d3Line';
-    this.lineFocus = new LineFocus({
-      W, H, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
+    // this.lineFocus = new LineFocus({
+    //   W, H, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
+    // });
+    this.lineFocus = new MultiFocus({
+      W, H, entities, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
     });
 
     this.rootKlassRect = '.d3Rect';
@@ -41,7 +49,7 @@ class ViewerLineRect extends React.Component {
 
   componentDidMount() {
     const {
-      seed, cLabel, xLabel, yLabel, feature,
+      entities, curveSt, seed, cLabel, xLabel, yLabel, feature,
       tTrEndPts, layoutSt,
       sweepExtentSt, isUiAddIntgSt, isUiNoBrushSt,
       isHidden, sweepExtentSubViewSt,
@@ -54,6 +62,8 @@ class ViewerLineRect extends React.Component {
 
     drawMain(this.rootKlassLine, W, H);
     this.lineFocus.create({
+      entities,
+      curveSt,
       filterSeed,
       tTrEndPts,
       layoutSt,
@@ -78,7 +88,7 @@ class ViewerLineRect extends React.Component {
 
   componentDidUpdate(prevProps) {
     const {
-      seed, cLabel, xLabel, yLabel,
+      entities, curveSt, seed, cLabel, xLabel, yLabel,
       tTrEndPts, layoutSt,
       sweepExtentSt, isUiAddIntgSt, isUiNoBrushSt,
       isHidden, sweepExtentSubViewSt,
@@ -88,6 +98,8 @@ class ViewerLineRect extends React.Component {
     const filterSeed = seed;
 
     this.lineFocus.update({
+      entities,
+      curveSt,
       filterSeed,
       tTrEndPts,
       layoutSt,
@@ -132,13 +144,19 @@ class ViewerLineRect extends React.Component {
   }
 
   extractSubView() {
-    const { uiSt, features } = this.props;
+    const { uiSt, subEntities } = this.props;
     const { subViewerAt } = uiSt;
     let selectFeature = null;
+
     if (subViewerAt && subViewerAt.x) {
+      const {
+        features,
+      } = extractParams(subEntities[0], 0, 1);
+      const arrPageValues = features.map((fe) => fe.pageValue);
+      const closestPage = findClosest(arrPageValues, subViewerAt.x);
       const filteredFeatures = features.filter((fe) => {
         const { pageValue } = fe;
-        return pageValue === subViewerAt.x;
+        return pageValue === closestPage;
       });
       [selectFeature] = filteredFeatures;
     }
@@ -161,6 +179,7 @@ class ViewerLineRect extends React.Component {
 
 const mapStateToProps = (state, props) => (
   {
+    curveSt: state.curve,
     seed: Topic2Seed(state, props),
     tTrEndPts: ToThresEndPts(state, props),
     sweepExtentSt: state.ui.sweepExtent,
@@ -181,13 +200,16 @@ const mapDispatchToProps = (dispatch) => (
 );
 
 ViewerLineRect.propTypes = {
+  uiSt: PropTypes.object.isRequired,
+  curveSt: PropTypes.object.isRequired,
+  entities: PropTypes.array.isRequired,
+  subEntities: PropTypes.array.isRequired,
   seed: PropTypes.array.isRequired,
   cLabel: PropTypes.string.isRequired,
   xLabel: PropTypes.string.isRequired,
   yLabel: PropTypes.string.isRequired,
   layoutSt: PropTypes.string.isRequired,
   feature: PropTypes.object.isRequired,
-  features: PropTypes.array.isRequired,
   tTrEndPts: PropTypes.array.isRequired,
   sweepExtentSt: PropTypes.object.isRequired,
   sweepExtentSubViewSt: PropTypes.object.isRequired,
@@ -198,7 +220,6 @@ ViewerLineRect.propTypes = {
   selectUiSweepAct: PropTypes.func.isRequired,
   scrollUiWheelAct: PropTypes.func.isRequired,
   isHidden: PropTypes.bool.isRequired,
-  uiSt: PropTypes.object.isRequired,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ViewerLineRect);