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

package/dist/demo/example-data/wellpicks.json

@@ -1,186 +1,186 @@
 [
-  {
-    "header": {
-      "name": "Set 1",
-      "well": "15/9-19 A"
-    },
-    "curves": [
-      {
-        "name": "MD",
-        "quantity": "m",
-        "unit": "m",
-        "valueType": "float",
-        "dimensions": 1
-      },
-      {
-        "name": "HORIZON",
-        "valueType": "string",
-        "dimensions": 1
-      }
-    ],
-    "data": [
-      [ 1644, "Hor_1" ],
-      [ 2788, "Hor_2" ],
-      [ 3288, "Hor_3" ],
-      [ 3611, "Hor_4" ],
-      [ 3911, "Hor_5" ],
-      [ 4411, "Hor_6" ]
-    ],
-    "metadata_discrete": {
-      "HORIZON": {
-        "attributes": [
-          "color",
-          "code"
+    {
+        "header": {
+            "name": "Set 1",
+            "well": "15/9-19 A"
+        },
+        "curves": [
+            {
+                "name": "MD",
+                "quantity": "m",
+                "unit": "m",
+                "valueType": "float",
+                "dimensions": 1
+            },
+            {
+                "name": "HORIZON",
+                "valueType": "string",
+                "dimensions": 1
+            }
+        ],
+        "data": [
+            [1644, "Hor_1"],
+            [2788, "Hor_2"],
+            [3288, "Hor_3"],
+            [3611, "Hor_4"],
+            [3911, "Hor_5"],
+            [4411, "Hor_6"]
         ],
-        "objects": {
-          "Hor_1": [
-            [
-              255,
-              13,
-              186,
-              255
-            ],
-            0
-          ],
-          "Hor_2": [
-            [
-              255,
-              64,
-              53,
-              255
-            ],
-            1
-          ],
-          "Hor_3": [
-            [
-              247,
-              255,
-              164,
-              255
-            ],
-            2
-          ],
-          "Hor_4": [
-            [
-              147,
-              255,
-              64,
-              255
-            ],
-            3
-          ],
-          "Hor_5": [
-            [
-              255,
-              147,
-              64,
-              255
-            ],
-            3
-          ],
-          "Hor_6": [
-            [
-              155,
-              164,
-              247,
-              255
-            ],
-            3
-          ]
+        "metadata_discrete": {
+            "HORIZON": {
+                "attributes": [
+                    "color",
+                    "code"
+                ],
+                "objects": {
+                    "Hor_1": [
+                        [
+                            255,
+                            13,
+                            186,
+                            255
+                        ],
+                        0
+                    ],
+                    "Hor_2": [
+                        [
+                            255,
+                            64,
+                            53,
+                            255
+                        ],
+                        1
+                    ],
+                    "Hor_3": [
+                        [
+                            247,
+                            255,
+                            164,
+                            255
+                        ],
+                        2
+                    ],
+                    "Hor_4": [
+                        [
+                            147,
+                            255,
+                            64,
+                            255
+                        ],
+                        3
+                    ],
+                    "Hor_5": [
+                        [
+                            255,
+                            147,
+                            64,
+                            255
+                        ],
+                        3
+                    ],
+                    "Hor_6": [
+                        [
+                            155,
+                            164,
+                            247,
+                            255
+                        ],
+                        3
+                    ]
+                }
+            }
         }
-      }
-    }
-  },
-  {
-    "header": {
-      "name": "Set 1",
-      "well": "L916MUD"
     },
-    "curves": [
-      {
-        "name": "MD",
-        "quantity": "m",
-        "unit": "m",
-        "valueType": "float",
-        "dimensions": 1
-      },
-      {
-        "name": "HORIZON",
-        "valueType": "string",
-        "dimensions": 1
-      }
-    ],
-    "data": [
-      [ 1444, "Hor_1" ],
-      [ 2888, "Hor_2" ],
-      [ 3288, "Hor_3" ],
-      [ 3811, "Hor_4" ],
-      [ 4011, "Hor_5" ],
-      [ 4131, "Hor_6" ]
-    ],
-    "metadata_discrete": {
-      "HORIZON": {
-        "attributes": [
-          "color",
-          "code"
+    {
+        "header": {
+            "name": "Set 1",
+            "well": "L916MUD"
+        },
+        "curves": [
+            {
+                "name": "MD",
+                "quantity": "m",
+                "unit": "m",
+                "valueType": "float",
+                "dimensions": 1
+            },
+            {
+                "name": "HORIZON",
+                "valueType": "string",
+                "dimensions": 1
+            }
+        ],
+        "data": [
+            [1444, "Hor_1"],
+            [2888, "Hor_2"],
+            [3288, "Hor_3"],
+            [3811, "Hor_4"],
+            [4011, "Hor_5"],
+            [4131, "Hor_6"]
         ],
-        "objects": {
-          "Hor_1": [
-            [
-              255,
-              13,
-              186,
-              255
-            ],
-            0
-          ],
-          "Hor_2": [
-            [
-              255,
-              64,
-              53,
-              255
-            ],
-            1
-          ],
-          "Hor_3": [
-            [
-              247,
-              255,
-              164,
-              255
-            ],
-            2
-          ],
-          "Hor_4": [
-            [
-              147,
-              255,
-              64,
-              255
-            ],
-            3
-          ],
-          "Hor_5": [
-            [
-              255,
-              147,
-              64,
-              255
-            ],
-            3
-          ],
-          "Hor_6": [
-            [
-              155,
-              164,
-              247,
-              255
-            ],
-            3
-          ]
+        "metadata_discrete": {
+            "HORIZON": {
+                "attributes": [
+                    "color",
+                    "code"
+                ],
+                "objects": {
+                    "Hor_1": [
+                        [
+                            255,
+                            13,
+                            186,
+                            255
+                        ],
+                        0
+                    ],
+                    "Hor_2": [
+                        [
+                            255,
+                            64,
+                            53,
+                            255
+                        ],
+                        1
+                    ],
+                    "Hor_3": [
+                        [
+                            247,
+                            255,
+                            164,
+                            255
+                        ],
+                        2
+                    ],
+                    "Hor_4": [
+                        [
+                            147,
+                            255,
+                            64,
+                            255
+                        ],
+                        3
+                    ],
+                    "Hor_5": [
+                        [
+                            255,
+                            147,
+                            64,
+                            255
+                        ],
+                        3
+                    ],
+                    "Hor_6": [
+                        [
+                            155,
+                            164,
+                            247,
+                            255
+                        ],
+                        3
+                    ]
+                }
+            }
         }
-      }
     }
-  }
-]
+]

package/package.json

@@ -1,21 +1,48 @@
 {
   "name": "@webviz/well-log-viewer",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.2",
   "description": "",
-  "main": "src/index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "transpile": "tsc --project ./tsconfig.json",
-    "copy-files": "copyfiles package.json dist && copyfiles README.md dist && copyfiles --exclude **/*.{tsx,jsx,js,ts,snap} --up 1 \"src/**/*\" dist/",
-    "build": "npm run transpile && npm run copy-files"
+    "copy-files": "copyfiles --up 1 \"src/**/*.png\" dist/",
+    "build": "git clean -xdff dist && npm run transpile && npm run copy-files"
   },
   "author": "Equinor <opensource@equinor.com>",
   "license": "MPL-2.0",
   "dependencies": {
     "@emerson-eps/color-tables": "^0.4.57",
     "@equinor/videx-wellog": "^0.8.0",
-    "@mui/material": "^5.13.4",
     "@webviz/subsurface-viewer": "*",
     "convert-units": "^2.3.4",
     "d3": "^7.8.2"
+  },
+  "devDependencies": {
+    "@mui/material": "^5.13.7"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5",
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "dependsOn": [
+          {
+            "dependencies": true,
+            "target": "build",
+            "params": "ignore"
+          }
+        ]
+      }
+    }
+  },
+  "volta": {
+    "node": "16.18.1"
   }
 }

package/dist/Intro.stories.mdx

@@ -1,59 +0,0 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs';
-
-import imageWellLogViewer from "./WellLogViewer.png"
-
-<Meta title="WellLogViewer/Overview" />
-
-# WellLogView examples
-
-## Introduction
-These stories contain examples of usage of components for visualization of well log data files.
-There are two main examples: 
-[WellLogViewer](?path=/story/welllogviewer-overview--page#welllogviewer-component) wich contains essential parts of typical well log viewer 
-and [SyncLogViewer](?path=/story/welllogviewer-overview--page#synclogviewer-component) wich contains synchronized views for three different log files.
-
-## WellLogView component
-[WellLogView](?path=/docs/welllogviewer-components-welllogview--default) is a basic react component to wrap [ViDEx well log](https://github.com/equinor/videx-wellog) library for drawing well log data.
-
-The component can zoom and pan visible area of tracks by mouse and support selecting of depth interval.
-
-As input data it accept data files in following formats:
-#### Well Log Data Format
-The JSON Well Log Format is used in WellLogView component for input Well Log data files.
-
-It is a modern well log format created in order to overcome the deficiencies of existing formats.
-It is based on the JavaScript Object Notation open standard (RFC 8259). 
-Full description of the format could be found on the site https://jsonwelllogformat.org .
-
-The file format could be described with a following 
-[JSON schema](https://github.com/equinor/webviz-subsurface-components/blob/master/react/src/lib/inputSchema/WellLog.json)
-
-#### Template Format
-The JSON file describing content of well log view: what tracks should be displayed and what curves it should contains.
-
-The file format could be described with a following 
-[JSON schema](https://github.com/equinor/webviz-subsurface-components/blob/master/react/src/lib/inputSchema/WellLogTemplate.json)
-
-#### Color Table Format
-The JSON file used as a supplement to template file and describe color tables for visualizing different type of log curves.
-
-See also [@emerson-eps/color-tables](https://github.com/emerson-eps/color-tables) component.
-
-
-## WellLogViewer component
-[A demo component](?path=/story/welllogviewer-demo-welllogviewer--default) to deal with WellLogView component.
-It contains WellLogView component surrounded by auxiliary components: 
-readout panel, axis selector and zoom slider.
-
-The number and properties of tracks and curves could be interactively edited by corresponding content menus and dialog boxes.
-
-<img src={imageWellLogViewer} />
-
-_WellLogViewer component architecture._
-
-## SyncLogViewer component
-[An example](?path=/story/welllogviewer-demo-synclogviewer--default) for three linked WellLogView components.
-It demonstrate how different well log views can be synchronized in such complex programs as well correlation applications.
-
-The component architecture is similar to WellLogViewer's one but contains three views for well logs an three readout panels.
-

package/dist/components/styles.scss

@@ -1,106 +0,0 @@
-// These are important to properly display the component
-@import '@equinor/videx-wellog/dist/styles/log-styles.scss';
-//@import '@equinor/videx-wellog/dist/styles/loader-styles.scss';
-@import '@equinor/videx-wellog/dist/styles/scale-styles.scss';
-
-
-//$scale_slave_scale_bg: #ff0000;
-
-.welllogview {
-  // for videx-wellog log-controller
-  height: inherit;
-
-  .track {
-    .track-title {
-      background-color: #ccc;
-      font-weight: normal;
-      color: black;
-      font-family: inherit;
-    }
-  }
-
-  .selected {
-    background-color: rgba(255, 155, 79, 0.1);
-  }
-
-  .slave-scale {
-    background-color: rgba(255, 255, 255, 0.0235); // to make track selection background visible
-  }
-
-  .track-container {
-    pointer-events: all; // to allow mouse events handling
-  }
-
-  .overlay {
-    .depth {
-      //not work?? position : absolute;
-      right: 5px;
-      bottom: 5px;
-      display: inline-block;
-
-      padding: 2px;
-      border-radius: 4px;
-      text-align: right;
-      background-color: rgba(0, 0, 0, 0.5);
-      color: white;
-    }
-
-    .rubber-band {
-      background-color: rgba(255, 0, 0, 0.1);
-
-      div {
-        background-color: rgba(255, 0, 0, 0.7);
-      }
-    }
-
-    .pinned {
-      background-color: rgba(0, 0, 0, 0.1);
-
-      div {
-        background-color: rgba(0, 255, 0, 0.7);
-      }
-    }
-  }
-
-  .title {
-    color: rgb(0, 0, 0);
-    background-color: rgb(241, 241, 241);
-    font-size: 14px;
-    text-align: center;
-  }
-
-  .error {
-    color: rgb(255, 64, 64);
-    background-color: rgb(255, 255, 192)
-  }
-
-  .wellpick {
-    font-size: 9px;
-    .vertical-text {
-      writing-mode: vertical-lr;
-      transform: rotate(180deg);
-    }
-  }
-
-  .wellpick-fill {
-    opacity: 0.3;
-  }
-
-  .wellpick-pattern {
-    opacity: 0.57
-  }
-}
-
-
-// 
-.welllogspacer {
-  .wellpick {
-    opacity: 0.9
-  }
-  .wellpick-fill {
-    opacity: 0.3
-  }
-  .wellpick-pattern {
-    opacity: 0.57
-  }
-}

package/dist/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "@webviz/well-log-viewer",
-  "version": "0.0.0",
-  "description": "",
-  "main": "src/index.ts",
-  "scripts": {
-    "transpile": "tsc --project ./tsconfig.json",
-    "copy-files": "copyfiles package.json dist && copyfiles README.md dist && copyfiles --exclude **/*.{tsx,jsx,js,ts,snap} --up 1 \"src/**/*\" dist/",
-    "build": "npm run transpile && npm run copy-files"
-  },
-  "author": "Equinor <opensource@equinor.com>",
-  "license": "MPL-2.0",
-  "dependencies": {
-    "@emerson-eps/color-tables": "^0.4.57",
-    "@equinor/videx-wellog": "^0.8.0",
-    "@mui/material": "^5.13.4",
-    "@webviz/subsurface-viewer": "*",
-    "convert-units": "^2.3.4",
-    "d3": "^7.8.2"
-  }
-}

package/src/Intro.stories.mdx

@@ -1,59 +0,0 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs';
-
-import imageWellLogViewer from "./WellLogViewer.png"
-
-<Meta title="WellLogViewer/Overview" />
-
-# WellLogView examples
-
-## Introduction
-These stories contain examples of usage of components for visualization of well log data files.
-There are two main examples: 
-[WellLogViewer](?path=/story/welllogviewer-overview--page#welllogviewer-component) wich contains essential parts of typical well log viewer 
-and [SyncLogViewer](?path=/story/welllogviewer-overview--page#synclogviewer-component) wich contains synchronized views for three different log files.
-
-## WellLogView component
-[WellLogView](?path=/docs/welllogviewer-components-welllogview--default) is a basic react component to wrap [ViDEx well log](https://github.com/equinor/videx-wellog) library for drawing well log data.
-
-The component can zoom and pan visible area of tracks by mouse and support selecting of depth interval.
-
-As input data it accept data files in following formats:
-#### Well Log Data Format
-The JSON Well Log Format is used in WellLogView component for input Well Log data files.
-
-It is a modern well log format created in order to overcome the deficiencies of existing formats.
-It is based on the JavaScript Object Notation open standard (RFC 8259). 
-Full description of the format could be found on the site https://jsonwelllogformat.org .
-
-The file format could be described with a following 
-[JSON schema](https://github.com/equinor/webviz-subsurface-components/blob/master/react/src/lib/inputSchema/WellLog.json)
-
-#### Template Format
-The JSON file describing content of well log view: what tracks should be displayed and what curves it should contains.
-
-The file format could be described with a following 
-[JSON schema](https://github.com/equinor/webviz-subsurface-components/blob/master/react/src/lib/inputSchema/WellLogTemplate.json)
-
-#### Color Table Format
-The JSON file used as a supplement to template file and describe color tables for visualizing different type of log curves.
-
-See also [@emerson-eps/color-tables](https://github.com/emerson-eps/color-tables) component.
-
-
-## WellLogViewer component
-[A demo component](?path=/story/welllogviewer-demo-welllogviewer--default) to deal with WellLogView component.
-It contains WellLogView component surrounded by auxiliary components: 
-readout panel, axis selector and zoom slider.
-
-The number and properties of tracks and curves could be interactively edited by corresponding content menus and dialog boxes.
-
-<img src={imageWellLogViewer} />
-
-_WellLogViewer component architecture._
-
-## SyncLogViewer component
-[An example](?path=/story/welllogviewer-demo-synclogviewer--default) for three linked WellLogView components.
-It demonstrate how different well log views can be synchronized in such complex programs as well correlation applications.
-
-The component architecture is similar to WellLogViewer's one but contains three views for well logs an three readout panels.
-