@corva/ui 0.38.0-6 → 0.38.0-9

package/src/effects/useDevCenterApp.js

@@ -1,66 +0,0 @@
-import { useState, useEffect } from 'react';
-import { getAppIdentifier } from '~/utils/devcenter';
-
-const COMPONENTS = {};
-
-const useCorvaApp = ({ CLIAppComponent, CLIAppSettings, url, appKey, version }) => {
-  const appName = getAppIdentifier(appKey, version);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const AppComponent =
-    CLIAppComponent || (COMPONENTS[appName] && COMPONENTS[appName].component) || null;
-  const AppSettings =
-    CLIAppSettings || (COMPONENTS[appName] && COMPONENTS[appName].settings) || null;
-  const finishLoading = () => setIsLoading(false);
-
-  useEffect(() => {
-    const AppSource = COMPONENTS[appName];
-
-    if (!url || !appName || (AppComponent && AppSettings)) return;
-
-    if ((!CLIAppComponent && !AppSource) || (AppSource && AppSource.component)) {
-      setIsLoading(true);
-
-      if (!AppSource || !AppSource.script) {
-        const scriptFile = document.createElement('script');
-
-        scriptFile.src = url;
-
-        scriptFile.onload = () => {
-          COMPONENTS[appName] = window[appName] && window[appName].default;
-          finishLoading();
-        };
-
-        COMPONENTS[appName] = {
-          component: null,
-          script: scriptFile,
-        };
-
-        setTimeout(() => document.body.appendChild(scriptFile));
-      }
-
-      const { script } = COMPONENTS[appName];
-
-      if (script.onload) {
-        const loaderCallback = script.onload;
-        script.onload = () => {
-          loaderCallback();
-          finishLoading();
-        };
-      }
-
-      script.onabort = finishLoading;
-
-      script.error = finishLoading;
-    }
-  }, [url]);
-
-
-  return {
-    isLoading,
-    AppComponent,
-    AppSettings,
-  };
-};
-
-export default useCorvaApp;

package/src/effects/useEscPress.js

@@ -1,19 +0,0 @@
-import { useEffect, useCallback } from 'react';
-
-const useEscPress = (callback) => {
-  const onKeyDown = useCallback((event) => {
-    if(event.keyCode === 27) {
-      callback()
-    }
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('keydown', onKeyDown, false);
-
-    return () => {
-      document.removeEventListener('keydown', onKeyDown, false);
-    };
-  }, []);
-};
-
-export default useEscPress;

package/src/effects/useOutsideClick.js

@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-
-const useOutsideClick = (ref, callback) => {
-  const handleClick = e => {
-    // NOTE: Check if it's not a material popover/popup
-    const muiPopover = e.target.closest('.MuiPopover-root');
-    const muiDialog = e.target.closest('.MuiDialog-container');
-    const reactModal = e.target.closest('.ReactModalPortal');
-    if (
-      ref.current &&
-      !ref.current.contains(e.target) &&
-      !muiPopover &&
-      !muiDialog &&
-      !reactModal
-    )
-      callback();
-  };
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClick);
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-    };
-  });
-};
-export default useOutsideClick;

package/src/effects/useSignedURL.js

@@ -1,17 +0,0 @@
-import { useState, useEffect } from 'react';
-import { getS3DownloadLink } from '~/clients/jsonApi';
-
-function useSignedURL(fileName) {
-  const [signedURL, setSignedURL] = useState('');
-
-  useEffect(() => {
-    if (fileName)
-      getS3DownloadLink(fileName)
-        .then(response => setSignedURL(response.url))
-        .catch(() => setSignedURL(''));
-  }, [fileName]);
-
-  return signedURL;
-}
-
-export default useSignedURL;

package/src/effects/useSubscriptions.js

