@webviz/well-log-viewer 0.0.1-alpha.1 → 0.0.1-alpha.3

package/src/components/WellLogViewWithScroller.stories.jsx

@@ -1,69 +0,0 @@
-import React from "react";
-import WellLogViewWithScroller from "./WellLogViewWithScroller";
-import { argTypesWellLogViewScrollerProp } from "./WellLogViewWithScroller";
-import { colorTables } from "@emerson-eps/color-tables";
-
-const ComponentCode =
-    '<WellLogViewWithScroller id="WellLogViewWithScroller" \r\n' +
-    "    horizontal=false \r\n" +
-    '    welllog={require("../../../../../example-data/L898MUD.json")[0]} \r\n' +
-    '    template={require("../../../../../example-data/welllog_template_1.json")} \r\n' +
-    "    colorTables={colorTables} \r\n" +
-    "/>";
-
-import { axisTitles, axisMnemos } from "../utils/axes";
-
-export default {
-    component: WellLogViewWithScroller,
-    title: "WellLogViewer/Components/WellLogViewWithScroller",
-    parameters: {
-        docs: {
-            description: {
-                component:
-                    "The component add scrollbars to WellLogView component to make tracks and plots scrollable by scrollbars.",
-            },
-        },
-        componentSource: {
-            code: ComponentCode,
-            language: "javascript",
-        },
-    },
-    argTypes: {
-        ...argTypesWellLogViewScrollerProp,
-        id: {
-            description:
-                "The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.",
-        },
-    },
-};
-
-const Template = (args) => {
-    return (
-        <div
-            style={{ height: "92vh", display: "flex", flexDirection: "column" }}
-        >
-            <div style={{ width: "100%", height: "100%" }}>
-                <WellLogViewWithScroller
-                    id="WellLogViewWithScroller"
-                    {...args}
-                />
-            </div>
-        </div>
-    );
-};
-
-const wellLog = require("../../../../../example-data/L898MUD.json")[0];
-export const Default = Template.bind({});
-Default.args = {
-    id: "Well-Log-Viewer-With-Scroller",
-    horizontal: false,
-    welllog: wellLog,
-    template: require("../../../../../example-data/welllog_template_1.json"),
-    viewTitle: "Well '" + wellLog.header.well + "'",
-    colorTables: colorTables,
-    axisTitles: axisTitles,
-    axisMnemos: axisMnemos,
-    options: {
-        checkDatafileSchema: true,
-    },
-};

package/src/components/WellLogViewWithScroller.test.tsx

