@corva/ui 0.38.0-5 → 0.38.0-6

package/src/components/PadOffsetsPicker/StagesSelector.js

@@ -0,0 +1,301 @@
+import { useEffect } from 'react';
+import { func, number, oneOf, string, shape } from 'prop-types';
+import useTinyStateMachine from 'use-tiny-state-machine';
+import { isNull, get, noop, range, isEmpty, last } from 'lodash';
+
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Grid,
+  InputLabel,
+  ListItemText,
+  MenuItem,
+  Radio,
+  RadioGroup,
+  Select,
+  Typography,
+  makeStyles,
+} from '@material-ui/core';
+
+import { getAppStorage } from '~/clients/jsonApi';
+
+import OffsetAssetChip from './OffsetAssetChip';
+
+const useStyles = makeStyles({
+  dialogPaper: {
+    width: '75%',
+    maxWidth: 420,
+  },
+});
+
+function fetchStageAction({ dispatch }, offsetWellId) {
+  getAppStorage('corva', 'completion.wits', offsetWellId, {
+    limit: 1,
+    sort: '{timestamp:-1}',
+  })
+    .then(response => (isEmpty(response) ? null : get(last(response), 'stage_number', null)))
+    .then(lastStageNumber => dispatch('SUCCESS', lastStageNumber))
+    .catch(error => {
+      throw new Error(error.message);
+    });
+}
+
+const stagesStateChart = {
+  id: 'stages',
+  initial: 'idle',
+  context: {
+    lastStageNumber: null,
+    error: null,
+  },
+  states: {
+    idle: {
+      on: {
+        FETCH_STAGES: {
+          target: 'pending',
+          action: fetchStageAction,
+        },
+      },
+    },
+    pending: {
+      on: {
+        SUCCESS: {
+          target: 'success',
+          beforeStateChange: ({ updateContext }, lastStageNumber) =>
+            updateContext(currentContext => ({ ...currentContext, lastStageNumber })),
+        },
+        FAILURE: {
+          target: 'failure',
+          beforeStateChange: (_, error) => {
+            throw new Error(error.message);
+          },
+        },
+      },
+    },
+  },
+};
+
+const dialogStateChart = ({
+  stages: currentStagesData = {},
+  selectedStages: currentSelectedStages = [],
+}) => ({
+  id: 'dialog',
+  initial: 'closed',
+  context: {
+    selectedStages: currentSelectedStages,
+    stagesData: currentStagesData,
+  },
+  states: {
+    closed: {
+      on: {
+        OPEN_DIALOG: {
+          target: 'open',
+        },
+      },
+    },
+    open: {
+      on: {
+        CLOSE_DIALOG: {
+          target: 'closed',
+        },
+        SET_SELECTED_STAGES: {
+          target: 'open',
+          beforeStateChange: ({ updateContext }, selectedStages) =>
+            updateContext(currentContext => ({
+              ...currentContext,
+              selectedStages,
+              stagesData: selectedStages.reduce(
+                (stages, stage) => ({
+                  ...stages,
+                  [stage]: {
+                    lineStyle: 'dotted',
+                    lineWidth: 2,
+                  },
+                }),
+                {}
+              ),
+            })),
+        },
+        SET_SELECTED_LINE_STYLE: {
+          target: 'open',
+          beforeStateChange: ({ updateContext }, { stage, selectedLineStyle }) =>
+            updateContext(currentContext => ({
+              ...currentContext,
+              stagesData: {
+                ...currentContext.stagesData,
+                [stage]: {
+                  ...currentContext.stagesData[stage],
+                  lineStyle: selectedLineStyle,
+                },
+              },
+            })),
+        },
+        SET_SELECTED_LINE_WIDTH: {
+          target: 'open',
+          beforeStateChange: ({ updateContext }, { stage, selectedLineWidth }) =>
+            updateContext(currentContext => ({
+              ...currentContext,
+              stagesData: {
+                ...currentContext.stagesData,
+                [stage]: {
+                  ...currentContext.stagesData[stage],
+                  lineWidth: Number(selectedLineWidth),
+                },
+              },
+            })),
+        },
+      },
+    },
+  },
+});
+
+const StagesSelector = ({ onSave, onDelete, offset }) => {
+  const classes = useStyles();
+  const {
+    state: requestState,
+    dispatch: requestDispatch,
+    context: requestContext,
+  } = useTinyStateMachine(stagesStateChart);
+  const {
+    state: dialogState,
+    dispatch: dialogDispatch,
+    context: dialogContext,
+  } = useTinyStateMachine(dialogStateChart(offset));
+
+  const handleStagesSelect = event => dialogDispatch('SET_SELECTED_STAGES', event.target.value);
+
+  const handleLineStyleChange = stage => event =>
+    dialogDispatch('SET_SELECTED_LINE_STYLE', { stage, selectedLineStyle: event.target.value });
+
+  const handleLineWidthChange = stage => event =>
+    dialogDispatch('SET_SELECTED_LINE_WIDTH', { stage, selectedLineWidth: event.target.value });
+
+  const openDialog = () => dialogDispatch('OPEN_DIALOG');
+  const closeDialog = () => dialogDispatch('CLOSE_DIALOG');
+
+  const offsetWellId = offset.selectedWellId;
+
+  const handleSave = () => {
+    const updatedOffset = {
+      ...offset,
+      stages: dialogContext.stagesData,
+      selectedStages: dialogContext.selectedStages,
+    };
+
+    closeDialog();
+    onSave(updatedOffset);
+  };
+
+  useEffect(() => {
+    requestDispatch('FETCH_STAGES', offsetWellId);
+  }, []); // eslint-disable-line
+
+  const isStageDataEmpty = isNull(requestContext.lastStageNumber);
+
+  return (
+    <>
+      <OffsetAssetChip
+        key={offset.selectedWellId}
+        handleDelete={onDelete}
+        handleClick={isStageDataEmpty ? noop : openDialog}
+        disabled={isStageDataEmpty}
+        tooltipText={`Edit stages for ${offset.selectedWellName}`}
+      >
+        {offset.selectedWellName}
+      </OffsetAssetChip>
+      {requestState === 'success' && (
+        <Dialog
+          open={dialogState === 'open'}
+          onBackdropClick={closeDialog}
+          classes={{ paper: classes.dialogPaper }}
+        >
+          <DialogTitle>Offset Well Stages</DialogTitle>
+          <DialogContent>
+            <Grid container direction="column" spacing={16}>
+              <Grid item>
+                <FormControl margin="normal" fullWidth required>
+                  <InputLabel htmlFor="stages-multi-select">Stages</InputLabel>
+                  <Select
+                    inputProps={{ name: 'stages', id: 'stages-multi-select' }}
+                    value={dialogContext.selectedStages}
+                    renderValue={selected => `${selected.length} stages selected`}
+                    onChange={handleStagesSelect}
+                    multiple
+                  >
+                    {range(1, requestContext.lastStageNumber + 1).map(stage => (
+                      <MenuItem key={stage} value={stage}>
+                        <Checkbox checked={dialogContext.selectedStages.includes(stage)} />
+                        <ListItemText primary={stage} />
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              </Grid>
+              {dialogContext.selectedStages
+                .sort((a, b) => a - b)
+                .map(stage => (
+                  <Grid item key={stage}>
+                    <Typography variant="subtitle1">Stage {stage}</Typography>
+                    <FormControl component="fieldset">
+                      <FormLabel component="legend" required>
+                        Line Style
+                      </FormLabel>
+                      <RadioGroup
+                        name="line-style"
+                        value={get(dialogContext, ['stagesData', stage, 'lineStyle'], 'dotted')}
+                        onChange={handleLineStyleChange(stage)}
+                        row
+                      >
+                        <FormControlLabel value="dotted" control={<Radio />} label="Dotted" />
+                        <FormControlLabel value="dashed" control={<Radio />} label="Dashed" />
+                        <FormControlLabel value="solid" control={<Radio />} label="Solid" />
+                      </RadioGroup>
+                    </FormControl>
+                    <FormControl component="fieldset">
+                      <FormLabel component="legend" required>
+                        Line Width
+                      </FormLabel>
+                      <RadioGroup
+                        name="line-width"
+                        value={String(get(dialogContext, ['stagesData', stage, 'lineWidth'], '2'))}
+                        onChange={handleLineWidthChange(stage)}
+                        row
+                      >
+                        <FormControlLabel value={String(1)} control={<Radio />} label="Thin" />
+                        <FormControlLabel value={String(2)} control={<Radio />} label="Normal" />
+                        <FormControlLabel value={String(4)} control={<Radio />} label="Thick" />
+                      </RadioGroup>
+                    </FormControl>
+                  </Grid>
+                ))}
+            </Grid>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={closeDialog}>Cancel</Button>
+            <Button variant="contained" color="primary" onClick={handleSave}>
+              Save
+            </Button>
+          </DialogActions>
+        </Dialog>
+      )}
+    </>
+  );
+};
+
+StagesSelector.propTypes = {
+  onSave: func.isRequired,
+  onDelete: func.isRequired,
+  offset: shape({
+    selectedWellId: number,
+    selectedWellName: string,
+    selectedWellStatus: oneOf(['active', 'idle', 'complete', 'paused', 'unknown']),
+  }).isRequired,
+};
+
+export default StagesSelector;

package/src/components/PadOffsetsPicker/index.js

@@ -0,0 +1,4 @@
+export { default as PadOffsetsPicker } from './PadOffsetsPicker';
+export { default as OffsetAssetChip } from './OffsetAssetChip';
+export { default as OffsetAssetsListExpander } from './OffsetAssetsListExpander';
+export { default as StagesSelector } from './StagesSelector';

package/src/components/ParameterCharts/AddEditTrack.css

@@ -0,0 +1,5 @@
+.c-pc-track-setting-actions {
+  display: flex;
+  justify-self: flex-end;
+  width: 100%;
+}

package/src/components/ParameterCharts/AddEditTrack.js

@@ -0,0 +1,162 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import uuidV1 from 'uuid/v1';
+
+import { withStyles, Button } from '@material-ui/core';
+
+import Modal from '~/components/Modal';
+
+import TrackSettings from './components/TrackSettings';
+import SingleChannelTrackSettings from './components/SingleChannelTrackSettings';
+
+import { DEFAULT_TRACK_SETTINGS, SETTINGS_KEY } from './constants';
+
+import './AddEditTrack.css';
+
+const PAGE_NAME = 'DC_AddEditTrack';
+
+const AddEditTrack = ({
+  children,
+  classes,
+  id,
+  settings,
+  onSettingsChange,
+  settingsKey,
+  mapping,
+  multipleAssets,
+}) => {
+  const [isTrackSettingsOpen, setIsTrackSettingsOpen] = useState(false);
+  const [currentSettings, setCurrentSettings] = useState(DEFAULT_TRACK_SETTINGS);
+
+  const onSettingChange = (key, val) => {
+    setCurrentSettings({ ...currentSettings, [key]: val });
+  };
+
+  const addTrack = () => {
+    onSettingsChange({
+      ...settings,
+      [settingsKey]: [
+        ...((settings && settings[settingsKey]) || []),
+        {
+          ...currentSettings,
+          id: uuidV1(),
+        },
+      ],
+    });
+    setCurrentSettings(DEFAULT_TRACK_SETTINGS);
+  };
+
+  const removeTrack = () => {
+    const updatedSettings = settings[settingsKey].filter(item => item.id !== id);
+    onSettingsChange({
+      ...settings,
+      [settingsKey]: updatedSettings,
+    });
+    setIsTrackSettingsOpen(false);
+  };
+
+  const onTrackChange = () => {
+    const updatedSettings = settings[settingsKey].map(item =>
+      item.id === id ? currentSettings : item
+    );
+    onSettingsChange({
+      ...settings,
+      [settingsKey]: updatedSettings,
+    });
+    setIsTrackSettingsOpen(false);
+  };
+
+  useEffect(() => {
+    const existingSettings = id
+      ? settings[settingsKey].find(item => item.id === id)
+      : DEFAULT_TRACK_SETTINGS;
+    setCurrentSettings(existingSettings);
+  }, [settings, settingsKey, id]);
+
+  const onCancel = () => {
+    const existingSettings = id
+      ? settings[settingsKey].find(item => item.id === id)
+      : DEFAULT_TRACK_SETTINGS;
+    setCurrentSettings(existingSettings);
+    setIsTrackSettingsOpen(false);
+  };
+
+  return (
+    <>
+      <div className={classes.link} onClick={id ? () => setIsTrackSettingsOpen(true) : addTrack}>
+        {children}
+      </div>
+      <Modal
+        open={isTrackSettingsOpen}
+        title="Track Settings"
+        actions={
+          <div className="c-pc-track-setting-actions">
+            {id && (
+              <Button className={classes.button} color="primary" onClick={removeTrack}>
+                Delete Track
+              </Button>
+            )}
+            <Button
+              data-testid={`${PAGE_NAME}_cancel`}
+              className={classes.button}
+              color="primary"
+              onClick={onCancel}
+            >
+              Cancel
+            </Button>
+            <Button
+              data-testid={`${PAGE_NAME}_save`}
+              className={classes.button}
+              variant="contained"
+              color="primary"
+              onClick={onTrackChange}
+            >
+              Save
+            </Button>
+          </div>
+        }
+      >
+        {multipleAssets ? (
+          <SingleChannelTrackSettings
+            trackSettings={currentSettings}
+            onChange={onSettingChange}
+            mapping={mapping}
+          />
+        ) : (
+          <TrackSettings
+            settings={currentSettings}
+            onChange={onSettingChange}
+            mapping={mapping}
+          />
+        )}
+      </Modal>
+    </>
+  );
+};
+
+AddEditTrack.propTypes = {
+  settingsKey: PropTypes.string,
+  multipleAssets: PropTypes.bool,
+  settings: PropTypes.shape({}),
+  onSettingsChange: PropTypes.func.isRequired,
+  children: PropTypes.element.isRequired,
+  id: PropTypes.string,
+  mapping: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      key: PropTypes.string.isRequired,
+    }).isRequired
+  ).isRequired,
+};
+
+AddEditTrack.defaultProps = {
+  id: '',
+  settingsKey: SETTINGS_KEY,
+  settings: {},
+  multipleAssets: false,
+};
+
+export default withStyles({
+  link: { cursor: 'pointer' },
+  button: { fontSize: 14, marginLeft: 20 },
+})(AddEditTrack);

