@corva/ui 3.1.0-rc.4 → 3.1.0-rc.5

package/components/OffsetWellPickerV2/components/Table/index.js

@@ -1 +1,509 @@
-import e from"@babel/runtime/helpers/defineProperty";import t from"@babel/runtime/helpers/toConsumableArray";import{memo as r,useMemo as n}from"react";import i from"prop-types";import{isEqual as a,get as l,clone as o}from"lodash";import c from"moment";import s from"classnames";import{withStyles as d,Checkbox as u,Typography as f,IconButton as m}from"@material-ui/core";import p from"@material-ui/icons/Sort";import h from"@material-ui/icons/NotInterested";import{AutoSizer as b,Table as g,Column as y}from"react-virtualized";import{SizeMe as w}from"react-sizeme";import{METRICS_LIST as v,TABLE_COLUMNS as C,SETTINGS_COLUMN as x,METRICS_KEYS as _}from"../../constants.js";import k from"./SubjectIndicator.js";import W from"./MetricsAddMenu.js";import O from"./MetricsSelect.js";import{getUnitDisplay as N,convertValue as R}from"../../../../utils/index.js";import{jsx as j,Fragment as D,jsxs as I}from"react/jsx-runtime";function S(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function T(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?S(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):S(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}var A=48,q=44,z="WellsTable";function M(e,t){var r,n=l(e,t);switch(t){case"distance":r=Number.isFinite(n)?parseFloat(n).toFixed(2):"N/A";break;case"rigReleaseDate":r=Number.isFinite(n)?c.unix(n).format("MM/DD/YYYY"):"N/A";break;default:r=n||""}return r}function B(r){var i=r.subjectWell,c=r.wells,d=r.offsetWells,w=r.metricsKeys,S=r.isMetricsLoading,A=r.sortInfo,q=r.unusableWellAlarm,B=r.dialogWidth,L=r.classes,P=r.onChangeMetricsKeys,K=r.onAddOffsetWell,F=r.onDeleteOffsetWell,H=r.onAddAllOffsetWells,Y=r.onDeleteAllOffsetWells,E=r.onSorting,V=n((function(){return c.filter((function(e){return e.is_usable}))}),[c]),G=n((function(){var e=V.map((function(e){return e.id})).sort(),t=d.map((function(e){return e.id})).sort();return e.length&&a(e,t)}),[V,d]),X=n((function(){return w.reduce((function(e,t){return e.concat(v.filter((function(e){return e.key===t})))}),[])}),[w]),$=n((function(){return[].concat(t(C),t(X.map((function(e){return T(T({},e),{},{width:240})}))),[x])}),[X]),J=n((function(){if(!B||B<=0)return{};var e={},t=[];return $.filter((function(e){return Number.isFinite(e.width)})).forEach((function(r){e[r.key]=r.width-1,t.push(r.width-1)})),$.filter((function(e){return!Number.isFinite(e.width)})).forEach((function(r){var n=t.reduce((function(e,t){return e+t}),0),i=Math.floor((B-n)/($.length-t.length)),a=r.minWidth||200,l=i<a?a:i;e[r.key]=l-1,t.push(l-1)})),e}),[B,$]),Q=n((function(){return Object.values(J).reduce((function(e,t){return e+t}),0)}),[J]),U=function(e){P(e)},Z=function(e){e.target.checked?H():Y()},ee=function(t){return j(m,{"data-testid":"".concat(z,"_sortRemove"),"data-not-migrated-muiiconbutton":!0,className:L.sortIconButton,onClick:function(){return function(e){E(e)}(t)},children:t!==A.key?j(h,{className:L.sortIcon}):j(p,{className:s(L.sortIcon,e({},L.ascendingSortIcon,1===A.direction))})})},te=function(e){var t,r=e.label,n=e.dataKey;if("name"===n)return I("div",{"data-testid":"".concat(z,"_wellHeader"),className:L.nameWrapper,children:[j(u,{"data-testid":"".concat(z,"_selectAll"),classes:{checked:L.nameCheckBox,indeterminate:L.nameCheckBox},onClick:Z,checked:G,indeterminate:d.length>0&&!G,size:"small"}),j(f,{className:s(L.cell,L.nameCell),children:r}),ee(n)]});if(w.includes(n)){var i=X.find((function(e){return e.key===n})),a=X.findIndex((function(e){return e.key===n}));return I("div",{"data-testid":"".concat(z,"_header_").concat(n),className:L.metricsColumn,children:[j(O,{items:v,currentValue:n,onChange:(t=a,function(e){var r=o(w);r[t]=e,P(r)})}),j(f,{className:s(L.cell,L.unitCell),children:i.unitType?"(".concat(N(i.unitType,i.to),")"):""}),ee(n)]})}return n===x.key?j("div",{className:L.settingsCell,children:j(W,{metricsKeys:w,onChange:U})}):I("div",{"data-testid":"".concat(z,"_header_").concat(r),className:L.nameWrapper,children:[j(f,{className:L.cell,children:r}),ee(n)]})},re=function(t){var r=t.rowData,n=t.dataKey;if("name"===n)return I("div",{"data-testid":"".concat(z,"_row_").concat(r.name),className:L.nameWrapper,children:[j(u,{"data-testid":"".concat(z,"_wellCheckbox"),color:"primary",checked:d.findIndex((function(e){return e.id===r.id}))>-1,onChange:function(e){return t=r.id,void(e.target.checked?K(t):F(t));var t},size:"small",disabled:!r.is_usable}),j(f,{"data-testid":"".concat(z,"_wellName"),className:s(L.tableCellLabel,e({},L.tableCellLabelDisabled,!r.is_usable)),children:M(r,n)}),i&&r.id===i.id&&j(k,{})]});if(n===x.key)return j("div",{className:L.settingsCell,children:!r.is_usable&&j(f,{className:L.errorMsg,children:q})});var a=null;if(w.includes(n)){var o=X.find((function(e){return e.key===n}));a=function(e,t,r){var n=l(e,t.key);if(_.includes(t.key)){if(Number.isFinite(n)||n)return t.unitType?R(n,t.unitType,t.from,t.to):n;if(r)return"loading..."}return""}(r,o,S)}else a=M(r,n);return j(f,{"data-testid":"".concat(z,"_cell}"),className:s(L.cell,L.tableCellLabel,e({},L.tableCellLabelDisabled,!r.is_usable)),children:a})};return j(D,{children:j("div",{className:L.tableWrapper,children:j(b,{children:function(e){var t=e.height;return j(g,{width:Q,height:t,headerHeight:44,rowHeight:48,rowCount:c.length,rowGetter:function(e){var t=e.index;return c[t]},className:L.table,children:$.map((function(e){return j(y,{width:J[e.key]||200,dataKey:e.key,label:e.label,headerRenderer:te,cellRenderer:re},e.key)}))})}})})})}B.propTypes={subjectWell:i.shape({id:i.number}),wells:i.arrayOf(i.shape({})).isRequired,offsetWells:i.arrayOf(i.shape({})).isRequired,metricsKeys:i.arrayOf(i.string).isRequired,isMetricsLoading:i.bool.isRequired,sortInfo:i.shape({key:i.string.isRequired,direction:i.number.isRequired}).isRequired,classes:i.shape({}).isRequired,onChangeMetricsKeys:i.func.isRequired,onAddOffsetWell:i.func.isRequired,onDeleteOffsetWell:i.func.isRequired,onAddAllOffsetWells:i.func.isRequired,onDeleteAllOffsetWells:i.func.isRequired,onSorting:i.func.isRequired,unusableWellAlarm:i.string.isRequired,dialogWidth:i.number},B.defaultProps={subjectWell:null,dialogWidth:0};var L=d((function(e){return{title:{display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",marginBottom:"15px",marginTop:"16px"},tableWrapper:{marginTop:"24px",overflowX:"auto",overflowY:"hidden",position:"relative",height:2e3,minHeight:150,borderTop:"1px solid rgba(81, 81, 81, 1)"},table:{"& .ReactVirtualized__Table__headerRow":{textTransform:"none",borderBottom:e.isLightTheme?"1px solid rgba(224, 224, 224, 1)":"1px solid rgba(81, 81, 81, 1)"},"& .ReactVirtualized__Table__row":{borderBottom:e.isLightTheme?"1px solid rgba(224, 224, 224, 1)":"1px solid rgba(81, 81, 81, 1)","&:hover":{backgroundColor:"rgba(255, 255, 255, 0.03)"}},"& .ReactVirtualized__Table__Grid":{outline:"none"},"& .ReactVirtualized__Table__headerColumn":{outline:"none"}},cell:{color:"rgba(255, 255, 255, 0.54)",padding:"5px 10px",fontSize:"12px",whiteSpace:"nowrap"},nameWrapper:{display:"flex",alignItems:"center"},nameCell:{padding:0},unitCell:{padding:0},tableRowHoverEnabled:{"&:hover":{backgroundColor:"rgba(255, 255, 255, 0.1)"}},settingsCell:{textAlign:"right"},rigReleaseCell:{whiteSpace:"nowrap"},nameCheckBox:{color:e.palette.primary.main},bodyCell:{fontSize:"0.90rem",padding:"5px 10px"},metricsCellWrapper:{display:"flex",flexDirection:"row",alignContent:"center"},tableTitle:{fontSize:"16px",lineHeight:"140.6%",marginTop:10},tableTitleItems:{display:"flex",flexDirection:"row",alignItems:"center"},addWellInput:{width:300,marginTop:10},sortIconButton:{padding:"8px","&:hover $sortIcon":{color:"#fff"}},ascendingSortIcon:{transform:"scaleY(-1)"},sortIcon:{fontSize:"14px",color:"#BDBDBD"},metricsColumn:{display:"flex",alignItems:"center"},tableCellLabel:{fontSize:"0.90rem",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis",color:"#fff"},tableCellLabelDisabled:{color:"#C4C4C4"},errorMsg:{color:"#C4C4C4",fontStyle:"italic",fontSize:"14px",padding:"0 16px",whiteSpace:"nowrap"}}}))(r((function(e){return j(w,{monitorWidth:!0,children:function(t){var r=t.size;return j(B,T({dialogWidth:r.width},e))}})})));export{q as HEADER_HEIGHT,A as ROW_HEIGHT,L as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { memo, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { isEqual, get, clone } from 'lodash';
+import moment from 'moment';
+import classNames from 'classnames';
+import { withStyles, Checkbox, Typography, IconButton } from '@material-ui/core';
+import SortIcon from '@material-ui/icons/Sort';
+import NotInterestedIcon from '@material-ui/icons/NotInterested';
+import { AutoSizer, Table, Column } from 'react-virtualized';
+import { SizeMe } from 'react-sizeme';
+import { METRICS_LIST, TABLE_COLUMNS, SETTINGS_COLUMN, METRICS_KEYS } from '../../constants.js';
+import SubjectIndicator from './SubjectIndicator.js';
+import MetricsAddMenu from './MetricsAddMenu.js';
+import MetricsSelect from './MetricsSelect.js';
+import { getUnitDisplay, convertValue } from '../../../../utils/index.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ROW_HEIGHT = 48;
+var HEADER_HEIGHT = 44;
+var PAGE_NAME = 'WellsTable';
+var muiStyles = function muiStyles(theme) {
+  return {
+    title: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      marginBottom: '15px',
+      marginTop: '16px'
+    },
+    tableWrapper: {
+      marginTop: '24px',
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      position: 'relative',
+      height: 2000,
+      minHeight: 150,
+      borderTop: '1px solid rgba(81, 81, 81, 1)'
+    },
+    table: {
+      '& .ReactVirtualized__Table__headerRow': {
+        textTransform: 'none',
+        borderBottom: theme.isLightTheme ? '1px solid rgba(224, 224, 224, 1)' : '1px solid rgba(81, 81, 81, 1)'
+      },
+      '& .ReactVirtualized__Table__row': {
+        borderBottom: theme.isLightTheme ? '1px solid rgba(224, 224, 224, 1)' : '1px solid rgba(81, 81, 81, 1)',
+        '&:hover': {
+          backgroundColor: 'rgba(255, 255, 255, 0.03)'
+        }
+      },
+      '& .ReactVirtualized__Table__Grid': {
+        outline: 'none'
+      },
+      '& .ReactVirtualized__Table__headerColumn': {
+        outline: 'none'
+      }
+    },
+    cell: {
+      color: 'rgba(255, 255, 255, 0.54)',
+      padding: '5px 10px',
+      fontSize: '12px',
+      whiteSpace: 'nowrap'
+    },
+    nameWrapper: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    nameCell: {
+      padding: 0
+    },
+    unitCell: {
+      padding: 0
+    },
+    tableRowHoverEnabled: {
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)'
+      }
+    },
+    settingsCell: {
+      textAlign: 'right'
+    },
+    rigReleaseCell: {
+      whiteSpace: 'nowrap'
+    },
+    nameCheckBox: {
+      color: theme.palette.primary.main
+    },
+    bodyCell: {
+      fontSize: '0.90rem',
+      padding: '5px 10px'
+    },
+    metricsCellWrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignContent: 'center'
+    },
+    tableTitle: {
+      fontSize: '16px',
+      lineHeight: '140.6%',
+      marginTop: 10
+    },
+    tableTitleItems: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    addWellInput: {
+      width: 300,
+      marginTop: 10
+    },
+    sortIconButton: {
+      padding: '8px',
+      '&:hover $sortIcon': {
+        color: '#fff'
+      }
+    },
+    ascendingSortIcon: {
+      transform: 'scaleY(-1)'
+    },
+    sortIcon: {
+      fontSize: '14px',
+      color: '#BDBDBD'
+    },
+    metricsColumn: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    tableCellLabel: {
+      fontSize: '0.90rem',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      color: '#fff'
+    },
+    tableCellLabelDisabled: {
+      color: '#C4C4C4'
+    },
+    errorMsg: {
+      color: '#C4C4C4',
+      fontStyle: 'italic',
+      fontSize: '14px',
+      padding: '0 16px',
+      whiteSpace: 'nowrap'
+    }
+  };
+};
+function formatItem(item, key) {
+  var value = get(item, key);
+  var result;
+  switch (key) {
+    case 'distance':
+      result = Number.isFinite(value) ? parseFloat(value).toFixed(2) : 'N/A';
+      break;
+    case 'rigReleaseDate':
+      result = Number.isFinite(value) ? moment.unix(value).format('MM/DD/YYYY') : 'N/A';
+      break;
+    default:
+      result = value || '';
+  }
+  return result;
+}
+function formatMetricItem(item, metric, isMetricsLoading) {
+  var value = get(item, metric.key);
+  if (METRICS_KEYS.includes(metric.key)) {
+    if (Number.isFinite(value) || value) {
+      return metric.unitType ? convertValue(value, metric.unitType, metric.from, metric.to) : value;
+    }
+    if (isMetricsLoading) {
+      return 'loading...';
+    }
+  }
+  return '';
+}
+
+/* eslint-disable react/no-array-index-key */
+function WellsTable(_ref) {
+  var subjectWell = _ref.subjectWell,
+    wells = _ref.wells,
+    offsetWells = _ref.offsetWells,
+    metricsKeys = _ref.metricsKeys,
+    isMetricsLoading = _ref.isMetricsLoading,
+    sortInfo = _ref.sortInfo,
+    unusableWellAlarm = _ref.unusableWellAlarm,
+    dialogWidth = _ref.dialogWidth,
+    classes = _ref.classes,
+    onChangeMetricsKeys = _ref.onChangeMetricsKeys,
+    onAddOffsetWell = _ref.onAddOffsetWell,
+    onDeleteOffsetWell = _ref.onDeleteOffsetWell,
+    onAddAllOffsetWells = _ref.onAddAllOffsetWells,
+    onDeleteAllOffsetWells = _ref.onDeleteAllOffsetWells,
+    onSorting = _ref.onSorting;
+  // NOTE: Get usable wells & offset wells only
+  var usableWells = useMemo(function () {
+    return wells.filter(function (item) {
+      return item.is_usable;
+    });
+  }, [wells]);
+
+  // NOTE: Just compare among usable wells
+  var isAllUsableWellsSelected = useMemo(function () {
+    var usableWellIds = usableWells.map(function (well) {
+      return well.id;
+    }).sort();
+    var offsetWellIds = offsetWells.map(function (well) {
+      return well.id;
+    }).sort();
+    return usableWellIds.length && isEqual(usableWellIds, offsetWellIds);
+  }, [usableWells, offsetWells]);
+  var metricsColumns = useMemo(function () {
+    // NOTE: Pay attention to the order of metrics and duplication
+    return metricsKeys.reduce(function (result, key) {
+      return result.concat(METRICS_LIST.filter(function (item) {
+        return item.key === key;
+      }));
+    }, []);
+  }, [metricsKeys]);
+
+  // NOTE: Table columns
+  var tableColumns = useMemo(function () {
+    return [].concat(_toConsumableArray(TABLE_COLUMNS), _toConsumableArray(metricsColumns.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        width: 240
+      });
+    })), [SETTINGS_COLUMN]);
+  }, [metricsColumns]);
+
+  // NOTE: Calculate width of each table columns
+  var columnWidthDict = useMemo(function () {
+    if (!dialogWidth || dialogWidth <= 0) {
+      return {};
+    }
+    var result = {};
+    // NOTE: Keep the columns that had been adjusted due to expected width is smaller than min width
+    var adjustedColumns = [];
+
+    // NOTE: Give fixed width to the columns with "width" field
+    tableColumns.filter(function (column) {
+      return Number.isFinite(column.width);
+    }).forEach(function (column) {
+      result[column.key] = column.width - 1;
+      adjustedColumns.push(column.width - 1);
+    });
+    tableColumns.filter(function (column) {
+      return !Number.isFinite(column.width);
+    }).forEach(function (column) {
+      // NOTE: Width sum of adjusted columns
+      var sumOfAdjustColumnWidth = adjustedColumns.reduce(function (subResult, columnWidth) {
+        return subResult + columnWidth;
+      }, 0);
+      // NOTE: Expected space for the column
+      var calculatedWidth = Math.floor((dialogWidth - sumOfAdjustColumnWidth) / (tableColumns.length - adjustedColumns.length));
+      var requiredWidth = column.minWidth || 200;
+      var adjustedWidth = calculatedWidth < requiredWidth ? requiredWidth : calculatedWidth;
+      result[column.key] = adjustedWidth - 1;
+      adjustedColumns.push(adjustedWidth - 1);
+    });
+    return result;
+  }, [dialogWidth, tableColumns]);
+
+  // NOTE: Calculate table width from adjusted columns width
+  var tableWidth = useMemo(function () {
+    return Object.values(columnWidthDict).reduce(function (result, item) {
+      return result + item;
+    }, 0);
+  }, [columnWidthDict]);
+  var handleChangeMetricsKeys = function handleChangeMetricsKeys(newKeys) {
+    onChangeMetricsKeys(newKeys);
+  };
+  var handleChangeColumnMetricsKey = function handleChangeColumnMetricsKey(columnIdx) {
+    return function (newKey) {
+      var newKeys = clone(metricsKeys);
+      newKeys[columnIdx] = newKey;
+      onChangeMetricsKeys(newKeys);
+    };
+  };
+  var handleSorting = function handleSorting(dataKey) {
+    onSorting(dataKey);
+  };
+  var handleToggleWell = function handleToggleWell(targetId, checked) {
+    if (checked) {
+      onAddOffsetWell(targetId);
+    } else {
+      onDeleteOffsetWell(targetId);
+    }
+  };
+  var handleToggleWells = function handleToggleWells(e) {
+    if (e.target.checked) {
+      onAddAllOffsetWells();
+    } else {
+      onDeleteAllOffsetWells();
+    }
+  };
+  var sortIconRenderer = function sortIconRenderer(dataKey) {
+    return /*#__PURE__*/jsx(IconButton, {
+      "data-testid": "".concat(PAGE_NAME, "_sortRemove"),
+      "data-not-migrated-muiiconbutton": true,
+      className: classes.sortIconButton,
+      onClick: function onClick() {
+        return handleSorting(dataKey);
+      },
+      children: dataKey !== sortInfo.key ? /*#__PURE__*/jsx(NotInterestedIcon, {
+        className: classes.sortIcon
+      }) : /*#__PURE__*/jsx(SortIcon, {
+        className: classNames(classes.sortIcon, _defineProperty({}, classes.ascendingSortIcon, sortInfo.direction === 1))
+      })
+    });
+  };
+
+  // NOTE: Table renderers
+  var headerRenderer = function headerRenderer(headerData) {
+    var label = headerData.label,
+      dataKey = headerData.dataKey;
+
+    // name column
+    if (dataKey === 'name') {
+      return /*#__PURE__*/jsxs("div", {
+        "data-testid": "".concat(PAGE_NAME, "_wellHeader"),
+        className: classes.nameWrapper,
+        children: [/*#__PURE__*/jsx(Checkbox, {
+          "data-testid": "".concat(PAGE_NAME, "_selectAll"),
+          classes: {
+            checked: classes.nameCheckBox,
+            indeterminate: classes.nameCheckBox
+          },
+          onClick: handleToggleWells,
+          checked: isAllUsableWellsSelected,
+          indeterminate: offsetWells.length > 0 && !isAllUsableWellsSelected,
+          size: "small"
+        }), /*#__PURE__*/jsx(Typography, {
+          className: classNames(classes.cell, classes.nameCell),
+          children: label
+        }), sortIconRenderer(dataKey)]
+      });
+    }
+
+    // metrics columns
+    if (metricsKeys.includes(dataKey)) {
+      var currentMetric = metricsColumns.find(function (item) {
+        return item.key === dataKey;
+      });
+      var metricIndex = metricsColumns.findIndex(function (item) {
+        return item.key === dataKey;
+      });
+      return /*#__PURE__*/jsxs("div", {
+        "data-testid": "".concat(PAGE_NAME, "_header_").concat(dataKey),
+        className: classes.metricsColumn,
+        children: [/*#__PURE__*/jsx(MetricsSelect, {
+          items: METRICS_LIST,
+          currentValue: dataKey,
+          onChange: handleChangeColumnMetricsKey(metricIndex)
+        }), /*#__PURE__*/jsx(Typography, {
+          className: classNames(classes.cell, classes.unitCell),
+          children: currentMetric.unitType ? "(".concat(getUnitDisplay(currentMetric.unitType, currentMetric.to), ")") : ''
+        }), sortIconRenderer(dataKey)]
+      });
+    }
+
+    // settings column
+    if (dataKey === SETTINGS_COLUMN.key) {
+      return /*#__PURE__*/jsx("div", {
+        className: classes.settingsCell,
+        children: /*#__PURE__*/jsx(MetricsAddMenu, {
+          metricsKeys: metricsKeys,
+          onChange: handleChangeMetricsKeys
+        })
+      });
+    }
+    return /*#__PURE__*/jsxs("div", {
+      "data-testid": "".concat(PAGE_NAME, "_header_").concat(label),
+      className: classes.nameWrapper,
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: classes.cell,
+        children: label
+      }), sortIconRenderer(dataKey)]
+    });
+  };
+  var cellRenderer = function cellRenderer(_ref2) {
+    var well = _ref2.rowData,
+      dataKey = _ref2.dataKey;
+    if (dataKey === 'name') {
+      return /*#__PURE__*/jsxs("div", {
+        "data-testid": "".concat(PAGE_NAME, "_row_").concat(well.name),
+        className: classes.nameWrapper,
+        children: [/*#__PURE__*/jsx(Checkbox, {
+          "data-testid": "".concat(PAGE_NAME, "_wellCheckbox"),
+          color: "primary",
+          checked: offsetWells.findIndex(function (offsetWell) {
+            return offsetWell.id === well.id;
+          }) > -1,
+          onChange: function onChange(e) {
+            return handleToggleWell(well.id, e.target.checked);
+          },
+          size: "small",
+          disabled: !well.is_usable
+        }), /*#__PURE__*/jsx(Typography, {
+          "data-testid": "".concat(PAGE_NAME, "_wellName"),
+          className: classNames(classes.tableCellLabel, _defineProperty({}, classes.tableCellLabelDisabled, !well.is_usable)),
+          children: formatItem(well, dataKey)
+        }), subjectWell && well.id === subjectWell.id && /*#__PURE__*/jsx(SubjectIndicator, {})]
+      });
+    }
+
+    // settings column
+    if (dataKey === SETTINGS_COLUMN.key) {
+      return /*#__PURE__*/jsx("div", {
+        className: classes.settingsCell,
+        children: !well.is_usable && /*#__PURE__*/jsx(Typography, {
+          className: classes.errorMsg,
+          children: unusableWellAlarm
+        })
+      });
+    }
+    var formattedCellData = null;
+    if (metricsKeys.includes(dataKey)) {
+      var currentMetric = metricsColumns.find(function (item) {
+        return item.key === dataKey;
+      });
+      formattedCellData = formatMetricItem(well, currentMetric, isMetricsLoading);
+    } else {
+      formattedCellData = formatItem(well, dataKey);
+    }
+    return /*#__PURE__*/jsx(Typography, {
+      "data-testid": "".concat(PAGE_NAME, "_cell}"),
+      className: classNames(classes.cell, classes.tableCellLabel, _defineProperty({}, classes.tableCellLabelDisabled, !well.is_usable)),
+      children: formattedCellData
+    });
+  };
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx("div", {
+      className: classes.tableWrapper,
+      children: /*#__PURE__*/jsx(AutoSizer, {
+        children: function children(_ref3) {
+          var height = _ref3.height;
+          return /*#__PURE__*/jsx(Table, {
+            width: tableWidth,
+            height: height,
+            headerHeight: HEADER_HEIGHT,
+            rowHeight: ROW_HEIGHT,
+            rowCount: wells.length,
+            rowGetter: function rowGetter(_ref4) {
+              var index = _ref4.index;
+              return wells[index];
+            },
+            className: classes.table,
+            children: tableColumns.map(function (column) {
+              return /*#__PURE__*/jsx(Column, {
+                width: columnWidthDict[column.key] || 200,
+                dataKey: column.key,
+                label: column.label,
+                headerRenderer: headerRenderer,
+                cellRenderer: cellRenderer
+              }, column.key);
+            })
+          });
+        }
+      })
+    })
+  });
+}
+WellsTable.propTypes = {
+  subjectWell: PropTypes.shape({
+    id: PropTypes.number
+  }),
+  wells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  offsetWells: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  metricsKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isMetricsLoading: PropTypes.bool.isRequired,
+  sortInfo: PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    direction: PropTypes.number.isRequired
+  }).isRequired,
+  classes: PropTypes.shape({}).isRequired,
+  onChangeMetricsKeys: PropTypes.func.isRequired,
+  onAddOffsetWell: PropTypes.func.isRequired,
+  onDeleteOffsetWell: PropTypes.func.isRequired,
+  onAddAllOffsetWells: PropTypes.func.isRequired,
+  onDeleteAllOffsetWells: PropTypes.func.isRequired,
+  onSorting: PropTypes.func.isRequired,
+  unusableWellAlarm: PropTypes.string.isRequired,
+  dialogWidth: PropTypes.number
+  // isAdvancedSearch: PropTypes.bool,
+};
+
+WellsTable.defaultProps = {
+  subjectWell: null,
+  dialogWidth: 0
+  // isAdvancedSearch: false,
+};
+
+// NOTE: Monitor the dialog width for table cell width
+function WithSizeMe(props) {
+  return /*#__PURE__*/jsx(SizeMe, {
+    monitorWidth: true,
+    children: function children(_ref5) {
+      var size = _ref5.size;
+      return /*#__PURE__*/jsx(WellsTable, _objectSpread({
+        dialogWidth: size.width
+      }, props));
+    }
+  });
+}
+var WellsTable$1 = withStyles(muiStyles)(memo(WithSizeMe));
+
+export { HEADER_HEIGHT, ROW_HEIGHT, WellsTable$1 as default };
+//# sourceMappingURL=index.js.map

