Skip to content

Commit

Permalink
Adjustments to review comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@rubenthoms
rubenthoms committed Dec 6, 2024
1 parent ed5e35c commit 7a1b6de
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 70 deletions.
34 changes: 20 additions & 14 deletions frontend/src/modules/3DViewer/settings/components/wellboreSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,33 +30,29 @@ export function WellboreSelector(props: WellboreSelectorProps): React.ReactNode
});
React.useEffect(() => {
onSelectedWellboreUuidsChange(
props.wellboreHeaders
.filter((header) => selectedWellborePurposes.includes(header.wellborePurpose))
.filter((header) => selectedWellboreStatuses.includes(header.wellboreStatus))
// .filter((header) => props.selectedWellboreUuids.includes(header.wellboreUuid))
.map((header) => header.wellboreUuid)
filterWellboreHeaders(props.wellboreHeaders, selectedWellboreStatuses, selectedWellborePurposes).map(
(header) => header.wellboreUuid
)
);
}, [selectedWellborePurposes, selectedWellboreStatuses, onSelectedWellboreUuidsChange, props.wellboreHeaders]);

function handleSelectAll() {
props.onSelectedWellboreUuidsChange(
props.wellboreHeaders
.filter((header) => selectedWellborePurposes.includes(header.wellborePurpose))
.filter((header) => selectedWellboreStatuses.includes(header.wellboreStatus))
.map((header) => header.wellboreUuid)
filterWellboreHeaders(props.wellboreHeaders, selectedWellboreStatuses, selectedWellborePurposes).map(
(header) => header.wellboreUuid
)
);
}
function handleUnselectAll() {
props.onSelectedWellboreUuidsChange([]);
}
function makeWellHeadersOptions(): SelectOption[] {
return props.wellboreHeaders
.filter((header) => selectedWellboreStatuses.includes(header.wellboreStatus))
.filter((header) => selectedWellborePurposes.includes(header.wellborePurpose))
.map((wellHeader) => ({
return filterWellboreHeaders(props.wellboreHeaders, selectedWellboreStatuses, selectedWellborePurposes).map(
(wellHeader) => ({
label: wellHeader.uniqueWellboreIdentifier,
value: wellHeader.wellboreUuid,
}));
})
);
}

return (
Expand Down Expand Up @@ -134,3 +130,13 @@ function makeWellboreStatusOptions(wellHeaders: WellboreHeader_api[]): SelectOpt
value: status,
}));
}

function filterWellboreHeaders(
wellHeaders: WellboreHeader_api[],
selectedWellboreStatuses: string[],
selectedWellborePurposes: string[]
): WellboreHeader_api[] {
return wellHeaders
.filter((header) => selectedWellboreStatuses.includes(header.wellboreStatus))
.filter((header) => selectedWellborePurposes.includes(header.wellborePurpose));
}
117 changes: 61 additions & 56 deletions frontend/src/modules/_shared/components/ColorLegendsContainer/colorLegendsContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ColorScale, ColorScaleGradientType, ColorScaleType } from "@lib/utils/C
import { resolveClassNames } from "@lib/utils/resolveClassNames";
import { ColorScaleWithName } from "@modules_shared/utils/ColorScaleWithName";