@@ -1,178 +0,0 @@
-import { useState, useEffect, useRef, useMemo } from 'react';
-import { parse } from 'querystring';
-import uuidV1 from 'uuid/v1';
-import { castArray, omit, differenceBy, concat, merge, mapValues } from 'lodash';
-import { getAppKeyFromStackTrace } from '~/clients/utils';
-import { getAppStorage, getDataAppStorage, getDataAppStorageAggregate } from '~/clients/jsonApi';
-
-import { getSubscriptionId } from '../clients/subscriptions';
-
-function getSubscriptionWithId(sub, hookId, appKey) {
-  const subId = getSubscriptionId(sub, hookId);
-  return { ...sub, hookId, subId, appInstanceId: subId, app_key: appKey };
-}
-
-async function fetchInitialSubscriptionsDataDeprecated(subscriptions, { timeQuery, appKey }) {
-  const requests = subscriptions.map(
-    async ({ provider, collection, assetId, subscribeOnly, params }) => {
-      if (subscribeOnly) return null;
-      const queryFromParameters = params.query;
-      const queryFromTime = timeQuery ? `{timestamp#lte#${timeQuery.timestamp.$lte}` : '';
-      const separator = queryFromParameters && queryFromTime ? 'AND' : '';
-      const query = `${queryFromParameters}${separator}${queryFromTime}`;
-
-      try {
-        return await getAppStorage(provider, collection, assetId, {
-          ...params,
-          ...(query ? { query } : {}),
-          appKey,
-        });
-      } catch (e) {
-        return [];
-      }
-    }
-  );
-  return Promise.all(requests);
-}
-
-async function fetchInitialSubscriptionsData(subscriptions, { timeQuery, appKey }) {
-  const requests = subscriptions.map(
-    async ({ provider, collection, assetId, subscribeOnly, params = {} }) => {
-      if (subscribeOnly) return null;
-
-      // NOTE: Use different endpoint for aggregate queries
-      // https://data.qa.corva.ai/docs#/default/aggregate_api_v1_data__provider___dataset__aggregate__get
-      if (params.aggregate)
-        return getDataAppStorageAggregate(provider, collection, {
-          ...mapValues(params.aggregate, JSON.stringify),
-        });
-
-      const query = JSON.stringify(merge({ asset_id: assetId }, params.query, timeQuery));
-      const { limit = 1, sort = '{"timestamp": 1}' } = params;
-
-      try {
-        const options = {
-          ...params,
-          limit,
-          sort,
-          query,
-          appKey,
-        };
-
-        return await getDataAppStorage(provider, collection, options);
-      } catch (e) {
-        return [];
-      }
-    }
-  );
-  return Promise.all(requests);
-}
-
-/**
- * A hook to subscribe to the corva socket updates
- * @param {Object | Object[]} subscriptions - subscription params
- * @param {number} subscriptions.limit - only save given amount of records
- * @param {boolean} subscriptions.subscribeOnly - do NOT send initial requests for the data
- * @param {boolean} subscriptions.alwaysSubscribe - will always subscribe, even when well timeline used
- * and do NOT store previously received data if true
- * @param {Object | Object} options - various hook options
- * @param {Object | Object} options.timestamp - requested time (usually from well timeline).
- * If provided only the initial request is being sent with the {"timestamp": {"$lte":time}} query added.
- */
-function useSubscriptions(subscriptions, { timestamp, isOldApiUsed } = {}) {
-  const [data, setData] = useState({});
-  // NOTE: Declare this hook id to differentiate between hooks
-  const hookIdRef = useRef();
-  if (!hookIdRef.current) hookIdRef.current = uuidV1();
-  const { subscribe, unsubscribe, socket } = window[Symbol.for('socket')];
-  const appKey = useMemo(() => getAppKeyFromStackTrace(), []);
-
-  // NOTE: Save previous subscriptions to detect added/removed subscriptions
-  const prevSubscriptionsRef = useRef([]);
-  const currentSubscriptions = castArray(subscriptions).map(sub =>
-    getSubscriptionWithId(sub, hookIdRef.current, appKey)
-  );
-
-  // NOTE: This string is used to trigger effects
-  const currentSubscriptionsIdsJoined = currentSubscriptions.map(sub => sub.subId).join();
-  const timeQuery = useMemo(() => {
-    if (timestamp) return { timestamp: { $lte: timestamp } };
-    const timeFromLocation = parse(window.location.search).time;
-    return timeFromLocation ? { timestamp: { $lte: new Date(timeFromLocation) / 1000 } } : null;
-  }, [window.location.search, timestamp]);
-
-  useEffect(() => {
-    const onDataReceive = event => {
-      // NOTE: Skip other effects subscriptions' events
-      if (event.hookId !== hookIdRef.current) return;
-      setData(prevData => {
-        let nextData = event.data;
-        if (event.subId in prevData && !event.subscribeOnly) {
-          nextData = concat(prevData[event.subId], event.data);
-        }
-
-        if (event.params && event.params.limit) nextData = nextData.slice(-event.params.limit);
-
-        return {
-          ...prevData,
-          [event.subId]: nextData,
-        };
-      });
-    };
-    if (socket) socket.on('data', onDataReceive);
-    // NOTE: Delete onDataReceive callback on unmounting
-    return () => socket && socket.off('data', onDataReceive);
-  }, []);
-
-  useEffect(() => {
-    const { current: prevSubscriptions } = prevSubscriptionsRef;
-    prevSubscriptions.forEach(unsubscribe);
-    prevSubscriptionsRef.current = [];
-  }, [timeQuery]);
-
-  useEffect(() => {
-    const { current: prevSubscriptions } = prevSubscriptionsRef;
-    const addedSubscriptions = differenceBy(currentSubscriptions, prevSubscriptions, 'subId');
-    const deletedSubscriptions = differenceBy(prevSubscriptions, currentSubscriptions, 'subId');
-    addedSubscriptions.forEach(subscription => {
-      // NOTE: only subscribe when the timestamp wasn't provided (well timeline wasn't used)
-      if (!timeQuery || subscription.alwaysSubscribe) subscribe(subscription);
-    });
-    deletedSubscriptions.forEach(unsubscribe);
-
-    prevSubscriptionsRef.current = currentSubscriptions;
-
-    // NOTE: Migrate to new api after https://corvaqa.atlassian.net/browse/DC-1090 is done
-    const fetchFunc = isOldApiUsed
-      ? fetchInitialSubscriptionsDataDeprecated
-      : fetchInitialSubscriptionsData;
-    fetchFunc(addedSubscriptions, { timeQuery, appKey, isOldApiUsed }).then(subsData =>
-      setData(prevData => {
-        // NOTE: Here we omit data from deleted subscriptions
-        const nextData = omit(
-          prevData,
-          deletedSubscriptions.map(sub => sub.subId)
-        );
-
-        addedSubscriptions.forEach((sub, idx) => {
-          if (subsData[idx] !== null) nextData[sub.subId] = subsData[idx];
-        });
-        return nextData;
-      })
-    );
-  }, [currentSubscriptionsIdsJoined, timeQuery]);
-
-  // NOTE: Clear all subscriptions on unmounting
-  useEffect(() => () => prevSubscriptionsRef.current.forEach(unsubscribe), []);
-
-  return useMemo(
-    () =>
-      currentSubscriptions.map(({ subId }) => ({
-        loading: !(subId in data),
-        data: data[subId],
-      })),
-    [data, currentSubscriptionsIdsJoined]
-  );
-}
-
-export default useSubscriptions;

