Add documentions (equinor#402)

src/lib/components/GroupTree/components/GroupTreeViewer.tsx

@@ -1,4 +1,5 @@
 import { createStyles, makeStyles } from "@material-ui/core";
+import { cloneDeep } from "lodash";
 import React, { useContext, useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
 import { GroupTreeState } from "../redux/store";
@@ -36,7 +37,11 @@ const GroupTreeViewer: React.FC = () => {
         (state: GroupTreeState) => state.ui.currentFlowRate
     );
     useEffect(() => {
-        renderer.current = new GroupTree("#grouptree_tree", data, "oilrate");
+        renderer.current = new GroupTree(
+            "#grouptree_tree",
+            cloneDeep(data),
+            "oilrate"
+        );
     }, [data]);
 
     useEffect(() => {

src/lib/components/GroupTree/components/Plot/group_tree.js

@@ -1,3 +1,7 @@
+/** This code is copied directly from
+ * https://github.com/anders-kiaer/webviz-subsurface-components/blob/dynamic_tree/src/lib/components/DynamicTree/group_tree.js
+ *  This needs to be refactored to develop further
+ */
 import * as d3 from "d3";
 /* eslint camelcase: "off" */
 /* eslint array-callback-return: "off" */

src/lib/components/WellCompletions/WellCompletions.jsx

@@ -11,7 +11,13 @@ import WellCompletionComponent from "./components/WellCompletionComponent";
 const WellCompletions = (props) => {
     return <WellCompletionComponent id={props.id} data={props.data} />;
 };
-
+/**
+ * Typescript and PropTypes serve different purposes. Typescript validates types at compile time,
+ * whereas PropTypes are checked at runtime.
+ * PropTypes are useful when you test how the components interact with external data, for example
+ * when you load JSON from an API.
+ * This is the only place in this component that propTypes definition is really needed.
+ */
 WellCompletions.propTypes = {
     id: PropTypes.string.isRequired,
     data: PropTypes.object,

src/lib/components/WellCompletions/WellCompletions.stories.jsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { exampleData } from "./test/storybookDataDecorator";
 import WellCompletions from "./WellCompletions";
-
+/**
+ * Storybook test for the whole well completion component
+ */
 export default {
     component: WellCompletions,
     title: "WellCompletions/Demo",
@@ -16,7 +18,7 @@ export default {
 
 const Template = (data) => <WellCompletions data={data.data} id={"test"} />;
 export const WellCompletion = Template.bind({});
-
+//Inject test input data
 WellCompletion.args = {
     data: exampleData,
 };

src/lib/components/WellCompletions/components/DataLoader.tsx

@@ -21,7 +21,9 @@ const defaultData = {
     timeSteps: [],
 };
 export const DataContext = React.createContext<Data>(defaultData);
-
+/**
+ * A data loading layer to ready the input data and redux store
+ */
 const DataProvider: React.FC<Props> = ({
     children,
     id,
@@ -32,6 +34,7 @@ const DataProvider: React.FC<Props> = ({
         data.stratigraphy.forEach((zone) => findSubzones(zone, subzones));
         return subzones.map((zone) => zone.name);
     }, [data.stratigraphy]);
+
     const preloadedState = useMemo(() => {
         //Setup attributes
         const attributeKeys = new Set<string>();

src/lib/components/WellCompletions/components/Settings/FilterButton.stories.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { withReduxDecorator } from "../../test/storybookReduxAddon";
+import FilterButton from "./FilterButton";
+
+export default {
+    component: FilterButton,
+    title: "WellCompletions/Components/Buttons/Filter",
+};
+
+const Template = () => <FilterButton />;
+export const Button = Template.bind({});
+//Wrap with redux store
+Button.decorators = [withReduxDecorator];