const PREFERENCES = {
const STYLE_CONSTANTS = {
lineWidth: 6,
lineColor: "#555",
textGap: 6,
Expand Down Expand Up @@ -36,7 +36,7 @@ function makeMarkers(
): React.ReactNode[] {
const sectionHeight = Math.abs(sectionBottom - sectionTop);

const minMarkerHeight = PREFERENCES.fontSize + 4 * PREFERENCES.textGap;
const minMarkerHeight = STYLE_CONSTANTS.fontSize + 4 * STYLE_CONSTANTS.textGap;
const maxNumMarkers = Math.floor(sectionHeight / minMarkerHeight);

// Odd number of markers makes sure the midpoint in each section is shown which is preferable
Expand All @@ -57,16 +57,16 @@ function makeMarkers(
key={`${sectionTop}-${i}-marker`}
x1={left}
y1={globalY + 1}
x2={left + PREFERENCES.lineWidth}
x2={left + STYLE_CONSTANTS.lineWidth}
y2={globalY + 1}
stroke={PREFERENCES.lineColor}
stroke={STYLE_CONSTANTS.lineColor}
strokeWidth="1"
/>
);
markers.push(
<text
key={`${sectionTop}-${i}-text`}
x={left + PREFERENCES.lineWidth + PREFERENCES.textGap}
x={left + STYLE_CONSTANTS.lineWidth + STYLE_CONSTANTS.textGap}
y={globalY + 4}
fontSize="10"
style={TEXT_STYLE}
Expand All @@ -81,7 +81,7 @@ function makeMarkers(
}

function makeDiscreteMarkers(colorScale: ColorScale, left: number, top: number, barHeight: number): React.ReactNode[] {
const minMarkerHeight = PREFERENCES.fontSize + 2 * PREFERENCES.textGap;
const minMarkerHeight = STYLE_CONSTANTS.fontSize + 2 * STYLE_CONSTANTS.textGap;

const numSteps = colorScale.getNumSteps();
let markerDistance = barHeight / numSteps;
Expand All @@ -108,16 +108,16 @@ function makeDiscreteMarkers(colorScale: ColorScale, left: number, top: number,
key={`${top}-${i}-marker`}
x1={left}
y1={globalY + 1}
x2={left + PREFERENCES.lineWidth}
x2={left + STYLE_CONSTANTS.lineWidth}
y2={globalY + 1}
stroke={PREFERENCES.lineColor}
stroke={STYLE_CONSTANTS.lineColor}
strokeWidth="1"
/>
);
markers.push(
<text
key={`${top}-${i}-text`}
x={left + PREFERENCES.lineWidth + PREFERENCES.textGap}
x={left + STYLE_CONSTANTS.lineWidth + STYLE_CONSTANTS.textGap}
y={globalY + 4}
fontSize="10"
style={TEXT_STYLE}
Expand All @@ -142,30 +142,30 @@ type ColorLegendProps = {
};

function ColorLegend(props: ColorLegendProps): React.ReactNode {
const barHeight = props.totalHeight - PREFERENCES.offset;
const barHeight = props.totalHeight - STYLE_CONSTANTS.offset;

const barStartPosition = props.left + PREFERENCES.nameLabelWidth + PREFERENCES.textGap;
const barStartPosition = props.left + STYLE_CONSTANTS.nameLabelWidth + STYLE_CONSTANTS.textGap;
const lineMarkerStartPosition = barStartPosition + props.barWidth;
const lineMarkerEndPosition = lineMarkerStartPosition + PREFERENCES.lineWidth;
const textStartPosition = lineMarkerStartPosition + PREFERENCES.lineWidth + PREFERENCES.textGap;
const lineMarkerEndPosition = lineMarkerStartPosition + STYLE_CONSTANTS.lineWidth;
const textStartPosition = lineMarkerStartPosition + STYLE_CONSTANTS.lineWidth + STYLE_CONSTANTS.textGap;

const markers: React.ReactNode[] = [];
markers.push(
<line
key="max-marker"
x1={lineMarkerStartPosition}
y1={props.top + PREFERENCES.offset}
y1={props.top + STYLE_CONSTANTS.offset}
x2={lineMarkerEndPosition}
y2={props.top + PREFERENCES.offset}
stroke={PREFERENCES.lineColor}
y2={props.top + STYLE_CONSTANTS.offset}
stroke={STYLE_CONSTANTS.lineColor}
strokeWidth="1"
/>
);
markers.push(
<text
key="max-text"
x={textStartPosition}
y={props.top + PREFERENCES.offset + 3}
y={props.top + STYLE_CONSTANTS.offset + 3}
fontSize="10"
style={TEXT_STYLE}
>
Expand All @@ -175,7 +175,12 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {

if (props.colorScale.getType() === ColorScaleType.Discrete) {
markers.push(
makeDiscreteMarkers(props.colorScale, lineMarkerStartPosition, props.top + PREFERENCES.offset, barHeight)
makeDiscreteMarkers(
props.colorScale,
lineMarkerStartPosition,
props.top + STYLE_CONSTANTS.offset,
barHeight
)
);
} else {
if (props.colorScale.getGradientType() === ColorScaleGradientType.Diverging) {
Expand All @@ -187,9 +192,9 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
markers.push(
makeMarkers(
props.colorScale,
props.top + PREFERENCES.offset,
props.top + PREFERENCES.offset,
props.top + PREFERENCES.offset + barHeight * relY,
props.top + STYLE_CONSTANTS.offset,
props.top + STYLE_CONSTANTS.offset,
props.top + STYLE_CONSTANTS.offset + barHeight * relY,
lineMarkerStartPosition,
barHeight
)
Expand All @@ -199,10 +204,10 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
<line
key="mid-marker"
x1={lineMarkerStartPosition}
y1={props.top + relY * barHeight + PREFERENCES.offset}
y1={props.top + relY * barHeight + STYLE_CONSTANTS.offset}
x2={lineMarkerEndPosition}
y2={props.top + relY * barHeight + PREFERENCES.offset}
stroke={PREFERENCES.lineColor}
y2={props.top + relY * barHeight + STYLE_CONSTANTS.offset}
stroke={STYLE_CONSTANTS.lineColor}
strokeWidth="2"
/>
);
Expand All @@ -212,12 +217,12 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
x={
props.left +
props.barWidth +
PREFERENCES.lineWidth +
PREFERENCES.textGap +
PREFERENCES.nameLabelWidth +
PREFERENCES.textGap
STYLE_CONSTANTS.lineWidth +
STYLE_CONSTANTS.textGap +
STYLE_CONSTANTS.nameLabelWidth +
STYLE_CONSTANTS.textGap
}
y={props.top + relY * barHeight + PREFERENCES.offset + 3}
y={props.top + relY * barHeight + STYLE_CONSTANTS.offset + 3}
fontSize="10"
style={TEXT_STYLE}
>
Expand All @@ -228,9 +233,9 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
markers.push(
makeMarkers(
props.colorScale,
props.top + PREFERENCES.offset,
props.top + relY * barHeight + PREFERENCES.offset,
props.top + PREFERENCES.offset + barHeight,
props.top + STYLE_CONSTANTS.offset,
props.top + relY * barHeight + STYLE_CONSTANTS.offset,
props.top + STYLE_CONSTANTS.offset + barHeight,
lineMarkerStartPosition,
barHeight
)
Expand All @@ -239,9 +244,9 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
markers.push(
makeMarkers(
props.colorScale,
props.top + PREFERENCES.offset,
props.top + PREFERENCES.offset,
props.top + PREFERENCES.offset + barHeight,
props.top + STYLE_CONSTANTS.offset,
props.top + STYLE_CONSTANTS.offset,
props.top + STYLE_CONSTANTS.offset + barHeight,
lineMarkerStartPosition,
barHeight
)
Expand All @@ -253,18 +258,18 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
<line
key="min-marker"
x1={lineMarkerStartPosition}
y1={props.top + PREFERENCES.offset + barHeight}
y1={props.top + STYLE_CONSTANTS.offset + barHeight}
x2={lineMarkerEndPosition}
y2={props.top + PREFERENCES.offset + barHeight}
stroke={PREFERENCES.lineColor}
y2={props.top + STYLE_CONSTANTS.offset + barHeight}
stroke={STYLE_CONSTANTS.lineColor}
strokeWidth="1"
/>
);
markers.push(
<text
key="min-text"
x={textStartPosition}
y={props.top + PREFERENCES.offset + barHeight + 3}
y={props.top + STYLE_CONSTANTS.offset + barHeight + 3}
fontSize="10"
style={TEXT_STYLE}
>
Expand All @@ -277,15 +282,15 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
<clipPath id={`clip-${props.id}`}>
<rect
x={props.left - props.totalHeight / 2}
y={props.top + PREFERENCES.offset + props.totalHeight / 2}
y={props.top + STYLE_CONSTANTS.offset + props.totalHeight / 2}
width={props.totalHeight}
height={12}
/>
</clipPath>
<rect
key={props.id}
x={barStartPosition}
y={props.top + PREFERENCES.offset}
y={props.top + STYLE_CONSTANTS.offset}
width={props.barWidth}
rx="4"
height={barHeight}
Expand All @@ -294,14 +299,14 @@ function ColorLegend(props: ColorLegendProps): React.ReactNode {
/>
<text
x={props.left + 2}
y={props.top + PREFERENCES.offset + props.totalHeight / 2 + 6}
y={props.top + STYLE_CONSTANTS.offset + props.totalHeight / 2 + 6}
width={props.totalHeight}
height={10}
fontSize="10"
textAnchor="middle"
dominantBaseline="central"
alignmentBaseline="baseline"
transform={`rotate(270, ${props.left}, ${props.top + PREFERENCES.offset + props.totalHeight / 2})`}
transform={`rotate(270, ${props.left}, ${props.top + STYLE_CONSTANTS.offset + props.totalHeight / 2})`}
style={TEXT_STYLE}
clipPath={`url(#clip-${props.id})`}
>
Expand Down Expand Up @@ -329,11 +334,11 @@ export function ColorLegendsContainer(props: ColorLegendsContainerProps): React.
}

const width = Math.max(5, Math.min(10, 120 / props.colorScales.length));
const minHeight = Math.min(60 + 2 * PREFERENCES.offset, props.height);
const minHeight = Math.min(60 + 2 * STYLE_CONSTANTS.offset, props.height);

const numRows = Math.min(Math.floor(props.height / minHeight), props.colorScales.length);
const numCols = Math.ceil(props.colorScales.length / numRows);
const height = Math.max(minHeight, props.height / numRows - (numRows - 1) * PREFERENCES.legendGap);
const height = Math.max(minHeight, props.height / numRows - (numRows - 1) * STYLE_CONSTANTS.legendGap);

function makeLegends(): React.ReactNode[] {
const legends: React.ReactNode[] = [];
Expand All @@ -344,15 +349,15 @@ export function ColorLegendsContainer(props: ColorLegendsContainerProps): React.
break;
}
const { id, colorScale } = props.colorScales[index++];
const top = row * (height + 2 * PREFERENCES.offset) + row * PREFERENCES.legendGap;
const top = row * (height + 2 * STYLE_CONSTANTS.offset) + row * STYLE_CONSTANTS.legendGap;
const left =
col *
(width +
PREFERENCES.legendGap +
PREFERENCES.lineWidth +
PREFERENCES.textGap +
PREFERENCES.textWidth +
PREFERENCES.nameLabelWidth);
STYLE_CONSTANTS.legendGap +
STYLE_CONSTANTS.lineWidth +
STYLE_CONSTANTS.textGap +
STYLE_CONSTANTS.textWidth +
STYLE_CONSTANTS.nameLabelWidth);

legends.push(
<ColorLegend
Expand All @@ -379,14 +384,14 @@ export function ColorLegendsContainer(props: ColorLegendsContainerProps): React.
>
<svg
style={{
height: numRows * (height + 2 * PREFERENCES.offset) + (numRows - 1) * PREFERENCES.legendGap,
height: numRows * (height + 2 * STYLE_CONSTANTS.offset) + (numRows - 1) * STYLE_CONSTANTS.legendGap,
width:
numCols *
(width +
PREFERENCES.legendGap +
PREFERENCES.lineWidth +
PREFERENCES.textGap +
PREFERENCES.textWidth),
STYLE_CONSTANTS.legendGap +
STYLE_CONSTANTS.lineWidth +
STYLE_CONSTANTS.textGap +
STYLE_CONSTANTS.textWidth),
}}
version="1.1"
xmlns="http://www.w3.org/2000/svg"
Expand Down

0 comments on commit 7a1b6de

Please sign in to comment.