package/src/exampleApp/ChartActionsListExample.js

@@ -1,51 +0,0 @@
-import { useState } from 'react';
-import Slider from '@material-ui/core/Slider';
-
-import ChartActionsList from '~/components/ChartActionsList';
-
-const RangeApp = () => {
-  const [values, setValues] = useState({
-    left: 10000,
-    right: 15000,
-    min: 0,
-    max: 20269.7,
-  });
-  
-  const onChange = values => {
-    setValues(val => ({ ...val, ...values }));
-  };
-
-  const changeRanges = () => {
-    setValues({
-      left: 5386.8,
-      right: 18427,
-      min: 0,
-      max: 18427,
-    });
-  };
-
-  return (
-    <div style={{ margin: '100px 500px' }}>
-      <button onClick={changeRanges}>Reset (change) ranges</button>
-      <h1>
-        Min: {values.min}. Max: {values.max}
-        <br />
-        (left) {values.left} - {values.right} (right)
-      </h1>
-      <Slider 
-        min={values.min}
-        max={values.max}
-        value={[values.left, values.right]}
-      />
-      <ChartActionsList
-        min={values.min}
-        max={values.max}
-        left={values.left}
-        right={values.right}
-        onChange={onChange}
-      />
-    </div>
-  );
-};
-
-export default RangeApp;

package/src/exampleApp/ExampleApp.css

@@ -1,12 +0,0 @@
-.exampleApp {
-  padding: 20px;
-  width: 100%;
-  height: 100%;
-  min-height: 400px;
-  display: flex;
-  flex-direction: column;
-}
-
-.loadingContainer {
-  position: relative;
-}

package/src/exampleApp/ExampleApp.js

@@ -1,21 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@material-ui/core';
-
-import LoadingIndicator from '~/components/LoadingIndicator';
-
-import styles from './ExampleApp.css';
-
-// NOTE: This example app is created just to test the components you implement inside this repo
-
-function ExampleApp() {
-  const [isLoading, setIsLoading] = useState(false);
-
-  return (
-    <div className={styles.exampleApp}>
-      <Button onClick={() => setIsLoading(!isLoading)}>Toggle loader</Button>
-      <div className={styles.loadingContainer}>{isLoading && <LoadingIndicator />}</div>
-    </div>
-  );
-}
-
-export default ExampleApp;

