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

package/src/WellLogViewer.stories.jsx

@@ -1,169 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */ // remove when ready to fix these.
-
-import React from "react";
-import WellLogViewer from "./WellLogViewer";
-import { argTypesWellLogViewerProp } from "./WellLogViewer";
-import { colorTables } from "@emerson-eps/color-tables";
-
-const ComponentCode =
-    '<WellLogViewer id="WellLogViewer" \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: WellLogViewer,
-    title: "WellLogViewer/Demo/WellLogViewer",
-    parameters: {
-        docs: {
-            description: {
-                component:
-                    "A demo component to deal with WellLogView component.",
-            },
-        },
-        componentSource: {
-            code: ComponentCode,
-            language: "javascript",
-        },
-    },
-    argTypes: {
-        ...argTypesWellLogViewerProp,
-        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.",
-        },
-    },
-};
-
-function fillInfo(controller) {
-    if (!controller) return "-";
-    const baseDomain = controller.getContentBaseDomain();
-    const domain = controller.getContentDomain();
-    const selection = controller.getContentSelection();
-    return (
-        "total: [" +
-        baseDomain[0].toFixed(0) +
-        ", " +
-        baseDomain[1].toFixed(0) +
-        "], " +
-        "visible: [" +
-        domain[0].toFixed(0) +
-        ", " +
-        domain[1].toFixed(0) +
-        "]" +
-        (selection[0] !== undefined
-            ? ", selected: [" +
-              selection[0].toFixed(0) +
-              (selection[1] !== undefined
-                  ? ", " + selection[1].toFixed(0)
-                  : "") +
-              "]"
-            : "")
-    );
-}
-
-const Template = (args) => {
-    const infoRef = React.useRef();
-    const setInfo = function (info) {
-        if (infoRef.current) infoRef.current.innerHTML = info;
-    };
-    const [controller, setController] = React.useState(null);
-    const onCreateController = React.useCallback(
-        (controller) => {
-            setController(controller);
-        },
-        [controller]
-    );
-    const onContentRescale = React.useCallback(() => {
-        setInfo(fillInfo(controller));
-    }, [controller]);
-    const onContentSelection = React.useCallback(() => {
-        setInfo(fillInfo(controller));
-    }, [controller]);
-
-    return (
-        <div
-            style={{ height: "92vh", display: "flex", flexDirection: "column" }}
-        >
-            <div style={{ width: "100%", height: "100%", flex: 1 }}>
-                <WellLogViewer
-                    id="WellLogViewer"
-                    {...args}
-                    onCreateController={onCreateController}
-                    onContentRescale={onContentRescale}
-                    onContentSelection={onContentSelection}
-                />
-            </div>
-            <div ref={infoRef} style={{ width: "100%", flex: 0 }}></div>
-        </div>
-    );
-};
-
-const wellpick = {
-    wellpick: require("../../../../example-data/wellpicks.json")[0],
-    name: "HORIZON",
-    colorTables: colorTables,
-    color: "Stratigraphy",
-};
-
-export const Default = Template.bind({});
-Default.args = {
-    id: "Well-Log-Viewer",
-    horizontal: false,
-    welllog: require("../../../../example-data/L898MUD.json")[0],
-    template: require("../../../../example-data/welllog_template_1.json"),
-    colorTables: colorTables,
-    wellpick: wellpick,
-    axisTitles: axisTitles,
-    axisMnemos: axisMnemos,
-    viewTitle: true, // show default welllog view title (a wellname from the welllog)
-    options: {
-        hideTrackTitle: false,
-        hideTrackLegend: false,
-    },
-};
-
-export const Horizontal = Template.bind({});
-Horizontal.args = {
-    id: "Well-Log-Viewer-Horizontal",
-    horizontal: true,
-    welllog:
-        require("../../../../example-data/WL_RAW_AAC-BHPR-CAL-DEN-GR-MECH-NEU-NMR-REMP_MWD_3.json")[0],
-    template: require("../../../../example-data/welllog_template_2.json"),
-    colorTables: colorTables,
-    wellpick: wellpick,
-    axisTitles: axisTitles,
-    axisMnemos: axisMnemos,
-    viewTitle: true, // show default welllog view title (a wellname from the welllog)
-};
-Horizontal.parameters = {
-    docs: {
-        description: {
-            story: "An example showing horizontal orientation of the tracks.",
-        },
-    },
-};
-
-export const Discrete = Template.bind({});
-Discrete.args = {
-    id: "Well-Log-Viewer-Discrete",
-    horizontal: false,
-    welllog: require("../../../../example-data/volve_logs.json")[0],
-    template: require("../../../../example-data/welllog_template_2.json"),
-    colorTables: colorTables,
-    wellpick: wellpick,
-    axisTitles: axisTitles,
-    axisMnemos: axisMnemos,
-    viewTitle: true, // show default welllog view title (a wellname from the welllog)
-};
-Discrete.parameters = {
-    docs: {
-        description: {
-            story: "An example showing the tracks with discrete logs.",
-        },
-    },
-};

