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

package/src/components/PlotDialog.tsx

@@ -1,419 +0,0 @@
-import React, { Component, ReactNode } from "react";
-
-import { Track, GraphTrack } from "@equinor/videx-wellog";
-
-import { TemplatePlot, TemplatePlotTypes } from "./WellLogTemplateTypes";
-import { WellLog } from "./WellLogTypes";
-import { ColorTable } from "./ColorTableTypes";
-
-import WellLogView from "./WellLogView";
-
-// material ui
-import {
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Button,
-    FormControl,
-    InputLabel,
-    NativeSelect,
-} from "@mui/material";
-import { getTrackTemplate } from "../utils/tracks";
-
-const typeItems: Record<string, string> = {
-    // language dependent names of plot types
-    line: "Line",
-    linestep: "Line Step",
-    dot: "Dot",
-    area: "Area",
-    gradientfill: "Gradient Fill",
-    differential: "Differential",
-};
-
-const scaleItems: Record<string, string> = {
-    // language dependent names of plot types
-    linear: "Linear",
-    log: "Logarithmic",
-};
-
-const colorItems: Record<string, string> = {
-    // language dependent names of colors
-    black: "Black",
-    red: "Red",
-    green: "Green",
-    blue: "Blue",
-    brown: "Brown",
-    magenta: "Magenta",
-    orange: "Orange",
-    gray: "Gray",
-    darkred: "Dark red",
-    lightgreen: "Light green",
-    lightblue: "Light blue",
-    yellow: "Yellow",
-    white: "White",
-};
-
-const noneValue = "-";
-
-export function _createItems(items: Record<string, string>): ReactNode[] {
-    const nodes: ReactNode[] = [];
-    for (const key in items) {
-        nodes.push(
-            <option key={key} value={key}>
-                {items[key]}
-            </option>
-        );
-    }
-    return nodes;
-}
-
-function createTypeItems(): ReactNode[] {
-    return _createItems(typeItems);
-}
-export function createScaleItems(): ReactNode[] {
-    return _createItems(scaleItems);
-}
-function createColorItems(): ReactNode[] {
-    return _createItems(colorItems);
-}
-
-function createColorTableItems(colorTables: ColorTable[]): ReactNode[] {
-    const nodes: ReactNode[] = [];
-    for (const colorTable of colorTables) {
-        if (colorTable.discrete)
-            // skip discrete color tables
-            continue;
-        nodes.push(<option key={colorTable.name}>{colorTable.name}</option>);
-    }
-    return nodes;
-}
-
-function createDataItem(item: string): ReactNode {
-    return (
-        <option key={item} value={item}>
-            {item}
-        </option>
-    );
-}
-
-export function dataNames(
-    welllog: WellLog | undefined,
-    track: Track | null,
-    discrete?: boolean
-): string[] {
-    const names: string[] = [];
-    if (welllog) {
-        const skipUsed = !!track;
-        const plots = track ? (track as GraphTrack).plots : undefined;
-        const abbr = track ? track.options.abbr : undefined;
-
-        const curves = welllog.curves;
-        let iCurve = 0;
-        for (const curve of curves) {
-            if (
-                discrete &&
-                curve.valueType !== "string" &&
-                curve.valueType !== "integer"
-            )
-                continue;
-
-            let bUsed = false;
-            if (plots) {
-                // GraphTrack
-                for (const plot of plots)
-                    if (plot.id == iCurve) {
-                        bUsed = true;
-                        break;
-                    }
-            } else if (abbr === curve.name) {
-                // Scale tracks?
-                bUsed = true;
-            }
-            if (!bUsed || !skipUsed) names.push(curve.name);
-            iCurve++;
-        }
-    }
-    return names;
-}
-
-export function createDataItems(
-    welllog: WellLog | undefined,
-    track: Track | null,
-    discrete?: boolean
-): ReactNode[] {
-    const names = dataNames(welllog, track, discrete);
-    return names.map((name) => createDataItem(name));
-}
-
-interface Props {
-    templatePlot?: TemplatePlot; // input for editting
-    onOK: (templatePlot: TemplatePlot) => void;
-    wellLogView: WellLogView;
-    track: Track;
-}
-interface State extends TemplatePlot {
-    open: boolean;
-}
-
-export class PlotPropertiesDialog extends Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        let name = "",
-            name2 = "";
-        const names = this.dataNames(true);
-        if (names[0]) name2 = name = names[0];
-        if (names[1]) name2 = names[1];
-
-        const trackTemplate = getTrackTemplate(this.props.track);
-        const templatePlot = this.props.templatePlot;
-        this.state = templatePlot
-            ? {
-                  ...templatePlot,
-
-                  open: true,
-              }
-            : {
-                  // we should fill every posible state to allow this.setState() to set it
-                  type: trackTemplate.scale ? "" : "line",
-                  name: name, //?? the first data in data selector
-                  name2: name2, //? the second data in data selector ??
-
-                  scale: undefined,
-                  color: "black", //??
-
-                  // for 'area' plot
-                  fill: "red",
-                  fillOpacity: 0.25,
-                  inverseColor: "",
-
-                  // for 'gradientfill' plot
-                  colorTable: this.props.wellLogView.props.colorTables[0].name,
-                  inverseColorTable: undefined,
-                  colorScale: undefined,
-                  inverseColorScale: undefined,
-
-                  // for 'differential' plot
-                  color2: "black", //??
-                  fill2: "green",
-
-                  open: true,
-              };
-
-        this.closeDialog = this.closeDialog.bind(this);
-        this.onOK = this.onOK.bind(this);
-    }
-
-    componentDidUpdate(_prevProps: Props, prevState: State): void {
-        if (this.state.type !== prevState.type) {
-            if (this.state.type === "area") {
-                if (!this.state.fill) this.setState({ fill: "black" });
-            } else if (this.state.type === "gradientfill") {
-                if (this.state.inverseColor)
-                    this.setState({ inverseColor: "" });
-            } else if (this.state.type === "differential") {
-                if (!this.state.name2) {
-                    const skipUsed = this.props.templatePlot
-                        ? false
-                        : true; /*??*/
-                    this.setState({ name2: this.dataNames(skipUsed)[0] });
-                }
-            }
-        }
-    }
-
-    onOK(): void {
-        this.props.onOK(this.state);
-        this.closeDialog();
-    }
-
-    closeDialog(): void {
-        this.setState({ open: false });
-    }
-
-    dataNames(skipUsed: boolean): string[] {
-        return dataNames(
-            this.props.wellLogView.props.welllog,
-            skipUsed ? this.props.track : null
-        );
-    }
-
-    createDataItems(skipUsed: boolean): ReactNode[] {
-        const names = this.dataNames(skipUsed);
-        return names.map((name) => createDataItem(name));
-    }
-
-    createSelectControl(
-        valueName: string, // use it as "a pointer to member" of an object
-        label: string,
-        nodes: ReactNode[],
-        insertEmpty?: string | boolean
-    ): ReactNode {
-        let value = (this.state as unknown as Record<string, string>)[
-            valueName
-        ];
-        if (insertEmpty) {
-            if (!value) value = noneValue;
-            // insert at the beginning
-            nodes.unshift(
-                <option key={noneValue} value={noneValue}>
-                    {insertEmpty == true ? "\u2014" : insertEmpty}
-                </option>
-            );
-        }
-        return (
-            <FormControl fullWidth>
-                <InputLabel>{label}</InputLabel>
-                <NativeSelect
-                    value={value}
-                    onChange={(event) => {
-                        const value =
-                            event.currentTarget.value === noneValue
-                                ? ""
-                                : event.currentTarget.value;
-
-                        const values = new Object() as Record<string, string>;
-                        values[valueName] = value;
-                        this.setState(values as unknown as State);
-                    }}
-                >
-                    {nodes}
-                </NativeSelect>
-            </FormControl>
-        );
-    }
-
-    createSelectControlFromType(type: TemplatePlotTypes): ReactNode {
-        if (type === "area" || type === "differential") {
-            return [
-                this.createSelectControl(
-                    "fill",
-                    "Fill Color",
-                    createColorItems()
-                ),
-                <FormControl fullWidth key="112" />,
-                <FormControl fullWidth key="113" />,
-                this.state.type === "area" ? (
-                    this.createSelectControl(
-                        "inverseColor",
-                        "Inverse Color",
-                        createColorItems(),
-                        true
-                    )
-                ) : (
-                    <FormControl fullWidth />
-                ),
-            ];
-        } else if (type === "gradientfill") {
-            const colorTables = this.props.wellLogView.props.colorTables;
-            [
-                this.createSelectControl(
-                    "colorTable",
-                    "Fill Color table",
-                    createColorTableItems(colorTables)
-                ),
-                <FormControl fullWidth key="211" />,
-                <FormControl fullWidth key="212" />,
-                this.createSelectControl(
-                    "inverseColorTable",
-                    "Inverse Color table",
-                    createColorTableItems(colorTables),
-                    true
-                ),
-            ];
-        }
-
-        return [];
-    }
-
-    render(): JSX.Element {
-        const trackTemplate = getTrackTemplate(this.props.track);
-        const title = this.props.templatePlot ? "Edit plot" : "Add New Plot";
-        const skipUsed = this.props.templatePlot ? false : true; /*??*/
-        const scale = this.state.scale || trackTemplate.scale;
-        return (
-            <Dialog
-                open={this.state.open}
-                maxWidth="sm"
-                fullWidth
-                onClose={() => this.setState({ open: false })}
-            >
-                <DialogTitle>{title}</DialogTitle>
-                <DialogContent
-                    style={{
-                        display: "grid",
-                        gridTemplateColumns: "1fr 1fr 1fr",
-                    }}
-                >
-                    {this.createSelectControl(
-                        "type",
-                        "Type",
-                        createTypeItems()
-                    )}
-                    {this.createSelectControl(
-                        "scale",
-                        "Scale",
-                        createScaleItems(),
-                        "Track scale"
-                    )}
-                    {this.state.type === "gradientfill" && scale === "linear"
-                        ? [
-                              this.createSelectControl(
-                                  "colorScale",
-                                  "Color Scale",
-                                  createScaleItems()
-                              ),
-                          ]
-                        : [<FormControl fullWidth key="12" />]}
-
-                    {this.createSelectControl(
-                        "name",
-                        "Data",
-                        this.createDataItems(skipUsed)
-                    )}
-                    {this.createSelectControl(
-                        "color",
-                        this.state.type === "dot" ? "Dot Color" : "Line Color",
-                        createColorItems()
-                    )}
-                    {this.createSelectControlFromType(this.state.type)}
-                    {this.state.type === "differential"
-                        ? [
-                              this.createSelectControl(
-                                  "name2",
-                                  "Data 2",
-                                  this.createDataItems(skipUsed)
-                              ),
-                              this.createSelectControl(
-                                  "color2",
-                                  "Line Color 2",
-                                  createColorItems()
-                              ),
-                              this.createSelectControl(
-                                  "fill2",
-                                  "Fill Color 2",
-                                  createColorItems()
-                              ),
-                          ]
-                        : []}
-                </DialogContent>
-                <DialogActions>
-                    <Button
-                        color="secondary"
-                        variant="contained"
-                        onClick={this.closeDialog}
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        color="primary"
-                        variant="contained"
-                        onClick={this.onOK}
-                    >
-                        OK
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        );
-    }
-}