package/src/exampleApp/ParameterChartExample.js

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
-import styles from './ExampleApp.css';
-
-import { ParameterCharts, AddEditTrack } from '../components/ParameterCharts';
-
-import asset1 from './data/parametersWitsAndDysfanction.json';
-import asset2 from './data/parametersWitsAndDysfanction2.json';
-
-// NOTE: This example app is created just to test the components you implement inside this repo
-const mapping = [{"collection":"wits","key":"data.rop","name":"ROP","unit":"ft/h","unitType":"velocity"},{"collection":"wits","key":"data.diff_press","name":"Diff Press","unit":"psi","unitType":"pressure"},{"collection":"wits","key":"data.rotary_rpm","name":"Rotary RPM","unit":"rpm","unitType":"rpm"},{"collection":"wits","key":"data.weight_on_bit","name":"WOB","unit":"klbf","unitType":"force"},{"collection":"wits","key":"data.mud_flow_in","name":"Flow In","unit":"gal/min","unitType":"volumeFlowRate"},{"collection":"wits","key":"data.hook_load","name":"Hook load","unit":"klbf","unitType":"force"},{"collection":"wits","key":"data.standpipe_pressure","name":"Standpipe Pressure","unit":"psi","unitType":"pressure"},{"collection":"wits","key":"data.rotary_torque","name":"Rotary Torque","unit":"ft-klbf","unitType":"torque"},{"collection":"drillingDysfunction","key":"health.lateral.rms_avg_health","name":"Lateral RMS Average","unit":"gRMS","unitType":"gravityRMS"},{"collection":"drillingDysfunction","key":"health.axial.rms_avg_health","name":"Axial RMS Average","unit":"gRMS","unitType":"gravityRMS"},{"collection":"drillingDysfunction","key":"health.lateral.peak_shock_count_health","name":"Shock Lateral g","unit":"g","unitType":"gravity"},{"collection":"drillingDysfunction","key":"health.axial.peak_shock_count_health","name":"Shock Axial g","unit":"g","unitType":"gravity"},{"collection":"wits","key":"data.continuous_inclination","name":"Continuous Inclination","unit":"deg","unitType":"angle"},{"collection":"wits","key":"data.gamma_ray","name":"Gamma","unit":"api","unitType":"api"},{"collection":"wits","key":"data.gravity_tool_face_mean","name":"Toolface3","unit":"deg","unitType":"angle"}];
-const indexes = {"min":20254.71,"max":20255.90,"keys":{"wits":{"key":"data.hole_depth","collection":"wits","name":"Depth","unit":"ft","unitType":"length"},"drillingDysfunction":{"key":"md","collection":"drillingDysfunction","name":"Depth","unit":"ft","unitType":"length"}}};
-
-const singleChannelData = { asset1, asset2 };
-const regularData = asset1;
-
-const regularSettings = {"parameterChart":[{"id":"edb11f70-9e81-11eb-91ec-8d4896ed058f","name":"New Track","traces":[{"unit":"ft-klbf","name":"Rotary Torque","lineColor":"#72bb1b","lineWidth":1,"autoScale":true,"id":"b5e6d27e-a7e2-46d1-91ba-0e7de36b7c2d","collection":"wits","unitType":"torque","dashStyle":"Solid","traceType":"line","key":"data.rotary_torque"},{"traceType":"line","dashStyle":"Solid","color":"#ccc","lineWidth":1,"autoScale":true,"key":"data.diff_press","collection":"wits","name":"Diff Press","unit":"psi","unitType":"pressure","id":"30745428-575b-4856-8276-899d0af0b232"}]},{"name":"New Track","traces":[{"traceType":"line","dashStyle":"Dash","color":"#f10e0e","lineWidth":1,"autoScale":true,"key":"data.rop","collection":"wits","name":"ROP","unit":"ft/h","unitType":"velocity","id":"4b8e6dfd-34a6-427d-ad9a-6f12037c8125"}],"id":"df3d5eb0-9f60-11eb-b60b-9db340114f36"}]};
-const singleChannelSettings =  {"parameterChart":[{"name":"New Track","traces":[{"traceType":"line","dashStyle":"Solid","lineColor":"#ccc","lineWidth":1,"autoScale":true,"key":"data.weight_on_bit","id":"data.weight_on_bit","collection":"wits","name":"WOB","unit":"klbf","unitType":"force"}],"assets":["asset1","asset2"],"id":"934968d0-b31c-11eb-9063-538e9feb03b1","value":"data.rop"},{"name":"New Track","traces":[{"traceType":"line","dashStyle":"Solid","lineColor":"#ccc","lineWidth":1,"autoScale":true,"key":"data.rop","id":"data.rop","collection":"wits","name":"ROP","unit":"ft/h","unitType":"velocity"}],"id":"6a58e280-b49c-11eb-8380-3fb2746bd585"}]}
-
-const isSingleChannelEnabled = true;
-
-function ExampleApp() {
-  const [settings, setSettings] = useState(isSingleChannelEnabled ? singleChannelSettings : regularSettings);
-  return (
-    <div className={styles.exampleApp}>
-      <p>Settings {JSON.stringify(settings)}</p>
-      <AddEditTrack settings={settings} onSettingsChange={setSettings} mapping={mapping} multipleAssets>
-        <AddCircleOutline color="primary" fontSize="small" />
-      </AddEditTrack>
-      <ParameterCharts
-        data={isSingleChannelEnabled ? singleChannelData : regularData}
-        mapping={mapping}
-        settings={settings}
-        onSettingsChange={setSettings}
-        horizontal
-        indexes={indexes}
-        isLoading={false}
-        multipleAssets={isSingleChannelEnabled}
-        // settingsKey
-        assestColors={{ asset1: '#FF0000', asset2: '#1E90FF' }}
-      />
-    </div>
-  );
-}
-
-export default ExampleApp;

