From 8fa7e483807ca7b57d6596a9c4ce8743a8ec7af5 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <10919161+pal-abhishek@users.noreply.github.com>
Date: Thu, 28 Mar 2019 16:08:17 +0530
Subject: [PATCH] Well log fixes (#1120)

Well log minor fixes and CSS
---
 .../widget/lib/well-log-viewer/lineGraph.js   | 11 ++--
 .../widget/lib/well-log-viewer/logViewer.js   | 57 ++++++++-----------
 .../well-log-component-list.tpl.html          | 30 ++++++----
 .../well-log-component.tpl.html               |  2 +-
 .../lib/well-log-viewer/well-log-track.scss   |  2 +-
 5 files changed, 48 insertions(+), 54 deletions(-)

diff --git a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js
index 70878d284..90f084d63 100644
--- a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js
+++ b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js
@@ -36,7 +36,7 @@ var lineGraph = function(lineConfig, areaFillConfig, state, currentComponentInde
     context = d3.select(this);
 
     let margin = {top: 30, right: 10, bottom: 30, left: 10},
-      w = width*110 - margin.right - margin.left,
+      w = width*140 - margin.right - margin.left,
       h = 700 - margin.top;
 
     lineConfig.forEach(function(element, index) {
@@ -46,7 +46,7 @@ var lineGraph = function(lineConfig, areaFillConfig, state, currentComponentInde
       var data = element.data;
 
       let xScale = d3.scaleLinear().domain(lineToBeRendered.headerMin, lineToBeRendered.headerMax).range([-20 , w-20]);
-      let yScale = d3.scaleLinear().domain(d3.min(data.data.map(function(d){return d[0]})),d3.max(data.data.map(function(d){return d[0]}))).range([h, 0]);
+      let yScale = d3.scaleLinear().domain(d3.extent(data.data.map(d => d[0]))).range([h, 0]);
 
       let line = d3.line()
         .y(d => yScale(d[0]))
@@ -106,7 +106,6 @@ var lineGraph = function(lineConfig, areaFillConfig, state, currentComponentInde
       }
 
       function update() {
-        var leftPadding = margin.left + 15;
         yScale.domain(d3.extent(data.data, function(d) { return d[0]; }));
         xScale.domain(d3.extent(data.data, function(d) { return d[1]; }));
 
@@ -116,7 +115,7 @@ var lineGraph = function(lineConfig, areaFillConfig, state, currentComponentInde
           .data([data.data])
           .attr('class', 'grid')
           .attr('d', line)
-          .attr("transform", "translate(" + leftPadding + ", 0)")
+          .attr("transform", "translate(" + margin.left + ", 0)")
           .attr('stroke', lineToBeRendered.color)
           .attr('fill', 'none')
           .attr('stroke-width', lineToBeRendered.lineWeight)
@@ -139,7 +138,7 @@ var lineGraph = function(lineConfig, areaFillConfig, state, currentComponentInde
               .select('.areapath'+index+currentComponentIndex)
               .select('path')
               .data([combinedData])
-              .attr("transform", "translate(" + leftPadding + ", 0)")
+              .attr("transform", "translate(" + margin.left + ", 0)")
               .attr('d', area)
               .attr('fill', areaFillConfig.color)
               .style("opacity", areaFillConfig.opacity);
@@ -148,7 +147,7 @@ var lineGraph = function(lineConfig, areaFillConfig, state, currentComponentInde
               .select('.areapath'+index+currentComponentIndex)
               .select('path')
               .data([data.data])
-              .attr("transform", "translate(" + leftPadding + ", 0)")
+              .attr("transform", "translate(" + margin.left + ", 0)")
               .attr('d', area)
               .attr('fill', areaFillConfig.color)
               .style("opacity", areaFillConfig.opacity);
diff --git a/ui/src/app/widget/lib/well-log-viewer/logViewer.js b/ui/src/app/widget/lib/well-log-viewer/logViewer.js
index 6d494bdb0..09be600fc 100644
--- a/ui/src/app/widget/lib/well-log-viewer/logViewer.js
+++ b/ui/src/app/widget/lib/well-log-viewer/logViewer.js
@@ -20,8 +20,8 @@ import * as d3 from 'd3';
 import {linearGrid} from './linearGrid';
 import {headerLegend} from './headerLegend';
 import {lineGraph} from './lineGraph';
-import {timeYaxis} from './timeYaxis';
-import {mudLog} from './mudLog';
+// import {timeYaxis} from './timeYaxis';
+// import {mudLog} from './mudLog';
 import './logViewer.css';
 
 // var loadConfig = require('./config');
@@ -80,38 +80,30 @@ export default function loadLogViewer(ctx, sequence){
       config.Track.forEach(function(track){
         var trackObj = [];
         var graphElementsNumber = 0;
-        track.component.forEach(function(componentObj){
-          if(componentObj.cType === 'Grid'){
-            var lnGrid = linearGrid(componentObj, datasourceFilter(componentObj, dArray), state, graphElementsNumber, parseInt(track.width));
-            trackObj.push(lnGrid);
-            graphElementsNumber+=1;
-          }
-          if(componentObj.cType === 'Time Y axis'){
-             var tYaxis = timeYaxis(componentObj, datasourceFilter(componentObj, dArray), state, graphElementsNumber, parseInt(track.width));
-            trackObj.push(tYaxis);
-            graphElementsNumber+=1;
-          }
-          if(componentObj.cType === 'Line'){
-            if(angular.isArray(componentObj.lines)){
-              var lineData = [];
-              componentObj.lines.forEach(function(line) {
-                var hLegend = headerLegend(line, state, graphElementsNumber, parseInt(track.width));
-                trackObj.push(hLegend);
-                graphElementsNumber+=1;
-                lineData.push({'line': line, 'data': datasourceFilter(line, dArray)}  )
-              })
-              var lnGraph = lineGraph(lineData, componentObj.areaFill, state, graphElementsNumber, parseInt(track.width));
-              trackObj.push(lnGraph);
+
+
+        let gridComponent = track.component.find(componentObj => componentObj.cType === 'Grid')
+        if(gridComponent){
+          var lnGrid = linearGrid(gridComponent, datasourceFilter(gridComponent, dArray), state, graphElementsNumber, parseInt(track.width));
+          trackObj.push(lnGrid);
+          graphElementsNumber+=1;
+        }
+
+        let lineComponent = track.component.find(componentObj => componentObj.cType === 'Line')
+        if(lineComponent) {
+          if(angular.isArray(lineComponent.lines)){
+            var lineData = [];
+            lineComponent.lines.forEach(function(line) {
+              var hLegend = headerLegend(line, state, graphElementsNumber, parseInt(track.width));
+              trackObj.push(hLegend);
               graphElementsNumber+=1;
-            }
-          }
-          if(componentObj.cType === 'Mud Log Viewer'){
-            var mdlog = mudLog(componentObj, datasourceFilter(componentObj, dArray), state, graphElementsNumber, parseInt(track.width));
-            trackObj.push(mdlog);
+              lineData.push({'line': line, 'data': datasourceFilter(line, dArray)}  )
+            })
+            var lnGraph = lineGraph(lineData, lineComponent.areaFill, state, graphElementsNumber, parseInt(track.width));
+            trackObj.push(lnGraph);
             graphElementsNumber+=1;
           }
-
-        })
+        }
         buildArray.push(trackObj);
       })
      }
@@ -138,9 +130,6 @@ export default function loadLogViewer(ctx, sequence){
              .attr("class", "linearGrid")
         }
 
-        track.sort(function(left, right) {
-          left.order - right.order;
-        });
         track.forEach(function(component){
             d3.select(trackId)
               .call(component);
diff --git a/ui/src/app/widget/lib/well-log-viewer/well-log-component-list.tpl.html b/ui/src/app/widget/lib/well-log-viewer/well-log-component-list.tpl.html
index a62b02429..8dc66d000 100644
--- a/ui/src/app/widget/lib/well-log-viewer/well-log-component-list.tpl.html
+++ b/ui/src/app/widget/lib/well-log-viewer/well-log-component-list.tpl.html
@@ -32,18 +32,24 @@
 
                     <v-pane id="{{ ::pane.id }}" ng-repeat="component in trackDetail.component" expanded="pane.isExpanded">
                         <v-pane-header id="{{ ::pane.id }}-header" style="border:outset;">
-                            <lable class="track-label">{{ componentName(component) }}  {{ 'wellLog.component' | translate}}</lable>
-                            <md-button class="md-icon-button md-primary comp-btn"
-                                       aria-label="{{ 'action.remove' | translate }}"
-                            ng-click="removeComponent($event,component.id)">
-                                <md-tooltip md-direction="top">
-                                    {{ 'action.remove' | translate }}
-                                </md-tooltip>
-                                <md-icon aria-label="{{ 'action.delete' | translate }}"
-                                         class="material-icons">
-                                    close
-                                </md-icon>
-                            </md-button>
+                            <div layout="row" layout-sm="column">
+                                <div flex>
+                                    <lable class="track-label">{{ componentName(component) }}  {{ 'wellLog.component' | translate}}</lable>
+                                </div>
+                                <div flex>
+                                    <md-button class="md-icon-button md-primary comp-btn"
+                                               aria-label="{{ 'action.remove' | translate }}"
+                                               ng-click="removeComponent($event,component.id)">
+                                        <md-tooltip md-direction="top">
+                                            {{ 'action.remove' | translate }}
+                                        </md-tooltip>
+                                        <md-icon aria-label="{{ 'action.delete' | translate }}"
+                                                 class="material-icons">
+                                            close
+                                        </md-icon>
+                                    </md-button>
+                                </div>
+                            </div>
                         </v-pane-header>
 
                         <v-pane-content id="{{ ::pane.id }}-content" aria-labelledby="{{ ::pane.id }}-header">
diff --git a/ui/src/app/widget/lib/well-log-viewer/well-log-component.tpl.html b/ui/src/app/widget/lib/well-log-viewer/well-log-component.tpl.html
index 68e5eb21f..52247f1bf 100644
--- a/ui/src/app/widget/lib/well-log-viewer/well-log-component.tpl.html
+++ b/ui/src/app/widget/lib/well-log-viewer/well-log-component.tpl.html
@@ -28,7 +28,7 @@
         <v-accordion id="accordionline" class="vAccordion--default" control="accordionA" onexpand="expandCallback(index, id)" oncollapse="collapseCallback(index, id)">
             <v-pane id="{{ ::pane.id }}" ng-repeat="line in lines()" expanded="pane.isExpanded">
                 <v-pane-header id="{{ ::pane.id }}-header" style="border:outset;">
-                    <lable class="line-label">{{ 'wellLog.line' | translate}} {{line.id}}</lable>
+                    <lable class="line-label">{{ line.headerName }} {{ 'wellLog.line' | translate}} - {{ line.id }}</lable>
                     <md-button class="md-icon-button md-primary comp-btn"
                                 aria-label="{{ 'action.remove' | translate }}"
                     ng-click="removeLine($event,line.id)">
diff --git a/ui/src/app/widget/lib/well-log-viewer/well-log-track.scss b/ui/src/app/widget/lib/well-log-viewer/well-log-track.scss
index 5faf2b79f..a4b41f510 100644
--- a/ui/src/app/widget/lib/well-log-viewer/well-log-track.scss
+++ b/ui/src/app/widget/lib/well-log-viewer/well-log-track.scss
@@ -41,7 +41,7 @@
     margin-left: 20px;
  }
  .comp-btn{
-  margin-left:82% !important;
+  margin-left:77% !important;
  }
  .addWidget .track-btn{
     margin-left:82% !important;