Skip to content

Commit

Permalink
feat: color function (equinor#2054) (equinor#2152)
Browse files Browse the repository at this point in the history
Added the ability to specify a function instead of color tables

---------

Co-authored-by: DShamakin <[email protected]>
  • Loading branch information
Denis-Shamakin and DShamakin authored Jul 12, 2024
1 parent 807fff4 commit 36b85bb
Show file tree
Hide file tree
Showing 7 changed files with 65 additions and 20 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -268,13 +268,23 @@ function addTemplateTrack(
return templateNew;
}

// Custom function to demonstrate the ability to specify a function instead of color tables
function colorTableFunc(v: number): [number, number, number] {
if (v >= 0 && v < 0.25) return [255, 0.0, 0.0];
else if (v >= 0.25 && v < 0.5) return [182, 182, 0.0];
else if (v >= 0.5 && v < 0.75) return [0.0, 255, 0.0];
else if (v >= 0.75 && v < 1) return [0.0, 182, 182];
else if (v == 1) return [0.0, 0.0, 255];
else return [0, 0, 0];
}

export const Default: StoryObj<typeof StoryTemplate> = {
args: {
id: "Well-Log-Viewer",
horizontal: false,
welllog: require("../../../../example-data/L898MUD.json")[0], // eslint-disable-line
template: require("../../../../example-data/welllog_template_1.json"), // eslint-disable-line
colorTables: colorTables,
colorTables: colorTableFunc,
wellpick: wellpick,
axisTitles: axisTitles,
axisMnemos: axisMnemos,
Expand Down
2 changes: 1 addition & 1 deletion typescript/packages/well-log-viewer/src/WellLogViewer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ WellLogViewer.propTypes = {
/**
* Prop containing color table data
*/
colorTables: PropTypes.array, //.isRequired,
colorTables: PropTypes.any, //.isRequired,

/**
* Orientation of the track plots on the screen. Default is false
Expand Down
15 changes: 12 additions & 3 deletions typescript/packages/well-log-viewer/src/components/PlotDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,12 @@ export function createBooleanItems(): ReactNode[] {

function createColorTableItems(colorTables: ColorTable[]): ReactNode[] {
const nodes: ReactNode[] = [];

if (typeof colorTables === "function") {
nodes.push(<option key="Function"> Function </option>);
return nodes;
}

if (!colorTables) {
console.error(
"colorTables is missed or empty in createColorTableItems()"
Expand Down Expand Up @@ -217,7 +223,10 @@ export class PlotPropertiesDialog extends Component<Props, State> {

// for 'gradientfill' plot
colorTable:
this.props.wellLogView.props.colorTables?.[0]?.name,
typeof this.props.wellLogView.props.colorTables ===
"function"
? "Function"
: this.props.wellLogView.props.colorTables?.[0]?.name,
inverseColorTable: undefined,
colorScale: undefined,
inverseColorScale: undefined,
Expand Down Expand Up @@ -335,7 +344,7 @@ export class PlotPropertiesDialog extends Component<Props, State> {
];
} else if (type === "gradientfill") {
const colorTables = this.props.wellLogView.props.colorTables;
[
return [
this.createSelectControl(
"colorTable",
"Fill Color table",
Expand Down Expand Up @@ -388,7 +397,7 @@ export class PlotPropertiesDialog extends Component<Props, State> {
createScaleItems()
),
]
: []}
: [<FormControl fullWidth key="12" />]}

{this.createSelectControl(
"name",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -838,10 +838,14 @@ function fillPlotTemplate(
inverseColor: options.inverseColor || "",
fill: (options1 ? options1.fill : options.fill) || "",
fill2: options2 ? options2.fill : "",
colorTable: options.colorTable ? options.colorTable.name : "",
inverseColorTable: options.inverseColorTable
? options.inverseColorTable.name
: "",
colorTable:
typeof options.colorTable === "function"
? "Function"
: options.colorTable?.name ?? "",
inverseColorTable:
typeof options.inverseColorTable === "function"
? "Function"
: options.inverseColorTable?.name ?? "",
colorScale: options.colorScale,
inverseColorScale: options.inverseColorScale,
};
Expand Down Expand Up @@ -2098,7 +2102,7 @@ export function _propTypesWellLogView(): Record<string, unknown> {
/**
* Prop containing color table data for discrete well logs
*/
colorTables: PropTypes.array, //.isRequired,
colorTables: PropTypes.any, //.isRequired,

/**
* Well picks data
Expand Down
12 changes: 10 additions & 2 deletions typescript/packages/well-log-viewer/src/utils/color-table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,15 @@ export function getExactColor(
get HTML string with interpolated color value in #xxxxxx format
*/
export function getInterpolatedColor(
colorTable: ColorTable,
colorTable: ColorTable | ((v: number) => [number, number, number]),
v: number
): [number, number, number] {
// TODO: Do not compute these 3 constants (cNaN, cBelow, cAbove) every time!

if (typeof colorTable === "function") {
return colorTable(v);
}

const cNaN: [number, number, number] = colorTable.colorNaN
? colorTable.colorNaN
: [255, 255, 255]; // "white"
Expand Down Expand Up @@ -115,9 +119,13 @@ export function getInterpolatedColor(
get HTML string with interpolated color value in #xxxxxx format
*/
export function getInterpolatedColorString(
colorTable: ColorTable,
colorTable: ColorTable | ((v: number) => [number, number, number]),
v: number
): string {
if (typeof colorTable === "function") {
return colorToString(colorTable(v), "#ffffff");
}

// TODO: Do not compute these 3 constants (cNaN, cBelow, cAbove) every time!
const cNaN = colorToString(colorTable.colorNaN, "#ffffff"); // "white"

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ function createGradient(
.attr("x2", "100%") //since it's a horizontal linear gradient
.attr("y1", "0%")
.attr("y2", "0%");
const colors = colorTable.colors;
if (rLogarithmic !== undefined) {
const yDelta = Math.log(rLogarithmic); // log(max/min)
const d = rLogarithmic - 1;
Expand All @@ -44,12 +43,24 @@ function createGradient(
.style("stop-color", c);
}
} else {
for (let i = 0; i < colors.length; i++) {
const color = colors[i];
const c = color4ToString(color);
lg.append("stop")
.attr("offset", color[0] * 100.0 + "%")
.style("stop-color", c);
if (typeof colorTable === "function") {
const nIntervals = 5;
for (let i = 0; i < nIntervals; i++) {
const fraction = i / nIntervals;
const c = getInterpolatedColorString(colorTable, fraction);
lg.append("stop")
.attr("offset", fraction * 100.0 + "%")
.style("stop-color", c);
}
} else {
const colors = colorTable.colors;
for (let i = 0; i < colors.length; i++) {
const color = colors[i];
const c = color4ToString(color);
lg.append("stop")
.attr("offset", color[0] * 100.0 + "%")
.style("stop-color", c);
}
}
}
return id;
Expand Down
5 changes: 4 additions & 1 deletion typescript/packages/well-log-viewer/src/utils/tracks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,10 @@ function getColorTable(
return defColorTable;
}
if (id && colorTables) {
const colorTable = colorTables.find((value) => value.name === id);
const colorTable =
typeof colorTables === "function"
? colorTables
: colorTables.find((value) => value.name === id);
if (colorTable) return colorTable;
console.error(
"colorTable id='" + id + "' is not found in getColorTable()"
Expand Down

0 comments on commit 36b85bb

Please sign in to comment.