@@ -1,47 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import "@testing-library/jest-dom/extend-expect";
-import { render } from "@testing-library/react";
-import "jest-styled-components";
-import React from "react";
-import WellLogViewWithScroller from "./WellLogViewWithScroller";
-import { colorTables } from "@emerson-eps/color-tables";
-
-const welllog = require("../../../../../example-data/L898MUD.json")[0];
-const template = require("../../../../../example-data/welllog_template_1.json");
-
-window.ResizeObserver =
-    window.ResizeObserver ||
-    jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-    }));
-
-describe("Test Well Log View Component with Scroller", () => {
-    it("snapshot test", () => {
-        const { container } = render(
-            <WellLogViewWithScroller
-                welllog={welllog}
-                template={template}
-                colorTables={colorTables}
-                primaryAxis={"md"}
-                axisTitles={{
-                    md: "MD",
-                    tvd: "TVD",
-                    time: "TIME",
-                }}
-                axisMnemos={{
-                    md: ["DEPTH", "DEPT", "MD", "TDEP", "MD_RKB"],
-                    tvd: ["TVD", "TVDSS", "DVER", "TVD_MSL"],
-                    time: ["TIME"],
-                }}
-                options={{
-                    checkDatafileSchema: true,
-                    hideTrackLegend: true,
-                    hideTrackTitle: true,
-                }}
-            />
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-});

package/src/components/WellLogViewWithScroller.tsx

@@ -1,179 +0,0 @@
-import React, { Component } from "react";
-
-import WellLogView from "./WellLogView";
-import { WellLogViewProps, argTypesWellLogViewProp } from "./WellLogView";
-import { _propTypesWellLogView } from "./WellLogView";
-
-import { WellLogController } from "./WellLogView";
-
-import Scroller from "./Scroller";
-
-export type WellLogViewWithScrollerProps = WellLogViewProps;
-export const argTypesWellLogViewScrollerProp = argTypesWellLogViewProp;
-
-class WellLogViewWithScroller extends Component<WellLogViewWithScrollerProps> {
-    public static propTypes: Record<string, unknown>;
-
-    controller: WellLogController | null;
-    scroller: Scroller | null;
-
-    constructor(props: WellLogViewWithScrollerProps) {
-        super(props);
-
-        this.controller = null;
-        this.scroller = null;
-
-        this.onCreateController = this.onCreateController.bind(this);
-
-        this.onScrollerScroll = this.onScrollerScroll.bind(this);
-        this.onTrackScroll = this.onTrackScroll.bind(this);
-        this.onTrackSelection = this.onTrackSelection.bind(this);
-
-        this.onContentRescale = this.onContentRescale.bind(this);
-        this.onContentSelection = this.onContentSelection.bind(this);
-    }
-
-    componentDidMount(): void {
-        this.setScrollerPosAndZoom();
-    }
-
-    shouldComponentUpdate(nextProps: WellLogViewWithScrollerProps): boolean {
-        return !Object.is(this.props, nextProps);
-    }
-
-    updateReadoutPanel(): void {
-        const controller = this.controller;
-        if (controller)
-            controller.selectContent(controller.getContentSelection()); // force to update readout panel
-    }
-
-    // callback function from WellLogView
-    onCreateController(controller: WellLogController): void {
-        this.controller = controller;
-        if (this.props.onCreateController)
-            // set callback to component's caller
-            this.props.onCreateController(controller);
-    }
-    // callback function from WellLogView
-    onTrackScroll(): void {
-        this.setScrollerPosAndZoom();
-        if (this.props.onTrackScroll) this.props.onTrackScroll();
-    }
-    // callback function from WellLogView
-    onTrackSelection(): void {
-        if (this.props.onTrackSelection) this.props.onTrackSelection();
-    }
-    // callback function from WellLogView
-    onContentRescale(): void {
-        this.setScrollerPosAndZoom();
-        if (this.props.onContentRescale) this.props.onContentRescale();
-    }
-    // callback function from WellLogView
-    onContentSelection(): void {
-        if (this.props.onContentSelection) this.props.onContentSelection();
-    }
-
-    // callback function from Scroller
-    onScrollerScroll(x: number, y: number): void {
-        const controller = this.controller;
-        if (!controller) return;
-        const fContent = this.props.horizontal ? x : y; // fraction
-        controller.scrollContentTo(fContent);
-        const posTrack = this.calcPosTrack(this.props.horizontal ? y : x);
-        controller.scrollTrackTo(posTrack);
-    }
-
-    calcPosTrack(f: number): number {
-        const controller = this.controller;
-        if (!controller) return 0;
-        const posMax = controller.getTrackScrollPosMax();
-        const posTrack = f * posMax;
-        return Math.round(posTrack);
-    }
-
-    getContentPosFraction(): number {
-        const controller = this.controller;
-        if (!controller) return 0;
-        const baseDomain = controller.getContentBaseDomain();
-        const domain = controller.getContentDomain();
-        const w = baseDomain[1] - baseDomain[0] - (domain[1] - domain[0]);
-        return w ? (domain[0] - baseDomain[0]) / w : 0;
-    }
-    getTrackPosFraction(): number {
-        const controller = this.controller;
-        if (!controller) return 0;
-        return controller.getTrackScrollPosMax()
-            ? controller.getTrackScrollPos() / controller.getTrackScrollPosMax()
-            : 0.0;
-    }
-
-    setScrollerPosAndZoom(): void {
-        let x: number, y: number;
-        let xZoom: number, yZoom: number;
-        const scroller = this.scroller;
-        if (!scroller) return;
-        const controller = this.controller;
-        if (!controller) {
-            x = y = 0.0;
-            xZoom = yZoom = 1.0;
-        } else {
-            const contentZoom = controller.getContentZoom();
-            const trackZoom = controller.getTrackZoom();
-            xZoom = this.props.horizontal ? contentZoom : trackZoom;
-            yZoom = this.props.horizontal ? trackZoom : contentZoom;
-
-            const fContent = this.getContentPosFraction();
-            const fTrack = this.getTrackPosFraction();
-            x = this.props.horizontal ? fContent : fTrack;
-            y = this.props.horizontal ? fTrack : fContent;
-        }
-
-        scroller.zoom(xZoom, yZoom);
-
-        let shouldUpdateScroller = 2;
-        {
-            // compare with current values from scroller
-            const _x = scroller.getScrollX();
-            const _y = scroller.getScrollY();
-            const _posTrack = this.calcPosTrack(
-                this.props.horizontal ? _y : _x
-            );
-            const posTrack = this.calcPosTrack(this.props.horizontal ? y : x);
-            if (posTrack === _posTrack) {
-                shouldUpdateScroller--;
-                this.props.horizontal ? (y = _y) : (x = _x);
-            }
-            const _fContent = this.props.horizontal ? _x : _y;
-            const fContent = this.props.horizontal ? x : y;
-            if (Math.abs(fContent - _fContent) < 0.001) {
-                shouldUpdateScroller--;
-                this.props.horizontal ? (x = _x) : (y = _y);
-            }
-        }
-        if (shouldUpdateScroller) scroller.scrollTo(x, y);
-    }
-
-    render(): JSX.Element {
-        return (
-            <Scroller
-                ref={(el) => (this.scroller = el as Scroller)}
-                onScroll={this.onScrollerScroll}
-            >
-                <WellLogView
-                    // copy all props
-                    {...this.props}
-                    // redefine some callbacks
-                    onCreateController={this.onCreateController}
-                    onTrackScroll={this.onTrackScroll}
-                    onTrackSelection={this.onTrackSelection}
-                    onContentRescale={this.onContentRescale}
-                    onContentSelection={this.onContentSelection}
-                />
-            </Scroller>
-        );
-    }
-}
-
-WellLogViewWithScroller.propTypes = _propTypesWellLogView(); // WellLogView.propTypes;
-
-export default WellLogViewWithScroller;

package/src/components/ZoomSlider.stories.jsx

@@ -1,52 +0,0 @@
-import React from "react";
-import ZoomSlider from "./ZoomSlider";
-
-const ComponentCode = "<ZoomSlider value={1} max={128}/>";
-
-export default {
-    component: ZoomSlider,
-    title: "WellLogViewer/Components/ZoomSlider",
-    parameters: {
-        docs: {
-            description: {
-                component:
-                    "An auxiliary component for WellLogViewer demo component. Used for setting a zoom factor to well log tracks",
-            },
-        },
-        componentSource: {
-            code: ComponentCode,
-            language: "javascript",
-        },
-    },
-    argTypes: {
-        value: {
-            description: "Zoom value (default 1)",
-        },
-        max: {
-            description: "Max zoom value (default 256)",
-        },
-        onChange: {
-            description: "zoom value callback",
-        },
-        step: {
-            description: "zoom level step (default 0.5)",
-        },
-    },
-};
-
-const Template = (args) => {
-    return (
-        <div style={{ height: "92vh" }}>
-            <div style={{ width: "97%", height: "100%", flex: 1 }}>
-                Zoom:
-                <ZoomSlider id="ZoomSlider" {...args} />
-            </div>
-        </div>
-    );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-    value: 1,
-    max: 128,
-};

package/src/components/ZoomSlider.test.tsx

@@ -1,28 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import "@testing-library/jest-dom/extend-expect";
-import { render } from "@testing-library/react";
-import "jest-styled-components";
-import React from "react";
-import ZoomSlider from "./ZoomSlider";
-
-window.ResizeObserver =
-    window.ResizeObserver ||
-    jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-    }));
-
-describe("Test zoom slider", () => {
-    it("snapshot test", () => {
-        const { container } = render(
-            <ZoomSlider
-                onChange={function (): void {
-                    throw new Error("Function not implemented.");
-                }}
-                value={0}
-            />
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-});

package/src/components/ZoomSlider.tsx

@@ -1,86 +0,0 @@
-import React, { Component } from "react";
-
-import Slider from "@mui/material/Slider";
-
-interface Props {
-    onChange: (value: number) => void;
-    value: number; // zoom value.
-
-    max?: number; // max zoom value. default 256
-    step?: number; // step of zoom level. default 0.5
-}
-
-interface State {
-    level: number;
-}
-
-function convertLevelToValue(level: number): number {
-    // convert zoom level to zoom value
-    return 2 ** level;
-}
-function convertValueToLevel(value: number): number {
-    // convert zoom value to zoom level
-    return value > 0 ? Math.log2(value) : 0;
-}
-
-function valueLabelFormat(value: number /*, index: number*/): string {
-    return value.toFixed(Number.isInteger(value) || value > 20 ? 0 : 1);
-}
-
-class ZoomSlider extends Component<Props, State> {
-    constructor(props: Props, state: State) {
-        super(props, state);
-
-        const level = convertValueToLevel(this.props.value);
-        this.state = {
-            level: level,
-        };
-        this.onChange = this.onChange.bind(this);
-    }
-
-    componentDidUpdate(prevProps: Props): void {
-        if (this.props.value !== prevProps.value) {
-            this.setState((state: Readonly<State>) => {
-                const level = convertValueToLevel(this.props.value);
-                if (state.level == level) return null;
-                return { level: level };
-            });
-        }
-    }
-
-    // callback function from Zoom slider
-    onChange(
-        _event: Event,
-        level: number | number[] // zoom level
-    ): void {
-        if (typeof level === "number") {
-            this.setState((state: Readonly<State>) => {
-                if (state.level === level) return null;
-                if (this.props.onChange)
-                    this.props.onChange(convertLevelToValue(level));
-                else console.error("ZoomSlider props.onChange not set");
-                return { level: level as number };
-            });
-        }
-    }
-
-    render(): JSX.Element {
-        return (
-            <Slider
-                value={this.state.level}
-                defaultValue={0}
-                min={0}
-                step={this.props.step || 0.5}
-                max={convertValueToLevel(this.props.max || 256)}
-                scale={convertLevelToValue} // convert zoom level to zoom value function
-                onChange={this.onChange}
-                getAriaValueText={valueLabelFormat}
-                valueLabelFormat={valueLabelFormat}
-                aria-labelledby="non-linear-slider"
-                valueLabelDisplay="auto"
-            />
-        );
-    }
-}
-
-export default ZoomSlider;

package/src/components/__snapshots__/AxisSelector.test.tsx.snap

@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Test Axis Selector snapshot test 1`] = `
-<div>
-  <fieldset>
-    <legend>
-      Primary scale
-    </legend>
-    <div>
-      <input
-        checked=""
-        type="radio"
-        value="md"
-      />
-      MD
-    </div>
-    <div>
-      <input
-        type="radio"
-        value="tvd"
-      />
-      TVD
-    </div>
-  </fieldset>
-</div>
-`;
-
-exports[`Test Axis Selector test when there no axes- empty rendering 1`] = `null`;

package/src/components/__snapshots__/InfoPanel.test.tsx.snap

@@ -1,103 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Test Info panel snapshot test 1`] = `
-<div
-  style="overflow-y: auto; overflow-x: hidden;"
->
-  <fieldset>
-    <legend>
-      Readout
-    </legend>
-    <table
-      style="border-spacing: 0px; width: 100%;"
-    >
-      <tbody>
-        <tr>
-          <td
-            style="color: black; font-size: small;"
-          >
-            ⬤
-          </td>
-          <td>
-            DVER
-          </td>
-          <td
-            style="width: 90px; padding-left: 1.5em; text-align: right;"
-          >
-            2366
-          </td>
-          <td
-            style="padding-left: 0.5em;"
-          >
-            M
-          </td>
-        </tr>
-        <tr>
-          <td
-            colspan="4"
-          >
-             
-            <hr />
-          </td>
-        </tr>
-        <tr>
-          <td
-            style="color: orange; font-size: small;"
-          >
-            ⬤
-          </td>
-          <td>
-            BDIA
-          </td>
-          <td
-            style="width: 90px; padding-left: 1.5em; text-align: right;"
-          >
-            8.5
-          </td>
-          <td
-            style="padding-left: 0.5em;"
-          >
-            INCH
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </fieldset>
-</div>
-`;
-
-exports[`Test Info panel snapshot test when value is infinity 1`] = `
-<div
-  style="overflow-y: auto; overflow-x: hidden;"
->
-  <fieldset>
-    <legend>
-      Readout
-    </legend>
-    <table
-      style="border-spacing: 0px; width: 100%;"
-    >
-      <tbody>
-        <tr>
-          <td
-            style="color: black; font-size: small;"
-          >
-            ⬤
-          </td>
-          <td>
-            DVER
-          </td>
-          <td
-            style="width: 90px; padding-left: 1.5em; text-align: right;"
-          />
-          <td
-            style="padding-left: 0.5em;"
-          >
-            M
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </fieldset>
-</div>
-`;

package/src/components/__snapshots__/Scroller.test.tsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Test scroller snapshot test 1`] = `
-<div
-  style="overflow: scroll; width: 100%; height: 100%;"
->
-  <div>
-    <div
-      style="position: absolute;"
-    />
-  </div>
-</div>
-`;

package/src/components/__snapshots__/WellLogView.test.tsx.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Test Well Log View Component snapshot test 1`] = `
-<div
-  class="welllogview"
-  style="width: 100%; height: 100%; display: flex; flex-direction: column;"
->
-  <div
-    style="width: 100%; height: 100%; display: flex; flex-direction: column;"
-  >
-    <div
-      class="log-controller"
-    >
-      <div
-        class="overlay"
-        style="width: 0px; left: 0px; overflow: hidden;"
-      >
-        <div
-          class="depth"
-          style="position: absolute; pointer-events: none; visibility: hidden;"
-        />
-        <div
-          class="rubber-band"
-          style="position: relative; pointer-events: none; height: 9px; width: 100%; visibility: hidden;"
-        >
-          <div
-            style="height: 1px; width: 100%; top: 4.5px; position: relative;"
-          />
-        </div>
-        <div
-          class="pinned"
-          style="position: absolute; pointer-events: none; height: 9px; width: 100%; left: 0px; visibility: hidden;"
-        >
-          <div
-            style="height: 1px; width: 100%; top: 4.5px; position: absolute;"
-          />
-        </div>
-      </div>
-      <div
-        class="track"
-        style="display: flex; flex: 3;"
-      >
-        <div
-          class="track-container"
-        >
-          <canvas
-            style="position: absolute;"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;