package/components/OffsetWellPickerV2/constants.js

@@ -1 +1,95 @@
-import e from"@babel/runtime/helpers/toConsumableArray";import{sortBy as t}from"lodash";import"../../utils/index.js";import*as r from"../../utils/metrics/metricsConfig.js";var i=r,n={formation:"formation",stringDesign:"stringDesign",program:"programName",basin:"basin",county:"county",area:"area"},o=[{key:n.program,title:"Program/BU",size:130,renderValue:function(e){return 0===e?"All":"".concat(e," Programs/BUs")}},{key:n.basin,title:"Basin",size:130,renderValue:function(e){return 0===e?"All":"".concat(e," Basins")}},{key:n.county,title:"County",size:130,renderValue:function(e){return 0===e?"All":"".concat(e," Counties")}},{key:n.area,title:"Area",size:130,renderValue:function(e){return 0===e?"All":"".concat(e," Areas")}},{key:n.formation,title:"Target Formation",size:130,renderValue:function(e){return 0===e?"All":"".concat(e," Formations")}},{key:n.stringDesign,title:"String Design",size:130,renderValue:function(e){return 0===e?"All":"".concat(e," Designs")}}],a=t([i.weight_to_weight_average,i.bottom_to_slips_average,i.drilling_connection_average,i.slips_to_bottom_average,i.hole_depth,i.hole_depth_change,i.drilled_feet_rotary,i.drilled_feet_slide,i.rop_gross,i.rop,i.rop_rotary,i.rop_slide,i.drilled_feet_rotary_percentage,i.drilled_feet_slide_percentage,i.on_bottom_percentage,i.on_bottom_time,i.cost_per_ft,i.cost_per_lat_ft,i.feet_per_day,i.tripping_in_speed_cased,i.tripping_in_speed_open,i.tripping_in_speed,i.tripping_out_speed_cased,i.tripping_out_speed_open,i.tripping_out_speed].concat(e("production"!==process.env.REACT_APP_ENVIRONMENT?[i.npt,i.circulating_time,i.spud_to_rig_release_time,i.spud_to_total_depth_time]:[])),"label"),s=a.map((function(e){return e.key})),l=[{label:"Well Name",key:"name",minWidth:250},{label:"Rig",key:"rigName",width:200},{label:"Distance",key:"distance",width:120},{label:"Rig Release Date",key:"rigReleaseDate",width:150}],_={key:"settings",label:"settings",width:100},p=2,c={radius:5,filters:{},sortInfo:{key:"name",direction:1}};export{c as DEFAULT_SETTINGS,n as FILTERS,o as FILTERS_LIST,p as MAX_METRICS_COUNT,s as METRICS_KEYS,a as METRICS_LIST,_ as SETTINGS_COLUMN,l as TABLE_COLUMNS};
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { sortBy } from 'lodash';
+import '../../utils/index.js';
+import * as metricsConfig from '../../utils/metrics/metricsConfig.js';
+
+var metrics = metricsConfig;
+var FILTERS = {
+  formation: 'formation',
+  stringDesign: 'stringDesign',
+  program: 'programName',
+  basin: 'basin',
+  county: 'county',
+  area: 'area'
+};
+var FILTERS_LIST = [{
+  key: FILTERS.program,
+  title: 'Program/BU',
+  size: 130,
+  renderValue: function renderValue(length) {
+    return length === 0 ? "All" : "".concat(length, " Programs/BUs");
+  }
+}, {
+  key: FILTERS.basin,
+  title: 'Basin',
+  size: 130,
+  renderValue: function renderValue(length) {
+    return length === 0 ? "All" : "".concat(length, " Basins");
+  }
+}, {
+  key: FILTERS.county,
+  title: 'County',
+  size: 130,
+  renderValue: function renderValue(length) {
+    return length === 0 ? "All" : "".concat(length, " Counties");
+  }
+}, {
+  key: FILTERS.area,
+  title: 'Area',
+  size: 130,
+  renderValue: function renderValue(length) {
+    return length === 0 ? "All" : "".concat(length, " Areas");
+  }
+}, {
+  key: FILTERS.formation,
+  title: 'Target Formation',
+  size: 130,
+  renderValue: function renderValue(length) {
+    return length === 0 ? "All" : "".concat(length, " Formations");
+  }
+}, {
+  key: FILTERS.stringDesign,
+  title: 'String Design',
+  size: 130,
+  renderValue: function renderValue(length) {
+    return length === 0 ? "All" : "".concat(length, " Designs");
+  }
+}];
+var METRICS_LIST = sortBy([metrics.weight_to_weight_average, metrics.bottom_to_slips_average, metrics.drilling_connection_average, metrics.slips_to_bottom_average, metrics.hole_depth, metrics.hole_depth_change, metrics.drilled_feet_rotary, metrics.drilled_feet_slide, metrics.rop_gross, metrics.rop, metrics.rop_rotary, metrics.rop_slide, metrics.drilled_feet_rotary_percentage, metrics.drilled_feet_slide_percentage, metrics.on_bottom_percentage, metrics.on_bottom_time, metrics.cost_per_ft, metrics.cost_per_lat_ft, metrics.feet_per_day, metrics.tripping_in_speed_cased, metrics.tripping_in_speed_open, metrics.tripping_in_speed, metrics.tripping_out_speed_cased, metrics.tripping_out_speed_open, metrics.tripping_out_speed].concat(_toConsumableArray(process.env.REACT_APP_ENVIRONMENT !== 'production' ? [metrics.npt, metrics.circulating_time, metrics.spud_to_rig_release_time, metrics.spud_to_total_depth_time] : [])), 'label');
+var METRICS_KEYS = METRICS_LIST.map(function (item) {
+  return item.key;
+});
+var TABLE_COLUMNS = [{
+  label: 'Well Name',
+  key: 'name',
+  minWidth: 250
+}, {
+  label: 'Rig',
+  key: 'rigName',
+  width: 200
+}, {
+  label: 'Distance',
+  key: 'distance',
+  width: 120
+}, {
+  label: 'Rig Release Date',
+  key: 'rigReleaseDate',
+  width: 150
+}];
+var SETTINGS_COLUMN = {
+  key: 'settings',
+  label: 'settings',
+  width: 100
+};
+var MAX_METRICS_COUNT = 2;
+var DEFAULT_SETTINGS = {
+  radius: 5,
+  filters: {},
+  sortInfo: {
+    key: 'name',
+    direction: 1
+  }
+};
+
+export { DEFAULT_SETTINGS, FILTERS, FILTERS_LIST, MAX_METRICS_COUNT, METRICS_KEYS, METRICS_LIST, SETTINGS_COLUMN, TABLE_COLUMNS };
+//# sourceMappingURL=constants.js.map