diff --git a/typescript/packages/well-log-viewer/src/SyncLogViewer.tsx b/typescript/packages/well-log-viewer/src/SyncLogViewer.tsx index 2179db5a84..679ddb1dcb 100644 --- a/typescript/packages/well-log-viewer/src/SyncLogViewer.tsx +++ b/typescript/packages/well-log-viewer/src/SyncLogViewer.tsx @@ -985,18 +985,7 @@ class SyncLogViewer extends Component { createRightPanel(): ReactNode { return ( -
+
{ infos={this.state.infos[index]} /> ))} -
- Zoom: - +
+ Zoom: + diff --git a/typescript/packages/well-log-viewer/src/WellLogViewer.tsx b/typescript/packages/well-log-viewer/src/WellLogViewer.tsx index 5333353089..2dc24e0d1c 100644 --- a/typescript/packages/well-log-viewer/src/WellLogViewer.tsx +++ b/typescript/packages/well-log-viewer/src/WellLogViewer.tsx @@ -1,3 +1,4 @@ +import type { ReactNode } from "react"; import React, { Component } from "react"; import PropTypes from "prop-types"; @@ -245,6 +246,36 @@ export default class WellLogViewer extends Component< this.updateReadoutPanel(); } + createRightPanel(): ReactNode { + return ( +
+ + +
+
+ Zoom: + + + +
+
+ ); + } + render(): JSX.Element { return (
@@ -267,46 +298,7 @@ export default class WellLogViewer extends Component< onContentSelection={this.onContentSelection} onTemplateChanged={this.onTemplateChanged} /> -
- - -
-
- Zoom: - - - -
-
+ {this.createRightPanel()}
); } diff --git a/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-synclogviewer--discrete-logs.png b/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-synclogviewer--discrete-logs.png index 9733de063a..b58ada3561 100644 Binary files a/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-synclogviewer--discrete-logs.png and b/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-synclogviewer--discrete-logs.png differ diff --git a/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--default.png b/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--default.png index e1fc385769..e5e6dd5bf9 100644 Binary files a/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--default.png and b/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--default.png differ diff --git a/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--discrete.png b/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--discrete.png index e5b32a55c4..603d29700b 100644 Binary files a/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--discrete.png and b/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--discrete.png differ diff --git a/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--horizontal.png b/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--horizontal.png index df6d983322..3aab1c11dc 100644 Binary files a/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--horizontal.png and b/typescript/packages/well-log-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--horizontal.png differ diff --git a/typescript/packages/well-log-viewer/src/__snapshots__/SyncLogViewer.test.tsx.snap b/typescript/packages/well-log-viewer/src/__snapshots__/SyncLogViewer.test.tsx.snap index ce9b158b0e..e19c9bba1a 100644 --- a/typescript/packages/well-log-viewer/src/__snapshots__/SyncLogViewer.test.tsx.snap +++ b/typescript/packages/well-log-viewer/src/__snapshots__/SyncLogViewer.test.tsx.snap @@ -18,13 +18,13 @@ exports[`Sync Log Viewer snapshot test 1`] = ` >
-
+
Primary scale @@ -300,61 +302,55 @@ exports[`Sync Log Viewer snapshot test 1`] = `
Readout 15/9-19A - +
+ class="row-name" + title="DEPT" + /> + title=" " + /> + class="row-units" + title="M" + /> + class="row-name" + title="DVER" + /> + title=" " + /> + class="row-units" + title="M" + /> + class="row-name" + title="MDIA" + /> + title=" " + /> + class="row-units" + title="KG/L" + /> + class="row-name" + title="HKLA" + /> + title=" " + /> + class="row-units" + title="T" + /> + class="row-name" + title="HKLA" + /> + title=" " + /> + class="row-units" + title="T" + /> + class="row-name" + title="HKLX" + /> + title=" " + /> + class="row-units" + title="T" + /> + class="row-name" + title="HKLA" + /> + title=" " + /> + class="row-units" + title="T" + />
⬤ - DEPT - -   - - M -
⬤ - DVER - -   - - M -
⬤ - MDIA - -   - - KG/L -
⬤ - HKLA - -   - - T -
⬤ - HKLA - -   - - T -
⬤ - HKLX - -   - - T -
⬤ - HKLA - -   - - T -
- + Zoom:
-
+
Primary scale @@ -296,61 +298,55 @@ exports[`Test Well Log Viewer Component snapshot test 1`] = `
Readout - +
+ class="row-name" + title="DEPT" + /> + title=" " + /> + class="row-units" + title="M" + /> + class="row-name" + title="DVER" + /> + title=" " + /> + class="row-units" + title="M" + /> - + class="row-name" + title="MDIA" + /> + title=" " + /> + class="row-units" + title="KG/L" + /> + class="row-name" + title="HKLA" + /> + title=" " + /> + class="row-units" + title="T" + /> - + class="row-name" + title="HKLA" + /> + title=" " + /> + class="row-units" + title="T" + /> - + class="row-name" + title="HKLX" + /> + title=" " + /> + class="row-units" + title="T" + /> + class="row-name" + title="HKLA" + /> + title=" " + /> + class="row-units" + title="T" + />
⬤ - DEPT - -   - - M -
⬤ - DVER - -   - - M -
+ ▼ Multiple
⬤ - MDIA - -   - - KG/L -
⬤ - HKLA - -   - - T -
+ ▼ Area
⬤ - HKLA - -   - - T -
+ ▼ Differential
⬤ - HKLX - -   - - T -
⬤ - HKLA - -   - - T -
@@ -526,13 +506,15 @@ exports[`Test Well Log Viewer Component snapshot test 1`] = `