package/src/exampleApp/RangeSliderExample.js

@@ -1,51 +0,0 @@
-import { useState } from 'react';
-
-import RangeSlider from '~/components/RangeSlider';
-
-const RangeApp = () => {
-  const [values, setValues] = useState({
-    left: 5386.8,
-    right: 20269.7,
-    min: 0,
-    max: 20269.7,
-  });
-  
-  const [resetInt, setResetInt] = useState(0);
-
-  const onChangeEnd = values => {
-    setValues(val => ({ ...val, ...values }));
-  };
-
-  const changeRanges = () => {
-    setValues({
-      left: 5386.8,
-      right: 18427,
-      min: 0,
-      max: 18427,
-    });
-    setResetInt(1);
-  };
-
-  return (
-    <div style={{ margin: '100px 500px' }}>
-      <button onClick={changeRanges}>Reset (change) ranges</button>
-      <h1>
-        Min: {values.min}. Max: {values.max}
-        <br />
-        (left) {values.left} - {values.right} (right)
-      </h1>
-      <RangeSlider
-        leftRange={values.left}
-        rightRange={values.right}
-        minRange={values.min}
-        maxRange={values.max}
-        onChange={onChangeEnd}
-        hideDecimals
-        resetInt={resetInt}
-        onChangeFinish={onChangeEnd}
-      />
-    </div>
-  );
-};
-
-export default RangeApp;

package/src/exampleApp/data/changeData.js

@@ -1,54 +0,0 @@
-const fs = require('fs');
-const fileData = require('./parametersWitsAndDysfanction.json');
-
-const keys = Object.keys(fileData.wits[0].data).filter((key) => key !== 'hole_depth');
-
-const minMax = {};
-
-const getMinMaxes = (arr, key) => {
-  let min = Infinity;
-  let max = -Infinity;
-  arr.forEach(values => {
-    const val = values.data[key];
-    if (Number.isFinite(val)) {
-      if (val > max) {
-        max = val;
-      }
-      if (val < min) {
-        min = val;
-      }
-    }
-  });
-  return {
-    min,
-    max,
-  };
-};
-
-const generateValue = ({ min, max }) => {
-  return parseFloat((Math.random() * (max - min) + min).toFixed(2));
-};
-
-keys.forEach(key => {
-    minMax[key] = getMinMaxes(fileData.wits, key);
-});
-
-const newData = {
-    wits: fileData.wits.map((item) => {
-        const values = keys.reduce((acc, key) => {
-            return {
-                ...acc,
-                [key]: generateValue(minMax[key])
-            }
-        }, {});
-        return {
-            ...item,
-            data: {
-                ...item.data,
-                ...values
-            }
-        }
-    })
-}
-
-fs.writeFileSync('parametersWitsAndDysfanction2.json', JSON.stringify(newData));