package/src/components/Scroller.stories.jsx

@@ -1,80 +0,0 @@
-import React from "react";
-import Scroller from "./Scroller";
-
-const ComponentCode =
-    "const infoRef = React.useRef(); \r\n" +
-    "const setInfo = function (info) { \r\n" +
-    "    if (infoRef.current) infoRef.current.innerHTML = info; \r\n" +
-    "}; \r\n" +
-    "return ( \r\n" +
-    '    <div style={{ height: "92vh" }}> \r\n' +
-    "        <Scroller \r\n" +
-    "            ref={(el) => { \r\n" +
-    "                el.zoom(10, 10); \r\n" +
-    "                el.scrollTo(0.2, 0.2); \r\n" +
-    "            }} \r\n" +
-    "            onScroll={(x, y) => { \r\n" +
-    "                setInfo( \r\n" +
-    '                    "Scroll position X=" + \r\n' +
-    "                        x.toFixed(2) + \r\n" +
-    '                        ", Y=" + \r\n' +
-    "                        y.toFixed(2) \r\n" +
-    "                ); \r\n" +
-    "            }} \r\n" +
-    "        > \r\n" +
-    "            <div ref={infoRef}></div> \r\n" +
-    "        </Scroller> \r\n" +
-    "    </div> \r\n" +
-    "); \r\n";
-
-export default {
-    component: Scroller,
-    title: "WellLogViewer/Components/Scroller",
-    parameters: {
-        docs: {
-            description: {
-                component: "Auxiliary component to create scrolbars.",
-            },
-        },
-        componentSource: {
-            code: ComponentCode,
-            language: "javascript",
-        },
-    },
-    argTypes: {
-        onScroll: {
-            description: "Callback with new scroll positions",
-        },
-    },
-};
-
-const Template = (args) => {
-    const infoRef = React.useRef();
-    const setInfo = function (info) {
-        if (infoRef.current) infoRef.current.innerHTML = info;
-    };
-    return (
-        <div style={{ height: "92vh" }}>
-            <Scroller
-                ref={(el) => {
-                    el.zoom(10, 10);
-                    el.scrollTo(0.2, 0.2);
-                }}
-                onScroll={(x, y) => {
-                    setInfo(
-                        "Scroll position X=" +
-                            x.toFixed(2) +
-                            ", Y=" +
-                            y.toFixed(2)
-                    );
-                    args.onScroll(x, y); // for storybook addon Actions Tab
-                }}
-            >
-                <div ref={infoRef}></div>
-            </Scroller>
-        </div>
-    );
-};
-
-export const Default = Template.bind({});
-Default.args = {};