- + Zoom: { createItem(label: string, value: string): ReactNode { return (
- {/* Set key prop just for react pleasure. See https://reactjs.org/link/warning-keys for more information */} { render(): JSX.Element { if (!this.props.axes || this.props.axes.length < 1) return <>; // nothing to render return ( -
+
{this.props.header} {this.props.axes.map((axis) => { diff --git a/typescript/packages/well-log-viewer/src/components/InfoPanel.tsx b/typescript/packages/well-log-viewer/src/components/InfoPanel.tsx index 4502cb6b43..dde49c1554 100644 --- a/typescript/packages/well-log-viewer/src/components/InfoPanel.tsx +++ b/typescript/packages/well-log-viewer/src/components/InfoPanel.tsx @@ -1,6 +1,8 @@ import type { ReactNode } from "react"; import React, { Component } from "react"; +import "./rightPanel.scss"; + import type { Info } from "./InfoTypes"; interface Props { @@ -9,9 +11,9 @@ interface Props { onGroupClick?: (trackId: string | number) => void; } -function createSeparator() { +function createSeparator(info: Info) { return ( - + {/* Set key prop just for react pleasure. See https://reactjs.org/link/warning-keys for more information */} {" "} @@ -21,11 +23,6 @@ function createSeparator() { ); } -const styleGroupRow = { - backgroundColor: "#ededed", - cursor: "pointer", -}; - function formatValue(value: number): string { if (!Number.isFinite(value)) return ""; if (Number.isInteger(value)) return value.toFixed(0); @@ -59,89 +56,83 @@ class InfoPanel extends Component { this.props.onGroupClick(trackId); } + createGroupRow(info: Info): ReactNode { + return ( + + + { + info.collapsed + ? "\u25BA" + : "\u25BC" /*right/down-pointing triangle*/ + } + + + {info.name} + + + ); + } + createRow(info: Info): ReactNode { + const autoDescreaseFontSize = false; if (info.type === "separator") // special case - return createSeparator(); + return createSeparator(info); - if (info.groupStart !== undefined) { - return ( - - - { - info.collapsed - ? "\u25BA" - : "\u25BC" /*right/down-pointing triangle*/ - } - - - {info.name} - - - ); - } + if (info.groupStart !== undefined) return this.createGroupRow(info); - const typeStyle: React.CSSProperties = { - color: info.color, - fontSize: "small", - }; - let name = info.name ? info.name : "?"; - if (name.length > 16) - // compress too long names - name = name.substring(0, 14) + ellipsis; + let name = info.name || "?"; + const tooltip = name; // print long names and values with a smaller font size - const nameStyle: React.CSSProperties = { whiteSpace: "nowrap" }; - if (name.length > 10) nameStyle.fontSize = "x-small"; + const styleInfoName: React.CSSProperties = {}; + let maxLen = 11; + if (autoDescreaseFontSize && name.length > 10) { + styleInfoName.fontSize = "x-small"; + maxLen = 16; + } + if (name.length > maxLen) { + // compress too long names + name = name.substring(0, maxLen - 2) + ellipsis; + } + let value = formatValue(info.value); if (info.discrete) value = info.discrete + (value ? nbsp + "(" + value + ")" : ""); - if (value === "") value = nbsp; // set some text to force the empty line to have the same height as non-empty line - const valueStyle: React.CSSProperties = { - width: "90px", - paddingLeft: "1.5em", - textAlign: "right", - whiteSpace: "nowrap", - }; - if (value.length > 10) valueStyle.fontSize = "x-small"; + if (value === "") value = nbsp; // set some text to force an empty line to have the same height as non-empty line + const styleInfoValue: React.CSSProperties = {}; + if (autoDescreaseFontSize && value.length > 10) + styleInfoValue.fontSize = "x-small"; + /// style={styleInfoName} title={tooltip!==name? tooltip: undefined}>{name} return ( - - {bigCircle} - {name} - - {value} + + + {bigCircle} - {!info.discrete ? ( - {info.units} - ) : null} + + + {!info.discrete && ( + + )} ); } render(): JSX.Element { return ( -
+
{this.props.header} - +
{this.props.infos?.map(this.createRow.bind(this))} diff --git a/typescript/packages/well-log-viewer/src/components/InfoTypes.ts b/typescript/packages/well-log-viewer/src/components/InfoTypes.ts index d73fb6ffc0..f6d45501d7 100644 --- a/typescript/packages/well-log-viewer/src/components/InfoTypes.ts +++ b/typescript/packages/well-log-viewer/src/components/InfoTypes.ts @@ -4,7 +4,7 @@ export interface Info { color: string; value: number; discrete?: string /*string for discrete*/; - type: string; // "seperator"; "line", "linestep", "area", "dot", ... + type: string; // "separator"; "line", "linestep", "area", "dot", ... trackId: number | string; groupStart?: string; // for category diff --git a/typescript/packages/well-log-viewer/src/components/WellLogSpacer.tsx b/typescript/packages/well-log-viewer/src/components/WellLogSpacer.tsx index b8a3b83b55..e70ddca439 100644 --- a/typescript/packages/well-log-viewer/src/components/WellLogSpacer.tsx +++ b/typescript/packages/well-log-viewer/src/components/WellLogSpacer.tsx @@ -1,8 +1,6 @@ import type { ReactNode } from "react"; import React, { Component } from "react"; -import "./styles.scss"; - import type { WellLogController, WellPickProps } from "./WellLogView"; import { getWellPicks } from "./WellLogView"; import type WellLogView from "./WellLogView"; @@ -364,25 +362,17 @@ class WellLogSpacer extends Component { return (
(this.container = el as HTMLElement)} >
{ {!controller?.props.options?.hideTrackLegend && distance !== undefined && distance.value !== undefined ? ( -
+
{"←" + distance.value.toFixed(0) + distance.units + diff --git a/typescript/packages/well-log-viewer/src/components/WellLogView.tsx b/typescript/packages/well-log-viewer/src/components/WellLogView.tsx index 4353e1cd3e..dbc3960fc5 100644 --- a/typescript/packages/well-log-viewer/src/components/WellLogView.tsx +++ b/typescript/packages/well-log-viewer/src/components/WellLogView.tsx @@ -1924,45 +1924,25 @@ class WellLogView const viewTitle = this.props.viewTitle; return (
{viewTitle && (
{this.createViewTitle(viewTitle)}
)} -
+
(this.container = el as HTMLElement)} /> {this.state.errorText && ( -
- {this.state.errorText} -
+
{this.state.errorText}
)}
diff --git a/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogview--default.png b/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogview--default.png index fcc70a3831..10023fcc6f 100644 Binary files a/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogview--default.png and b/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogview--default.png differ diff --git a/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogview--discrete.png b/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogview--discrete.png index 376dd01dda..513df4a69d 100644 Binary files a/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogview--discrete.png and b/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogview--discrete.png differ diff --git a/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogviewwithscroller--default.png b/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogviewwithscroller--default.png index ab3461207c..dd589e1570 100644 Binary files a/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogviewwithscroller--default.png and b/typescript/packages/well-log-viewer/src/components/__image_snapshots__/welllogviewer-components-welllogviewwithscroller--default.png differ diff --git a/typescript/packages/well-log-viewer/src/components/__snapshots__/AxisSelector.test.tsx.snap b/typescript/packages/well-log-viewer/src/components/__snapshots__/AxisSelector.test.tsx.snap index f38e20d697..a2a20bff6f 100644 --- a/typescript/packages/well-log-viewer/src/components/__snapshots__/AxisSelector.test.tsx.snap +++ b/typescript/packages/well-log-viewer/src/components/__snapshots__/AxisSelector.test.tsx.snap @@ -1,7 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Test Axis Selector snapshot test 1`] = ` -
+
Primary scale diff --git a/typescript/packages/well-log-viewer/src/components/__snapshots__/InfoPanel.test.tsx.snap b/typescript/packages/well-log-viewer/src/components/__snapshots__/InfoPanel.test.tsx.snap index c4932aee82..ac86bd7c45 100644 --- a/typescript/packages/well-log-viewer/src/components/__snapshots__/InfoPanel.test.tsx.snap +++ b/typescript/packages/well-log-viewer/src/components/__snapshots__/InfoPanel.test.tsx.snap @@ -2,38 +2,34 @@ exports[`Test Info panel snapshot test 1`] = `
Readout -
+
+ class="row-name" + title="DVER" + /> + title="2366" + /> + class="row-units" + title="M" + /> + class="row-name" + title="BDIA" + /> + title="8.5" + /> + class="row-units" + title="INCH" + />
⬤ - DVER - - 2366 - - M -
⬤ - BDIA - - 8.5 - - INCH -
@@ -74,38 +68,34 @@ exports[`Test Info panel snapshot test 1`] = ` exports[`Test Info panel snapshot test when value is infinity 1`] = `
Readout - +
+ class="row-name" + title="DVER" + /> + title=" " + /> + class="row-units" + title="M" + />
⬤ - DVER - -   - - M -
diff --git a/typescript/packages/well-log-viewer/src/components/__snapshots__/WellLogView.test.tsx.snap b/typescript/packages/well-log-viewer/src/components/__snapshots__/WellLogView.test.tsx.snap index 43bed15f73..8ae7bae5b5 100644 --- a/typescript/packages/well-log-viewer/src/components/__snapshots__/WellLogView.test.tsx.snap +++ b/typescript/packages/well-log-viewer/src/components/__snapshots__/WellLogView.test.tsx.snap @@ -3,13 +3,13 @@ exports[`Test Well Log View Component snapshot test 1`] = `
value.name === id); + if (colorTable) return colorTable; console.error( "colorTable id='" + id + "' is not found in getColorTable()" );