feat WIP: display uivis data

src/components/d3_line_rect/index.js

@@ -11,6 +11,7 @@ import { resetAll } from '../../actions/manager';
 import { selectUiSweep, scrollUiWheel, clickUiTarget } from '../../actions/ui';
 import RectFocus from './rect_focus';
 import MultiFocus from './multi_focus';
+import LineFocus from './line_focus';
 import { extractParams } from '../../helpers/extractParams';
 import { findClosest } from '../../helpers/calc';
 import {
@@ -30,6 +31,12 @@ class ViewerLineRect extends React.Component {
     const {
       clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct, entities,
     } = props;
+
+    this.rootKlassLine = `.${LIST_ROOT_SVG_GRAPH.LINE}`;
+    this.lineFocus = new LineFocus({
+      W, H, entities, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
+    });
+
     this.rootKlassMulti = `.${LIST_ROOT_SVG_GRAPH.MULTI}`;
     this.multiFocus = new MultiFocus({
       W, H, entities, clickUiTargetAct, selectUiSweepAct, scrollUiWheelAct,
@@ -42,6 +49,7 @@ class ViewerLineRect extends React.Component {
 
     this.normChange = this.normChange.bind(this);
     this.extractSubView = this.extractSubView.bind(this);
+    this.extractUvvisView = this.extractUvvisView.bind(this);
   }
 
   componentDidMount() {
@@ -55,6 +63,25 @@ class ViewerLineRect extends React.Component {
     drawDestroy(this.rootKlassMulti);
     resetAllAct(feature);
 
+    const uvvisViewFeature = this.extractUvvisView();
+    const { data } = uvvisViewFeature;
+    const currentData = data[0];
+    const { x, y } = currentData;
+    const uvvisSeed = x.map((d, index) => {
+      const s = { x: d, y: y[index] };
+      return s;
+    });
+    drawMain(this.rootKlassLine, W, H, LIST_BRUSH_SVG_GRAPH.LINE);
+    this.lineFocus.create({
+      filterSeed: uvvisSeed,
+      filterPeak: [],
+      tTrEndPts,
+      isUiNoBrushSt: true,
+      sweepExtentSt: sweepExtentSubViewSt,
+    });
+    drawLabel(this.rootKlassLine, null, 'M/Z', 'Intensity');
+    drawDisplay(this.rootKlassLine, false);
+
     const filterSeed = seed;
 
     drawMain(this.rootKlassMulti, W, H);
@@ -140,6 +167,14 @@ class ViewerLineRect extends React.Component {
     }
   }
 
+  extractUvvisView() {
+    const { subEntities } = this.props;
+    const {
+      features,
+    } = extractParams(subEntities[0], 0, 1);
+    return features[0];
+  }
+
   extractSubView() {
     const { uiSt, subEntities } = this.props;
     const { subViewerAt } = uiSt;
@@ -148,7 +183,7 @@ class ViewerLineRect extends React.Component {
     if (subViewerAt && subViewerAt.x) {
       const {
         features,
-      } = extractParams(subEntities[0], 0, 1);
+      } = extractParams(subEntities[1], 0, 1);
       const arrPageValues = features.map((fe) => fe.pageValue);
       const closestPage = findClosest(arrPageValues, subViewerAt.x);
       const filteredFeatures = features.filter((fe) => {
@@ -163,6 +198,7 @@ class ViewerLineRect extends React.Component {
   render() {
     return (
       <div>
+        <div className={LIST_ROOT_SVG_GRAPH.LINE} />
         <div className={LIST_ROOT_SVG_GRAPH.MULTI} />
         <Zoom isSubView />
         <div className={LIST_ROOT_SVG_GRAPH.RECT} />

src/components/d3_line_rect/multi_focus.js

@@ -12,6 +12,9 @@ import { TfRescale, MountCompass } from '../../helpers/compass';
 import { LIST_LAYOUT } from '../../constants/list_layout';
 import Format from '../../helpers/format';
 import { LIST_ROOT_SVG_GRAPH } from '../../constants/list_graph';
+import {
+  convertTopic,
+} from '../../helpers/chem';
 
 const d3 = require('d3');
 
@@ -117,12 +120,13 @@ class MultiFocus {
     this.data = [];
     this.otherLineData = [];
     this.entities.forEach((entry, idx) => {
-      const { color } = entry;
-      const currData = filterSeed;
+      const { color, topic, feature } = entry;
+      let currData = filterSeed;
       if (idx === jcampIdx) {
         this.data = [...currData];
         this.pathColor = color;
       } else {
+        currData = convertTopic(topic, layout, feature, 0);
         this.otherLineData.push({ data: currData, color });
       }
     });

src/helpers/chem.js

@@ -459,7 +459,6 @@ const extractVoltammetryData = (jcamp) => {
 const buildPeakFeature = (jcamp, layout, peakUp, s, thresRef, upperThres = false, lowerThres = false) => {  // eslint-disable-line
   const { xType, info } = jcamp;
   const subTyp = xType ? ` - ${xType}` : '';
-  const isTic = info.$CSCATEGORY === 'TIC SPECTRUM';
 
   return (
     Object.assign(
@@ -481,7 +480,7 @@ const buildPeakFeature = (jcamp, layout, peakUp, s, thresRef, upperThres = false
         lowerThres,
         volammetryData: extractVoltammetryData(jcamp),
         scanRate: +info.$CSSCANRATE || 0.1,
-        isTic,
+        csCategory: info.$CSCATEGORY,
       },
       s,
     )

src/helpers/extractParams.js

@@ -35,7 +35,9 @@ const extrLcMs = (entity) => {
   let arrX = [];
   let arrY = [];
   features.forEach((spectrum) => {
-    const { data, isTic, pageValue } = spectrum;
+    const { data, csCategory, pageValue } = spectrum;
+    const isTic = csCategory === 'TIC SPECTRUM';
+    // const isUvvis = csCategory === 'UVVIS SPECTRUM';
     const { x, y } = data[0];
     if (isTic) {
       arrX = x;

src/index.js

@@ -25,6 +25,7 @@ import msJcamp from './__tests__/fixtures/ms_jcamp';
 import lcmsJcamp from './__tests__/fixtures/lc_ms_jcamp';
 import hplcMsTicPosJcamp from './__tests__/fixtures/lc_ms_jcamp_tic_pos';
 import hplcMsTicNegJcamp from './__tests__/fixtures/lc_ms_jcamp_tic_neg';
+import hplcMsUvvisJcamp from './__tests__/fixtures/lc_ms_jcamp_uvvis';
 import nmrResult from './__tests__/fixtures/nmr_result';
 import irResult from './__tests__/fixtures/ir_result';
 import Phenylalanin from './__tests__/fixtures/phenylalanin';
@@ -71,6 +72,7 @@ const msEntity = FN.ExtractJcamp(msJcamp);
 const lcmsEntity = FN.ExtractJcamp(lcmsJcamp);
 const hplcMsTicPosEntity = FN.ExtractJcamp(hplcMsTicPosJcamp);
 const hplcMsTicNegEntity = FN.ExtractJcamp(hplcMsTicNegJcamp);
+const hplcMsUvvisEntity = FN.ExtractJcamp(hplcMsUvvisJcamp);
 const uvVisEntity = FN.ExtractJcamp(uvVisJcamp);
 const compUvVisEntity = FN.ExtractJcamp(compareUvVisJcamp);
 const hplcUVVisEntity = FN.ExtractJcamp(hplcUVVisJcamp);
@@ -219,7 +221,7 @@ class DemoWriteIr extends React.Component {
       case 'gc':
         return [gcEntity1, gcEntity2, gcEntity3];
       case 'lcms':
-        return [hplcMsTicPosEntity, hplcMsTicNegEntity, lcmsEntity];
+        return [hplcMsTicPosEntity, hplcMsTicNegEntity, hplcMsUvvisEntity, lcmsEntity];
       default:
         return false;
     }