package/src/components/Scroller.test.tsx

@@ -1,22 +0,0 @@
-import { render } from "@testing-library/react";
-import "jest-styled-components";
-import "@testing-library/jest-dom";
-import React from "react";
-import Scroller from "./Scroller";
-
-window.ResizeObserver =
-    window.ResizeObserver ||
-    jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-    }));
-
-describe("Test scroller", () => {
-    it("snapshot test", () => {
-        const { container } = render(
-            <Scroller onScroll={(x: number, y: number) => [x, y]} />
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-});

package/src/components/Scroller.tsx

@@ -1,173 +0,0 @@
-import React, { Component, ReactNode } from "react";
-
-function getScrollbarSizes(): { vertical: number; horizontal: number } {
-    // Creating invisible container
-    const outer = document.createElement("div");
-    outer.style.visibility = "hidden";
-    outer.style.overflow = "scroll"; // forcing scrollbar to appear
-    //!!! commented to avoid error TS2339: Property 'msOverflowStyle' does not exist on type 'CSSStyleDeclaration'.
-    //!!! outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
-    document.body.appendChild(outer);
-
-    const vertical = outer.offsetWidth - outer.clientWidth;
-    const horizontal = outer.offsetHeight - outer.clientHeight;
-
-    // Removing temporary elements from the DOM
-    document.body.removeChild(outer);
-
-    return { vertical, horizontal };
-}
-
-interface Props {
-    /**
-     * callback with new scroll positions
-     */
-    onScroll?: (x: number, y: number) => void;
-    children?: ReactNode;
-}
-
-class Scroller extends Component<Props> {
-    scroller: HTMLDivElement | null; // Outer
-    scrollable: HTMLDivElement | null; // Inner
-    content: HTMLDivElement | null; // Content over inner
-    resizeObserver: ResizeObserver;
-
-    constructor(props: Props) {
-        super(props);
-        this.scroller = null;
-        this.scrollable = null;
-        this.content = null;
-
-        this.resizeObserver = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            if (entry && entry.target) {
-                const Width = (entry.target as HTMLElement).offsetWidth;
-                const Height = (entry.target as HTMLElement).offsetHeight;
-
-                if (this.content) {
-                    const { vertical, horizontal } = getScrollbarSizes();
-
-                    this.content.style.width = Width - vertical + "px";
-                    this.content.style.height = Height - horizontal + "px";
-                }
-            }
-        });
-
-        this.onScroll = this.onScroll.bind(this);
-    }
-
-    componentDidMount(): void {
-        if (this.scroller) this.resizeObserver.observe(this.scroller);
-    }
-    componentWillUnmount(): void {
-        if (this.scroller) this.resizeObserver.unobserve(this.scroller);
-    }
-
-    /* current position access functions */
-    getScrollX(): number {
-        const elOuter = this.scroller;
-        if (!elOuter) return 0;
-        const scrollWidth = elOuter.scrollWidth - elOuter.clientWidth;
-        return scrollWidth ? elOuter.scrollLeft / scrollWidth : 0;
-    }
-    getScrollY(): number {
-        const elOuter = this.scroller;
-        if (!elOuter) return 0;
-        const scrollHeight = elOuter.scrollHeight - elOuter.clientHeight;
-        return scrollHeight ? elOuter.scrollTop / scrollHeight : 0;
-    }
-    getScrollPos(vertical: boolean | undefined): number {
-        return vertical ? this.getScrollY() : this.getScrollX();
-    }
-
-    /**
-     * callback from HTML element
-     */
-    onScroll(): void {
-        const elOuter = this.scroller;
-        if (!elOuter) return;
-        // notify parent
-        if (this.props.onScroll)
-            this.props.onScroll(this.getScrollX(), this.getScrollY());
-    }
-
-    /* functions to externally set zoom and scroll position */
-
-    /**
-     * @param x value to set the horizontal beginning of visible part of content (fraction)
-     * @param y value to set the vertical beginning of visible part of content (fraction)
-     * @returns true if visible part is changed
-     */
-    scrollTo(x: number, y: number): boolean {
-        if (x < 0.0) x = 0.0;
-        else if (x > 1.0) x = 1.0;
-        if (y < 0.0) y = 0.0;
-        else if (y > 1.0) y = 1.0;
-
-        const elOuter = this.scroller;
-        if (!elOuter) return false;
-
-        const scrollLeft = Math.round(
-            x * (elOuter.scrollWidth - elOuter.clientWidth)
-        );
-        const scrollTop = Math.round(
-            y * (elOuter.scrollHeight - elOuter.clientHeight)
-        );
-
-        if (
-            elOuter.scrollLeft !== scrollLeft ||
-            elOuter.scrollTop !== scrollTop
-        ) {
-            elOuter.scrollTo(scrollLeft, scrollTop);
-            return true;
-        }
-        return false;
-    }
-    /**
-     * @param xZoom set X zoom factor of visible part of content
-     * @param yZoom set Y zoom factor of visible part of content
-     * @returns true if visible part is changed
-     */
-    zoom(xZoom: number, yZoom: number): boolean {
-        const elOuter = this.scroller;
-        if (!elOuter) return false;
-
-        const elInner = this.scrollable;
-        if (!elInner) return false;
-
-        const widthInner = Math.round(elOuter.clientWidth * xZoom) + "px";
-        const heightInner = Math.round(elOuter.clientHeight * yZoom) + "px";
-
-        if (
-            elInner.style.width !== widthInner ||
-            elInner.style.height !== heightInner
-        ) {
-            elInner.style.width = widthInner;
-            elInner.style.height = heightInner;
-
-            return true;
-        }
-        return false;
-    }
-
-    render(): JSX.Element {
-        return (
-            <div
-                ref={(el) => (this.scroller = el as HTMLDivElement)}
-                style={{ overflow: "scroll", width: "100%", height: "100%" }}
-                onScroll={this.onScroll}
-            >
-                <div ref={(el) => (this.scrollable = el as HTMLDivElement)}>
-                    <div
-                        ref={(el) => (this.content = el as HTMLDivElement)}
-                        style={{ position: "absolute" }}
-                    >
-                        {this.props.children}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default Scroller;