+ {/* Indicates what the current page is displaying*/}
{`${startItem} - ${endItem} of ${wellsCount} items`}
diff --git a/src/lib/components/WellCompletions/components/Settings/WellsPerPageSelector.stories.tsx b/src/lib/components/WellCompletions/components/Settings/WellsPerPageSelector.stories.tsx
index a36310685..1032290d4 100644
--- a/src/lib/components/WellCompletions/components/Settings/WellsPerPageSelector.stories.tsx
+++ b/src/lib/components/WellCompletions/components/Settings/WellsPerPageSelector.stories.tsx
@@ -4,9 +4,10 @@ import WellsPerPageSelector from "./WellsPerPageSelector";
export default {
component: WellsPerPageSelector,
- title: "WellCompletions/Components/Settings/WellsPerPage",
+ title: "WellCompletions/Components/Settings/Wells Per Page",
};
const Template = () =>
;
export const Selector = Template.bind({});
+//Wrap with redux store
Selector.decorators = [withReduxDecorator];
diff --git a/src/lib/components/WellCompletions/components/Settings/WellsPerPageSelector.tsx b/src/lib/components/WellCompletions/components/Settings/WellsPerPageSelector.tsx
index 4e564460d..a277414b2 100644
--- a/src/lib/components/WellCompletions/components/Settings/WellsPerPageSelector.tsx
+++ b/src/lib/components/WellCompletions/components/Settings/WellsPerPageSelector.tsx
@@ -14,7 +14,9 @@ const useStyles = makeStyles((theme: Theme) =>
},
})
);
-
+/**
+ * A drop down for selecting how many wells to display per page
+ */
const WellsPerPageSelector: React.FC = React.memo(() => {
const classes = useStyles();
// Redux
@@ -22,11 +24,12 @@ const WellsPerPageSelector: React.FC = React.memo(() => {
const wellsPerPage = useSelector(
(st: WellCompletionsState) => st.ui.wellsPerPage
);
- // handlers
+ // Handlers
const onWellsPerPageChange = useCallback(
(event) => dispatch(updateWellsPerPage(event.target.value)),
[dispatch]
);
+ // Render
return (
;
export const Selector = Template.bind({});
+//Wrap with example intpu data and redux store
Selector.decorators = [exampleDataDecorator, withReduxDecorator];
diff --git a/src/lib/components/WellCompletions/components/Settings/ZoneSelector.tsx b/src/lib/components/WellCompletions/components/Settings/ZoneSelector.tsx
index d61f32c03..1e8a9f1fd 100644
--- a/src/lib/components/WellCompletions/components/Settings/ZoneSelector.tsx
+++ b/src/lib/components/WellCompletions/components/Settings/ZoneSelector.tsx
@@ -8,6 +8,7 @@ import { Zone } from "../../redux/types";
import { findSubzones } from "../../utils/dataUtil";
import { DataContext } from "../DataLoader";
+//Construct a stratigraphy tree as the input of react-dropdown-tree
const extractStratigraphyTree = (stratigraphy: Zone[]): TreeNodeProps => {
const root: TreeNodeProps = {
label: "All",
@@ -32,7 +33,7 @@ const extractStratigraphyTree = (stratigraphy: Zone[]): TreeNodeProps => {
return root;
};
-//DFS
+//Find an array of the selected subzones names from the given selectedNodes
export const findSelectedZones = (
stratigraphy: Zone[],
selectedNodes: TreeNodeProps[]
@@ -61,18 +62,21 @@ const useStyles = makeStyles((theme: Theme) =>
},
})
);
-
+/**
+ * A react component for selecting zones to display in the completions plot
+ */
const ZoneSelector: React.FC = React.memo(() => {
const classes = useStyles();
+ // Use input data directly
const data = useContext(DataContext);
// Redux
const dispatch = useDispatch();
-
+ // Memo
const stratigraphyTree = useMemo(
() => extractStratigraphyTree(data.stratigraphy),
[data.stratigraphy]
);
- // handlers
+ // Handlers
const handleSelectionChange = useCallback(
(_, selectedNodes) =>
dispatch(
@@ -82,6 +86,7 @@ const ZoneSelector: React.FC = React.memo(() => {
),
[dispatch, data.stratigraphy]
);
+ // Render
return (
= React.memo(
({ id, data }: Props) => {
const validate = useMemo(() => ajv.compile(inputSchema), []);
diff --git a/src/lib/components/WellCompletions/components/WellCompletionsViewer.tsx b/src/lib/components/WellCompletions/components/WellCompletionsViewer.tsx
index b8d5f4864..771f7d96c 100644
--- a/src/lib/components/WellCompletions/components/WellCompletionsViewer.tsx
+++ b/src/lib/components/WellCompletions/components/WellCompletionsViewer.tsx
@@ -80,9 +80,12 @@ const useStyles = makeStyles((theme: Theme) =>
const WellCompletionsViewer: React.FC = () => {
const classes = useStyles();
+ // Use input data directly
const data = useContext(DataContext);
+ // Create plot data with the selected time step(s)
const plotData = usePlotData();
+ // Redux
const isDrawerOpen = useSelector(
(state: WellCompletionsState) => state.ui.isDrawerOpen
);
@@ -92,6 +95,7 @@ const WellCompletionsViewer: React.FC = () => {
const currentPage = useSelector(
(state: WellCompletionsState) => state.ui.currentPage
);
+ // Memo
const dataInCurrentPage = useMemo(() => {
return {
...plotData,
@@ -111,8 +115,10 @@ const WellCompletionsViewer: React.FC = () => {
//If no data is available
if (!data) return ;
+ // Render
return (
+ {/* We detect the resize of the element and resize the plot accordingly */}
{({ width }) => (
<>
@@ -142,6 +148,7 @@ const WellCompletionsViewer: React.FC = () => {
/>
+ {/* Drawer on the right-hand side (hidden by default) that shows the filter options */}