package/src/components/ParameterCharts/ChartsContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+export default createContext({
+  charts: new Map(),
+  onChartChange: () => {}
+});

package/src/components/ParameterCharts/DataContext.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export default createContext({
+  mapping: [],
+  parsedData: [],
+  indexes: {
+    min: 0,
+    max: 0,
+    keys: {}
+  }
+});

package/src/components/ParameterCharts/ParameterCharts.css

@@ -0,0 +1,11 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  margin-top: 25px;
+  position: relative;
+}
+
+.container.horizontal {
+  flex-direction: column;
+}

package/src/components/ParameterCharts/ParameterCharts.js

@@ -0,0 +1,161 @@
+import { useMemo, useEffect, useRef } from 'react';
+import { shape, string, func, bool, arrayOf, number } from 'prop-types';
+import classNames from 'classnames';
+import { get, maxBy } from 'lodash';
+import uuid from 'uuid';
+
+import Track from './components/Track';
+import CursorPositioner from './components/Tooltip/CursorPositioner';
+
+import { SETTINGS_KEY, DEFAULT_TRACK_SETTINGS } from './constants';
+
+import { convertData } from './utils/dataParser';
+
+import SettingsContext from './SettingsContext';
+import DataContext from './DataContext';
+
+import styles from './ParameterCharts.css';
+import ChartsContext from './ChartsContext';
+
+const ParameterCharts = ({
+  settings,
+  onSettingsChange,
+  settingsKey,
+  horizontal,
+  mapping,
+  data,
+  indexes,
+  isLoading,
+  multipleAssets,
+  assestColors,
+}) => {
+  const currentSettings = settings[settingsKey];
+
+  const chartsRef = useRef(new Map());
+
+  const onChartChange = (id, chartRef) => {
+    chartsRef.current.set(id, chartRef);
+  };
+
+  // TODO: move to utils
+  // TODO: move types to files?
+  // TODO: async data calculation
+  // TODO: fix the vertical view
+  // TODO: update data by higcharts API
+
+  useEffect(() => {
+    if (!currentSettings || !currentSettings.length) {
+      onSettingsChange({
+        ...settings,
+        [settingsKey]: [
+          {
+            ...DEFAULT_TRACK_SETTINGS,
+            id: uuid(),
+          },
+        ],
+      });
+    }
+  }, []);
+
+  const maxTracesCount = useMemo(
+    () => get(maxBy(currentSettings, 'traces.length'), 'traces.length') || 1,
+    [currentSettings]
+  );
+
+  const parsedData = useMemo(() => {
+    if (multipleAssets) {
+      const assetsKeys = Object.keys(data);
+
+      return assetsKeys.reduce(
+        (acc, assetKey) => ({
+          ...acc,
+          [assetKey]: convertData({ data: data[assetKey], mapping, indexesKeys: indexes.keys }),
+        }),
+        {}
+      );
+    } else {
+      return convertData({ data, mapping, indexesKeys: indexes.keys });
+    }
+  }, [data, mapping, indexes.keys, multipleAssets]);
+
+  return (
+    <SettingsContext.Provider
+      value={{
+        horizontal,
+        settingsKey,
+        settings,
+        onSettingsChange,
+        maxTracesCount,
+        multipleAssets,
+        assestColors,
+      }}
+    >
+      <DataContext.Provider
+        value={{
+          mapping,
+          parsedData,
+          indexes,
+          isLoading,
+        }}
+      >
+        <ChartsContext.Provider
+          value={{
+            chartsRef,
+            onChartChange,
+          }}
+        >
+          <div className={classNames(styles.container, { [styles.horizontal]: horizontal })}>
+            <CursorPositioner />
+            {currentSettings &&
+              currentSettings.map((trackSettings, index) => (
+                <Track
+                  key={trackSettings.id}
+                  settings={settings}
+                  onSettingsChange={onSettingsChange}
+                  id={trackSettings.id}
+                  index={index}
+                />
+              ))}
+          </div>
+        </ChartsContext.Provider>
+      </DataContext.Provider>
+    </SettingsContext.Provider>
+  );
+};
+
+ParameterCharts.propTypes = {
+  data: shape({}).isRequired,
+  mapping: arrayOf(
+    shape({
+      name: string.isRequired,
+      key: string.isRequired,
+      unit: string.isRequired,
+      unitType: string.isRequired,
+    }).isRequired
+  ).isRequired,
+  indexes: shape({
+    key: string,
+    name: string,
+    min: number,
+    max: number,
+    unit: string,
+    unitType: string,
+  }).isRequired,
+  settingsKey: string,
+  settings: shape({}),
+  onSettingsChange: func.isRequired,
+  horizontal: bool,
+  multipleAssets: bool,
+  isLoading: bool.isRequired,
+  assestColors: arrayOf(string)
+};
+
+ParameterCharts.defaultProps = {
+  settingsKey: SETTINGS_KEY,
+  horizontal: false,
+  multipleAssets: false,
+  settings: {},
+  assestColors: []
+};
+
+export default ParameterCharts;