Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@rubenthoms
rubenthoms committed Jul 16, 2024
1 parent abef634 commit 1e78bf3
Show file tree
Hide file tree
Showing 7 changed files with 497 additions and 88 deletions.
7 changes: 3 additions & 4 deletions frontend/src/modules/InplaceVolumetricsConvergence/view/plotBuilder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { EnsembleSet } from "@framework/EnsembleSet";
import { ColorSet } from "@lib/utils/ColorSet";
import { Figure, makeSubplots } from "@modules/_shared/Figure";
import { InplaceVolumetricsTablesDataAccessor } from "@modules/_shared/InplaceVolumetrics/InplaceVolumetricsDataAccessor";
import { Table } from "@modules/_shared/InplaceVolumetrics/Table";
import { makeDistinguishableEnsembleDisplayName } from "@modules/_shared/ensembleNameUtils";

import { PlotData } from "plotly.js";
Expand All @@ -21,7 +22,7 @@ export type TableData = {

export class InplaceVolumetricsPlotBuilder {
private _dataAccessor: InplaceVolumetricsTablesDataAccessor;
private _plottingFunction: ((data: TableData) => Partial<PlotData>[]) | null = null;
private _plottingFunction: ((table: Table) => Partial<PlotData>[]) | null = null;
private _subplotByInfo: SubplotByInfo = { subplotBy: SubplotBy.TABLE_NAME };
private _colorBy: SubplotByInfo = { subplotBy: SubplotBy.ENSEMBLE };
private _ensembleSet: EnsembleSet;
Expand All @@ -41,7 +42,7 @@ export class InplaceVolumetricsPlotBuilder {
this._colorBy = colorBy;
}

setPlottingFunction(plottingFunction: (data: TableData) => Partial<PlotData>[]) {
setPlottingFunction(plottingFunction: (data: Table) => Partial<PlotData>[]) {
this._plottingFunction = plottingFunction;
}

Expand Down Expand Up @@ -93,8 +94,6 @@ export class InplaceVolumetricsPlotBuilder {
return figure;
}

private makeColor();

private makeSubplotTables(): TablesData[] {
const tablesData: TablesData[] = [];
if (this._subplotByInfo.subplotBy === SubplotBy.ENSEMBLE) {
Expand Down
142 changes: 74 additions & 68 deletions frontend/src/modules/InplaceVolumetricsConvergence/view/view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,13 @@ import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
import { resolveClassNames } from "@lib/utils/resolveClassNames";
import { makeSubplots } from "@modules/_shared/Figure";
import { InplaceVolumetricsTablesDataAccessor } from "@modules/_shared/InplaceVolumetrics/InplaceVolumetricsDataAccessor";
import { PlotBuilder } from "@modules/_shared/InplaceVolumetrics/PlotBuilder";
import { Table } from "@modules/_shared/InplaceVolumetrics/Table";
import {
EnsembleIdentWithRealizations,
useGetAggregatedTableDataQueries,
} from "@modules/_shared/InplaceVolumetrics/queryHooks";
import { makeTableFromApiData } from "@modules/_shared/InplaceVolumetrics/tableUtils";
import { makeDistinguishableEnsembleDisplayName } from "@modules/_shared/ensembleNameUtils";

import { Layout, PlotData } from "plotly.js";
Expand Down Expand Up @@ -52,7 +55,7 @@ export function View(props: ModuleViewProps<Record<string, never>, SettingsToVie
filter.tableNames,
resultName ? [resultName] : [],
filter.fluidZones,
subplotBy?.subplotBy === SubplotBy.IDENTIFIER ? [subplotBy.identifier] : [],
[InplaceVolumetricsIdentifier_api.ZONE], //subplotBy?.subplotBy === SubplotBy.IDENTIFIER ? [subplotBy.identifier] : [],
subplotBy?.subplotBy !== SubplotBy.FLUID_ZONE,
false,
filter.identifiersValues
Expand All @@ -69,28 +72,27 @@ export function View(props: ModuleViewProps<Record<string, never>, SettingsToVie
}
}

const tablesDataAccessor = new InplaceVolumetricsTablesDataAccessor(aggregatedTableDataQueries.tablesData);
let plots: React.ReactNode | null = null;

let title = `Convergence plot of mean/p10/p90`;
if (resultName) {
title += ` for ${resultName}`;
}
if (subplotBy.subplotBy !== SubplotBy.ENSEMBLE && tablesDataAccessor.getTables().length === 1) {
const subTable = tablesDataAccessor.getTables()[0];
title += ` - ${makeDistinguishableEnsembleDisplayName(
subTable.getEnsembleIdent(),
ensembleSet.getEnsembleArr()
)} - ${subTable.getTableName()}`;
}
props.viewContext.setInstanceTitle(title);
if (aggregatedTableDataQueries.tablesData.length > 0) {
const table = makeTableFromApiData(aggregatedTableDataQueries.tablesData);

const plotbuilder = new InplaceVolumetricsPlotBuilder(tablesDataAccessor, ensembleSet, colorSet);
let title = `Convergence plot of mean/p10/p90`;
if (resultName) {
title += ` for ${resultName}`;
}
props.viewContext.setInstanceTitle(title);

plotbuilder.setSubplotBy(subplotBy);
plotbuilder.setPlottingFunction(makePlotData(resultName ?? ""));
const figure = plotbuilder.build(divBoundingRect.height, divBoundingRect.width);
const plotbuilder = new PlotBuilder(table, makePlotData(resultName ?? ""));

const plotComponent = figure?.makePlot();
plotbuilder.setSubplotByColumn("ZONE");
plots = plotbuilder.build(divBoundingRect.height, divBoundingRect.width, {
horizontalSpacing: 0.075,
verticalSpacing: 0.075,
showGrid: true,
margin: { t: 50, b: 20, l: 50, r: 20 },
});
}

/*
const subplots: { title?: string; plotData: Partial<PlotData>[] }[] = [];
Expand Down Expand Up @@ -230,68 +232,72 @@ export function View(props: ModuleViewProps<Record<string, never>, SettingsToVie
<div
className={resolveClassNames(
"absolute top-0 left-0 w-full h-full bg-white bg-opacity-50 backdrop-blur-sm flex items-center justify-center z-10",
{ hidden: plotComponent !== undefined }
{ hidden: plots !== undefined }
)}
>
{makeMessage()}
</div>
{plotComponent}
{plots}
</div>
);
}

function makePlotData(resultName: string): (tableData: TableData[]) => Partial<PlotData>[] {
return (tableData: TableData[]): Partial<PlotData>[] => {
function makePlotData(resultName: string): (table: Table) => Partial<PlotData>[] {
return (table: Table): Partial<PlotData>[] => {
const data: Partial<PlotData>[] = [];

for (const table of tableData) {
const realizationAndResultArray: RealizationAndResult[] = [];
const reals = table.columns["realization"];
const results = table.columns[resultName];
for (let i = 0; i < reals.length; i++) {
realizationAndResultArray.push({
realization: reals[i] as number,
resultValue: results[i] as number,
});
}
const realizationAndResultArray: RealizationAndResult[] = [];
const reals = table.getColumn("REAL");
const results = table.getColumn(resultName);
if (!reals) {
throw new Error("REAL column not found");
}
if (!results) {
throw new Error(`Column not found: ${resultName}`);
}
for (let i = 0; i < reals.getNumRows(); i++) {
realizationAndResultArray.push({
realization: reals.getRowValue(i) as number,
resultValue: results.getRowValue(i) as number,
});
}

const convergenceArr = calcConvergenceArray(realizationAndResultArray);

data.push(
{
x: convergenceArr.map((el) => el.realization),
y: convergenceArr.map((el) => el.mean),
name: "Mean",
type: "scatter",
line: {
color: "black",
width: 1,
},
const convergenceArr = calcConvergenceArray(realizationAndResultArray);

data.push(
{
x: convergenceArr.map((el) => el.realization),
y: convergenceArr.map((el) => el.mean),
name: "Mean",
type: "scatter",
line: {
color: "black",
width: 1,
},
{
x: convergenceArr.map((el) => el.realization),
y: convergenceArr.map((el) => el.p10),
name: "P10",
type: "scatter",
line: {
color: "red",
width: 1,
dash: "dash",
},
},
{
x: convergenceArr.map((el) => el.realization),
y: convergenceArr.map((el) => el.p10),
name: "P10",
type: "scatter",
line: {
color: "red",
width: 1,
dash: "dash",
},
{
x: convergenceArr.map((el) => el.realization),
y: convergenceArr.map((el) => el.p90),
name: "P90",
type: "scatter",
line: {
color: "blue",
width: 1,
dash: "dashdot",
},
}
);
}
},
{
x: convergenceArr.map((el) => el.realization),
y: convergenceArr.map((el) => el.p90),
name: "P90",
type: "scatter",
line: {
color: "blue",
width: 1,
dash: "dashdot",
},
}
);

return data;
};
Expand Down
28 changes: 12 additions & 16 deletions frontend/src/modules/InplaceVolumetricsTable/view/view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,12 @@ import { Table } from "@lib/components/Table";
import { TableHeading, TableRow } from "@lib/components/Table/table";
import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
import { resolveClassNames } from "@lib/utils/resolveClassNames";
import {
Column,
ColumnType,
InplaceVolumetricsTablesDataAccessor,
} from "@modules/_shared/InplaceVolumetrics/InplaceVolumetricsDataAccessor";
import { Column, ColumnType } from "@modules/_shared/InplaceVolumetrics/Table";
import {
EnsembleIdentWithRealizations,
useGetAggregatedTableDataQueries,
} from "@modules/_shared/InplaceVolumetrics/queryHooks";
import { makeTableFromApiData } from "@modules/_shared/InplaceVolumetrics/tableUtils";
import { makeDistinguishableEnsembleDisplayName } from "@modules/_shared/ensembleNameUtils";

import { SettingsToViewInterface } from "../settingsToViewInterface";
Expand Down Expand Up @@ -72,20 +69,19 @@ export function View(props: ModuleViewProps<Record<string, never>, SettingsToVie

const headings: TableHeading = {};

const tablesDataAccessor = new InplaceVolumetricsTablesDataAccessor(aggregatedTableDataQueries.tablesData);
const dataTable = makeTableFromApiData(aggregatedTableDataQueries.tablesData);

for (const column of tablesDataAccessor.getColumnsUnion()) {
headings[column.name] = {
label: column.name,
sizeInPercent: 100 / tablesDataAccessor.getColumnsUnionCount(),
for (const column of dataTable.getColumns()) {
headings[column.getName()] = {
label: column.getName(),
sizeInPercent: 100 / dataTable.getNumColumns(),
formatValue: makeValueFormattingFunc(column, ensembleSet),
formatStyle: makeStyleFormattingFunc(column),
};
}

const tableRows: TableRow<any>[] = [];

for (const row of tablesDataAccessor.getRowsUnion()) {
for (const row of dataTable.getRows()) {
tableRows.push(row);
}

Expand All @@ -105,7 +101,7 @@ export function View(props: ModuleViewProps<Record<string, never>, SettingsToVie
}

function makeStyleFormattingFunc(column: Column): ((value: number | string | null) => React.CSSProperties) | undefined {
if (column.type === ColumnType.FLUID_ZONE) {
if (column.getType() === ColumnType.FLUID_ZONE) {
return (value: number | string | null) => {
const style: React.CSSProperties = { textAlign: "right", fontWeight: "bold" };

Expand All @@ -123,7 +119,7 @@ function makeStyleFormattingFunc(column: Column): ((value: number | string | nul
};
}

if (column.type === ColumnType.ENSEMBLE) {
if (column.getType() === ColumnType.ENSEMBLE) {
return undefined;
}

Expand All @@ -134,10 +130,10 @@ function makeValueFormattingFunc(
column: Column,
ensembleSet: EnsembleSet
): ((value: number | string | null) => string) | undefined {
if (column.type === ColumnType.ENSEMBLE) {
if (column.getType() === ColumnType.ENSEMBLE) {
return (value: number | string | null) => formatEnsembleIdent(value, ensembleSet);
}
if (column.type === ColumnType.RESULT) {
if (column.getType() === ColumnType.RESULT) {
return formatResultValue;
}

Expand Down
Loading

0 comments on commit 1e78bf3

Please sign in to comment.