Use transpiled react components for generating dash components (equin…

…or#497) * Change name for setup deckgl types to follow convention * Add ts transpiling * Update examples + add well logs example * Add propTypes to wellLogViewer * Remove size limit
hkfb · Nov 29, 2021 · 4735ca2 · 4735ca2
1 parent edb1c18
commit 4735ca2
Show file tree

Hide file tree

Showing 20 changed files with 961,099 additions and 69 deletions.
diff --git a/.github/workflows/webviz-subsurface-components.yml b/.github/workflows/webviz-subsurface-components.yml
@@ -39,7 +39,7 @@ jobs:
         # The deckgl types package runs a postscript to setup, but since we ignore scripts, we need to set it up manually.
         run: |
           npm ci --ignore-scripts --prefix ./react
-          npm run setup_deckgl_types --prefix ./react
+          npm run setup-deckgl-types --prefix ./react
           npm run copy-package-json --prefix ./react
           pip install .[dependencies]
           pip install dash[dev]
@@ -50,7 +50,7 @@ jobs:
         run: |
           echo "NPM_PUBLISH_TAG=next" >> $GITHUB_ENV
           npm install --ignore-scripts @webviz/core-components@next
-          npm run setup_deckgl_types
+          npm run setup-deckgl-types
 
       - name: 🏗️ Build JavaScript part
         run: |

diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 # Dash built code
 
+react/webviz_subsurface_components/**/*
 webviz_subsurface_components/**/*
 !webviz_subsurface_components/__init__.py
 

diff --git a/examples/example_deckgl_map.py b/examples/example_deckgl_map.py
@@ -142,6 +142,10 @@ def array2d_to_png(z_array):
         "https://raw.githubusercontent.com/equinor/webviz-subsurface-components/"
         "master/react/src/demo/example-data/volve_wells.json"
     )
+    LOGS = (
+        "https://raw.githubusercontent.com/equinor/webviz-subsurface-components/"
+        "master/react/src/demo/example-data/volve_logs.json"
+    )
 
     bounds = [432205, 6475078, 437720, 6481113]  # left, bottom, right, top
     width = bounds[2] - bounds[0]  # right - left