package/src/WellLogViewer.test.tsx

@@ -1,53 +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 WellLogViewer from "./WellLogViewer";
-import { WellLogController } from "./components/WellLogView";
-import { axisTitles, axisMnemos } from "./utils/axes";
-import { colorTables } from "@emerson-eps/color-tables";
-
-const exampleTemplate = require("../../../../example-data/welllog_template_1.json");
-const exampleWellLog = require("../../../../example-data/L898MUD.json")[0];
-const exampleColorTable = colorTables;
-
-window.ResizeObserver =
-    window.ResizeObserver ||
-    jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-    }));
-
-describe("Test Well Log Viewer Component", () => {
-    it("snapshot test", () => {
-        const { container } = render(
-            <WellLogViewer
-                id="Well-Log-Viewer"
-                options={{
-                    hideTrackTitle: true,
-                    hideTrackLegend: true,
-                }}
-                welllog={exampleWellLog}
-                template={exampleTemplate}
-                colorTables={exampleColorTable}
-                horizontal={true}
-                primaryAxis={"md"}
-                axisTitles={axisTitles}
-                axisMnemos={axisMnemos}
-                readoutOptions={{
-                    allTracks: false,
-                    grouping: "by_track",
-                }}
-                onCreateController={(controller: WellLogController) =>
-                    controller
-                }
-                onContentRescale={function (): void {
-                    throw new Error("Function not implemented.");
-                }}
-            />
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-});

package/src/WellLogViewer.tsx

@@ -1,439 +0,0 @@
-import React, { Component } from "react";
-
-import PropTypes from "prop-types";
-
-import WellLogViewWithScroller from "./components/WellLogViewWithScroller";
-import { WellLogViewWithScrollerProps } from "./components/WellLogViewWithScroller";
-import { argTypesWellLogViewScrollerProp } from "./components/WellLogViewWithScroller";
-//import { _propTypesWellLogView } from "./components/WellLogView";
-
-import { shouldUpdateWellLogView } from "./components/WellLogView";
-
-import InfoPanel from "./components/InfoPanel";
-import AxisSelector from "./components/AxisSelector";
-
-import ZoomSlider from "./components/ZoomSlider";
-
-import { WellLogController } from "./components/WellLogView";
-
-import { getAvailableAxes } from "./utils/tracks";
-
-import { onTrackMouseEvent } from "./utils/edit-track";
-import { fillInfos } from "./utils/fill-info";
-import { LogViewer } from "@equinor/videx-wellog";
-
-import { Info, InfoOptions } from "./components/InfoTypes";
-
-export interface WellLogViewerProps extends WellLogViewWithScrollerProps {
-    readoutOptions?: InfoOptions; // options for readout
-
-    // callbacks
-    onContentRescale?: () => void;
-    onContentSelection?: () => void;
-    onTemplateChanged?: () => void;
-
-    onCreateController?: (controller: WellLogController) => void;
-}
-
-export const argTypesWellLogViewerProp = {
-    ...argTypesWellLogViewScrollerProp,
-    readoutOptions: {
-        description:
-            "Options for readout panel.<br/>" +
-            "allTracks: boolean — Show not only visible tracks,<br/>" +
-            "grouping: string — How group values.",
-        /*
-        defaultValue: {
-            allTracks: false,
-            grouping: "by_track",
-        }
-        */
-    },
-    // callbacks...
-};
-
-interface State {
-    axes: string[]; // axes available in welllog
-    primaryAxis: string;
-    infos: Info[];
-
-    sliderValue: number; // value for zoom slider
-}
-
-class WellLogViewer extends Component<WellLogViewerProps, State> {
-    public static propTypes: Record<string, unknown>;
-
-    controller: WellLogController | null;
-
-    collapsedTrackIds: (string | number)[];
-
-    constructor(props: WellLogViewerProps) {
-        super(props);
-
-        const axes = getAvailableAxes(
-            this.props.welllog,
-            this.props.axisMnemos
-        );
-        let primaryAxis = axes[0];
-        if (this.props.template && this.props.template.scale.primary) {
-            if (axes.indexOf(this.props.template.scale.primary) >= 0)
-                primaryAxis = this.props.template.scale.primary;
-        }
-        if (this.props.primaryAxis) primaryAxis = this.props.primaryAxis;
-        this.state = {
-            primaryAxis: primaryAxis, //"md"
-            axes: axes, //["md", "tvd"]
-            infos: [],
-
-            sliderValue: 4.0,
-        };
-
-        this.controller = null;
-
-        this.collapsedTrackIds = [];
-
-        this.collapsedTrackIds = [];
-
-        this.onCreateController = this.onCreateController.bind(this);
-
-        this.onInfo = this.onInfo.bind(this);
-
-        this.onChangePrimaryAxis = this.onChangePrimaryAxis.bind(this);
-
-        this.onContentRescale = this.onContentRescale.bind(this);
-        this.onContentSelection = this.onContentSelection.bind(this);
-        this.onTemplateChanged = this.onTemplateChanged.bind(this);
-
-        this.onZoomSliderChange = this.onZoomSliderChange.bind(this);
-
-        this.onInfoGroupClick = this.onInfoGroupClick.bind(this);
-    }
-
-    componentDidMount(): void {
-        this.setSliderValue();
-    }
-
-    shouldComponentUpdate(
-        nextProps: WellLogViewerProps,
-        nextState: State
-    ): boolean {
-        if (shouldUpdateWellLogView(this.props, nextProps)) return true;
-
-        return (
-            !Object.is(this.props, nextProps) ||
-            !Object.is(this.state, nextState)
-        );
-    }
-
-    componentDidUpdate(
-        prevProps: WellLogViewerProps /*, prevState: State*/
-    ): void {
-        if (
-            this.props.welllog !== prevProps.welllog ||
-            this.props.template !== prevProps.template ||
-            this.props.axisMnemos !== prevProps.axisMnemos ||
-            this.props.primaryAxis !== prevProps.primaryAxis /*||
-            this.props.colorTables !== prevProps.colorTables*/
-        ) {
-            const axes = getAvailableAxes(
-                this.props.welllog,
-                this.props.axisMnemos
-            );
-            let primaryAxis = axes[0];
-            if (this.props.template && this.props.template.scale.primary) {
-                if (axes.indexOf(this.props.template.scale.primary) >= 0) {
-                    primaryAxis = this.props.template.scale.primary;
-                } else if (this.props.welllog === prevProps.welllog) return; // nothing to update
-            }
-            if (this.props.primaryAxis) primaryAxis = this.props.primaryAxis;
-            this.setState({
-                primaryAxis: primaryAxis,
-                axes: axes,
-                // will be changed by callback! infos: [],
-            });
-        }
-
-        if (
-            this.props.readoutOptions &&
-            (!prevProps.readoutOptions ||
-                this.props.readoutOptions.allTracks !==
-                    prevProps.readoutOptions.allTracks ||
-                this.props.readoutOptions.grouping !==
-                    prevProps.readoutOptions.grouping)
-        ) {
-            this.updateReadoutPanel();
-        }
-    }
-
-    updateReadoutPanel(): void {
-        const controller = this.controller;
-        if (controller)
-            controller.selectContent(controller.getContentSelection()); // force to update readout panel
-    }
-
-    // callback function from WellLogView
-    onInfo(
-        x: number,
-        logController: LogViewer,
-        iFrom: number,
-        iTo: number
-    ): void {
-        const infos = fillInfos(
-            x,
-            logController,
-            iFrom,
-            iTo,
-            this.collapsedTrackIds,
-            this.props.readoutOptions
-        );
-
-        this.setState({
-            infos: infos,
-        });
-    }
-    // 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
-    onContentRescale(): void {
-        this.setSliderValue();
-        if (this.props.onContentRescale) this.props.onContentRescale();
-    }
-    // callback function from WellLogView
-    onContentSelection(): void {
-        this.setSliderValue();
-        if (this.props.onContentSelection) this.props.onContentSelection();
-    }
-    onTemplateChanged(): void {
-        if (this.props.onTemplateChanged) {
-            if (this.props.onTemplateChanged) this.props.onTemplateChanged();
-        }
-    }
-
-    // callback function from Axis selector
-    onChangePrimaryAxis(value: string): void {
-        this.setState({ primaryAxis: value });
-    }
-    // callback function from Zoom slider
-    onZoomSliderChange(value: number): void {
-        const controller = this.controller;
-        if (controller) {
-            controller.zoomContent(value);
-        }
-    }
-
-    // set zoom value to slider
-    setSliderValue(): void {
-        this.setState((state: Readonly<State>) => {
-            if (!this.controller) return null;
-            const zoom = this.controller.getContentZoom();
-            if (Math.abs(Math.log(state.sliderValue / zoom)) < 0.01)
-                return null;
-            return { sliderValue: zoom };
-        });
-    }
-
-    onInfoGroupClick(trackId: string | number): void {
-        const i = this.collapsedTrackIds.indexOf(trackId);
-        if (i < 0) this.collapsedTrackIds.push(trackId);
-        else delete this.collapsedTrackIds[i];
-
-        this.updateReadoutPanel();
-
-        if (this.controller)
-            this.controller.selectContent(
-                this.controller.getContentSelection()
-            ); // force to update readout panel
-    }
-
-    render(): JSX.Element {
-        const maxContentZoom = 256;
-        return (
-            <div style={{ height: "100%", width: "100%", display: "flex" }}>
-                <WellLogViewWithScroller
-                    welllog={this.props.welllog}
-                    template={this.props.template}
-                    colorTables={this.props.colorTables}
-                    wellpick={this.props.wellpick}
-                    horizontal={this.props.horizontal}
-                    maxContentZoom={maxContentZoom}
-                    primaryAxis={this.state.primaryAxis}
-                    axisTitles={this.props.axisTitles}
-                    axisMnemos={this.props.axisMnemos}
-                    options={this.props.options}
-                    onInfo={this.onInfo}
-                    onCreateController={this.onCreateController}
-                    onTrackMouseEvent={onTrackMouseEvent}
-                    onContentRescale={this.onContentRescale}
-                    onContentSelection={this.onContentSelection}
-                    onTemplateChanged={this.onTemplateChanged}
-                />
-                <div
-                    style={{
-                        flex: "0, 0",
-                        display: "flex",
-                        flexDirection: "column",
-                        height: "100%",
-                        width: "255px",
-                        minWidth: "255px",
-                        maxWidth: "255px",
-                    }}
-                >
-                    <AxisSelector
-                        header="Primary scale"
-                        axes={this.state.axes}
-                        axisLabels={this.props.axisTitles}
-                        value={this.state.primaryAxis}
-                        onChange={this.onChangePrimaryAxis}
-                    />
-                    <InfoPanel
-                        header="Readout"
-                        onGroupClick={this.onInfoGroupClick}
-                        infos={this.state.infos}
-                    />
-                    <br />
-                    <div style={{ paddingLeft: "10px", display: "flex" }}>
-                        <span>Zoom:</span>
-                        <span
-                            style={{
-                                flex: "1 1 100px",
-                                padding: "0 20px 0 10px",
-                            }}
-                        >
-                            <ZoomSlider
-                                value={this.state.sliderValue}
-                                max={maxContentZoom}
-                                onChange={this.onZoomSliderChange}
-                            />
-                        </span>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-///
-const WellLogViewOptions_propTypes = PropTypes.shape({
-    /**
-     * The maximum zoom value
-     */
-    maxContentZoom: PropTypes.number,
-    /**
-     * The maximum number of visible tracks
-     */
-    maxVisibleTrackNum: PropTypes.number,
-    /**
-     * Validate JSON datafile against schema
-     */
-    checkDatafileSchema: PropTypes.bool,
-    /**
-     * Hide titles of the track. Default is false
-     */
-    hideTrackTitle: PropTypes.bool,
-    /**
-     * Hide legends of the track. Default is false
-     */
-    hideTrackLegend: PropTypes.bool,
-});
-
-const InfoOptions_propTypes = PropTypes.shape({
-    /**
-     * Show not only visible tracks
-     */
-    allTracks: PropTypes.bool,
-    /**
-     * how group values. "" | "track"
-     */
-    grouping: PropTypes.string,
-});
-
-WellLogViewer.propTypes = {
-    //do not work with python dash!    ..._propTypesWellLogView(), // ...WellLogViewWithScroller.propTypes,
-    /**
-     * 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.
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * An object from JSON file describing well log data
-     */
-    welllog: PropTypes.object.isRequired,
-
-    /**
-     * Prop containing track template data
-     */
-    template: PropTypes.object.isRequired,
-
-    /**
-     * Prop containing color table data
-     */
-    colorTables: PropTypes.array.isRequired,
-
-    /**
-     * Orientation of the track plots on the screen. Default is false
-     */
-    horizontal: PropTypes.bool,
-
-    /**
-     * Initial visible interval of the log data
-     */
-    domain: PropTypes.arrayOf(PropTypes.number),
-
-    /**
-     * Initial selected interval of the log data
-     */
-    selection: PropTypes.arrayOf(PropTypes.number),
-
-    /**
-     * Well picks data
-     */
-    wellpick: PropTypes.object,
-
-    /**
-     * Primary axis id: " md", "tvd", "time"...
-     */
-    primaryAxis: PropTypes.string,
-
-    /**
-     * Log mnemonics for axes
-     */
-    axisTitles: PropTypes.object,
-
-    /**
-     * Names for axes
-     */
-    axisMnemos: PropTypes.object,
-
-    /**
-     * The maximum zoom value
-     */
-    maxContentZoom: PropTypes.number,
-
-    /**
-     * Set to true for default titles or to array of individial welllog titles
-     */
-    viewTitle: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.string,
-        PropTypes.object /* react element */,
-    ]),
-
-    /**
-     * WellLogView additional options
-     */
-    options: WellLogViewOptions_propTypes /*PropTypes.object,*/,
-
-    /**
-     * Options for readout panel
-     */
-    readoutOptions: InfoOptions_propTypes /*PropTypes.object,*/,
-};
-
-export default WellLogViewer;