@@ -151,7 +155,6 @@ def array2d_to_png(z_array):
         id="deckgl-map",
         resources={
             "propertyMap": map_data,
-            "wells": WELLS,
         },
         deckglSpecBase={
             "initialViewState": {
@@ -185,11 +188,17 @@ def array2d_to_png(z_array):
                 {
                     "@@type": "WellsLayer",
                     "id": "wells-layer",
-                    "data": "@@#resources.wells",
+                    "data": WELLS,
+                    "logData": LOGS,
                     "opacity": 1.0,
                     "lineWidthScale": 5,
                     "pointRadiusScale": 8,
                     "outline": True,
+                    "logRadius": 6,
+                    "logrunName": "BLOCKING",
+                    "logName": "ZONELOG",
+                    "logCurves": True,
+                    "refine": True,
                 },
             ],
             "views": [

diff --git a/examples/example_well_completions.py b/examples/example_well_completions.py
@@ -11,7 +11,7 @@
 
 import webviz_subsurface_components
 
-with open("../src/demo/example-data/well-completions-with-attr.json", "r") as json_file:
+with open("./react/src/demo/example-data/well-completions.json", "r") as json_file:
     data = json.load(json_file)
 
 app = dash.Dash(__name__)

diff --git a/examples/example_well_logs.py b/examples/example_well_logs.py
@@ -0,0 +1,31 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#
+# Copyright (C) 2020 - Equinor ASA.
+
+import json
+
+import dash
+import dash_html_components as html
+
+import webviz_subsurface_components
+
+with open("./react/src/demo/example-data/L898MUD.json", "r") as json_file:
+    logs = json.load(json_file)
+
+with open("./react/src/demo/example-data/welllog_template_1.json", "r") as json_file:
+    template = json.load(json_file)
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    children=[
+        webviz_subsurface_components.WellLogViewer(
+            id="well_completions", welllog=logs, template=template
+        ),
+    ],
+)
+
+if __name__ == "__main__":
+    app.run_server(debug=True)
diff --git a/react/package.json b/react/package.json
@@ -14,16 +14,19 @@
     "scripts": {
         "start": "webpack serve --mode development --devtool inline-source-map --entry ./src/demo/index.js --open",
         "copy-package-json": "copyfiles ./package.json ../webviz_subsurface_components/",
+        "transpile": "tsc && npm run copy-files",
+        "transpile:dash": "tsc && rimraf ./dist/components/*/**/",
+        "tidy-up": "rimraf ./dist ./webviz_subsurface_components",
         "build:js": "webpack --mode production",
         "build:js-dev": "webpack --mode development",
         "build:js-demo": "webpack --mode production --entry ./src/demo/index.js",
-        "build:py": "mv ../webviz_subsurface_components . && dash-generate-components ./src/lib/components webviz_subsurface_components -p package-info.json --ignore \"(.js|.stories.jsx)$\" && mv webviz_subsurface_components ..",
-        "build": "npm run build:js && npm run build:js-dev && npm run build:py",
+        "build:py": "npm run transpile:dash && copyfiles -a ../webviz_subsurface_components/. ./webviz_subsurface_components/ && copyfiles ./package.json ./webviz_subsurface_components/ && dash-generate-components ./dist/components webviz_subsurface_components -p package.json --ignore '(^index.js|.stories.js)$' && copyfiles -a -f ./webviz_subsurface_components/* ../webviz_subsurface_components/",
+        "build": "npm run transpile && npm run build:js && npm run build:js-dev && npm run tidy-up && npm run build:py && npm run tidy-up",
         "typecheck": "tsc --noEmit",
         "format": "eslint --fix *.js *json \"src/**/*.+(ts|tsx|js|jsx|json|css)\"",
         "lint": "eslint *.js *.json \"src/**/*.+(ts|tsx|js|jsx|json|css)\"",
         "validate": "npm run typecheck && npm run lint",
-        "setup_deckgl_types": "cd ./node_modules/@danmarshall/deckgl-typings/ && indefinitely-typed --folder deck.gl__aggregation-layers --folder deck.gl__core --folder deck.gl__extensions --folder deck.gl__geo-layers --folder deck.gl__google-maps --folder deck.gl__json --folder deck.gl__layers --folder deck.gl__mapbox --folder deck.gl__mesh-layers --folder deck.gl__react --folder deck.gl --folder luma.gl__constants --folder luma.gl__core --folder luma.gl__gltools --folder luma.gl__webgl-state-tracker --folder luma.gl__webgl --folder math.gl__core --folder math.gl",
+        "setup-deckgl-types": "cd ./node_modules/@danmarshall/deckgl-typings/ && indefinitely-typed --folder deck.gl__aggregation-layers --folder deck.gl__core --folder deck.gl__extensions --folder deck.gl__geo-layers --folder deck.gl__google-maps --folder deck.gl__json --folder deck.gl__layers --folder deck.gl__mapbox --folder deck.gl__mesh-layers --folder deck.gl__react --folder deck.gl --folder luma.gl__constants --folder luma.gl__core --folder luma.gl__gltools --folder luma.gl__webgl-state-tracker --folder luma.gl__webgl --folder math.gl__core --folder math.gl",
         "storybook": "start-storybook -p 6006",
         "build-storybook": "build-storybook",
         "test": "jest --coverage",

diff --git a/react/src/demo/WellLogViewerDemo.jsx b/react/src/demo/WellLogViewerDemo.jsx
@@ -108,6 +108,7 @@ class WellLogViewerDemo extends Component {
                     </div>
                     <div style={{ width: "80%", flex: 1 }}>
                         <WellLogViewer
+                            id="WellLogViewer"
                             welllog={this.getData(this.state.example)}
                             template={JSON.parse(this.state.text)}
                         />

diff --git a/react/src/demo/example-data/volve_logs.json b/react/src/demo/example-data/volve_logs.json
diff --git a/react/src/lib/components/DeckGLMap/DeckGLMap.jsx b/react/src/lib/components/DeckGLMap/DeckGLMap.jsx
@@ -2,7 +2,7 @@ import * as jsonpatch from "fast-json-patch";
 import { cloneDeep } from "lodash";
 import PropTypes from "prop-types";
 import * as React from "react";
-import Map from "./Map";
+import Map from "./components/Map";
 
 function _idsToIndices(doc, path) {
     // The path looks something like this: `/layers/[layer-id]/property`,

diff --git a/react/src/lib/components/DeckGLMap/Map.tsx → ...b/components/DeckGLMap/components/Map.tsx b/react/src/lib/components/DeckGLMap/Map.tsx → ...b/components/DeckGLMap/components/Map.tsx
@@ -6,12 +6,12 @@ import { Operation } from "fast-json-patch";
 import { Feature } from "geojson";
 import React from "react";
 import { Provider as ReduxProvider } from "react-redux";
-import Settings from "./components/settings/Settings";
-import JSON_CONVERTER_CONFIG from "./configuration";
-import { setSpec } from "./redux/actions";
-import { createStore } from "./redux/store";
-import { WellsPickInfo } from "./layers/wells/wellsLayer";
-import InfoCard from "./components/InfoCard";
+import Settings from "./settings/Settings";
+import JSON_CONVERTER_CONFIG from "../utils/configuration";
+import { setSpec } from "../redux/actions";
+import { createStore } from "../redux/store";
+import { WellsPickInfo } from "../layers/wells/wellsLayer";
+import InfoCard from "./InfoCard";
 
 export interface MapProps {
     id: string;

diff --git a/...lib/components/DeckGLMap/configuration.ts → ...mponents/DeckGLMap/utils/configuration.ts b/...lib/components/DeckGLMap/configuration.ts → ...mponents/DeckGLMap/utils/configuration.ts
@@ -17,7 +17,7 @@ import { EditableGeoJsonLayer } from "@nebula.gl/layers";
 import { registerLoaders } from "@loaders.gl/core";
 import GL from "@luma.gl/constants";
 
-import * as CustomLayers from "./layers";
+import * as CustomLayers from "../layers";
 
 // Note: deck already registers JSONLoader...
 registerLoaders([]);

diff --git a/react/src/lib/components/LeafletMap/LeafletMap.jsx b/react/src/lib/components/LeafletMap/LeafletMap.jsx
@@ -15,7 +15,7 @@ import "./layers/L.tileWebGLLayer";
 // Components
 import Controls from "./components/Controls";
 import CompositeMapLayers from "./components/CompositeMapLayers";
-import Context from "./context";
+import Context from "./utils/context";
 
 // Utils
 import { onSizeChange } from "./utils/element";

diff --git a/react/src/lib/components/LeafletMap/components/CompositeMapLayers.js b/react/src/lib/components/LeafletMap/components/CompositeMapLayers.js
@@ -6,7 +6,7 @@
 
 import { Component } from "react";
 import PropTypes from "prop-types";
-import Context from "../context";
+import Context from "../utils/context";
 
 // Leaflet
 import L from "leaflet";

diff --git a/react/src/lib/components/LeafletMap/components/Controls/components/Colorbar.js b/react/src/lib/components/LeafletMap/components/Controls/components/Colorbar.js
@@ -7,7 +7,7 @@
 import React, { useState, useEffect, useContext } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
-import Context from "../../../context";
+import Context from "../../../utils/context";
 
 // Leaflet
 import L from "leaflet";

diff --git a/react/src/lib/components/LeafletMap/components/Controls/components/DrawControls.js b/react/src/lib/components/LeafletMap/components/Controls/components/DrawControls.js
@@ -8,7 +8,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import "leaflet-draw/dist/leaflet.draw.css";
 import L from "leaflet";
-import Context from "../../../context";
+import Context from "../../../utils/context";
 
 import { getShapeType } from "../../../utils/leaflet";
 

diff --git a/react/src/lib/components/LeafletMap/components/Controls/components/MousePosition.js b/react/src/lib/components/LeafletMap/components/Controls/components/MousePosition.js
@@ -10,7 +10,7 @@ import "leaflet-draw/dist/leaflet.draw.css";
 import L from "leaflet";
 
 // Context
-import Context from "../../../context";
+import Context from "../../../utils/context";
 
 // Constants
 

diff --git a/react/src/lib/components/LeafletMap/components/Controls/components/ScaleControl.js b/react/src/lib/components/LeafletMap/components/Controls/components/ScaleControl.js
@@ -6,7 +6,7 @@
 
 import { useState, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
-import Context from "../../../context";
+import Context from "../../../utils/context";
 
 import L from "leaflet";
 

diff --git a/.../src/lib/components/LeafletMap/context.js → ...ib/components/LeafletMap/utils/context.js b/.../src/lib/components/LeafletMap/context.js → ...ib/components/LeafletMap/utils/context.js
diff --git a/react/src/lib/components/WellLogViewer/WellLogViewer.tsx b/react/src/lib/components/WellLogViewer/WellLogViewer.tsx
@@ -1,5 +1,6 @@
 import React, { Component, ReactNode } from "react";
 
+import PropTypes from "prop-types";
 import WellLogView from "./components/WellLogView";
 import InfoPanel from "./components/InfoPanel";
 import AxisSelector from "./components/AxisSelector";
@@ -45,6 +46,8 @@ interface State {
 }
 
 class WellLogViewer extends Component<Props, State> {
+    public static propTypes: Record<string, unknown>;
+
     controller?: WellLogController;
 
     constructor(props: Props) {
@@ -142,56 +145,77 @@ class WellLogViewer extends Component<Props, State> {
         return (
             <div>
                 <table style={{ height: "100%", width: "100%" }}>
-                    <tr>
-                        <td>
-                            <WellLogView
-                                welllog={this.props.welllog}
-                                template={this.props.template}
-                                primaryAxis={this.state.primaryAxis}
-                                axisTitles={axisTitles}
-                                axisMnemos={axisMnemos}
-                                maxTrackNum={7}
-                                setInfo={this.setInfo.bind(this)}
-                                setController={this.setController.bind(this)}
-                                setScrollPos={this.setScrollPos.bind(this)}
-                            />{" "}
-                            {/*scroll={this.state.scroll}*/}
-                        </td>
-                        <td valign="top" style={{ width: "250px" }}>
-                            <AxisSelector
-                                header="Primary scale"
-                                axes={this.state.axes}
-                                axisLabels={axisTitles}
-                                value={this.state.primaryAxis}
-                                onChange={this.onChangePrimaryAxis.bind(this)}
-                            />
-                            <InfoPanel
-                                header="Readout"
-                                infos={this.state.infos}
-                            />
-                            <div>
-                                <br />
-                                <button
-                                    id="buttonUp"
-                                    type="button"
-                                    onClick={this.onScrollUp.bind(this)}
-                                >
-                                    {"\u25C4"}
-                                </button>
-                                <button
-                                    id="buttonDown"
-                                    type="button"
-                                    onClick={this.onScrollDown.bind(this)}
-                                >
-                                    {"\u25BA"}
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <WellLogView
+                                    welllog={this.props.welllog}
+                                    template={this.props.template}
+                                    primaryAxis={this.state.primaryAxis}
+                                    axisTitles={axisTitles}
+                                    axisMnemos={axisMnemos}
+                                    maxTrackNum={7}
+                                    setInfo={this.setInfo.bind(this)}
+                                    setController={this.setController.bind(
+                                        this
+                                    )}
+                                    setScrollPos={this.setScrollPos.bind(this)}
+                                />{" "}
+                                {/*scroll={this.state.scroll}*/}
+                            </td>
+                            <td valign="top" style={{ width: "250px" }}>
+                                <AxisSelector
+                                    header="Primary scale"
+                                    axes={this.state.axes}
+                                    axisLabels={axisTitles}
+                                    value={this.state.primaryAxis}
+                                    onChange={this.onChangePrimaryAxis.bind(
+                                        this
+                                    )}
+                                />
+                                <InfoPanel
+                                    header="Readout"
+                                    infos={this.state.infos}
+                                />
+                                <div>
+                                    <br />
+                                    <button
+                                        id="buttonUp"
+                                        type="button"
+                                        onClick={this.onScrollUp.bind(this)}
+                                    >
+                                        {"\u25C4"}
+                                    </button>
+                                    <button
+                                        id="buttonDown"
+                                        type="button"
+                                        onClick={this.onScrollDown.bind(this)}
+                                    >
+                                        {"\u25BA"}
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
                 </table>
             </div>
         );
     }
 }
 
+WellLogViewer.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,
+
+    // TODO: Add doc
+    welllog: PropTypes.array,
+
+    // TODO: Add doc
+    template: PropTypes.object,
+};
+
 export default WellLogViewer;
diff --git a/react/src/lib/index.js b/react/src/lib/index.js
@@ -14,6 +14,7 @@ import Morris from "./components/Morris";
 import PriorPosteriorDistribution from "./components/PriorPosteriorDistribution";
 import VectorSelector from "./components/VectorSelector";
 import WellCompletions from "./components/WellCompletions";
+import WellLogViewer from "./components/WellLogViewer";
 
 export {
     HistoryMatch,
@@ -26,4 +27,5 @@ export {
     VectorSelector,
     WellCompletions,
     GroupTree,
+    WellLogViewer,
 };