Add comments

Author: chabb

src/lib/components/CameraContext.react.js

@@ -2,6 +2,14 @@ import {CameraContextWrapper} from '@materialsproject/mp-react-components';
 import React from 'react';
 import {Component} from 'react';
 
+
+/**
+ *
+ *  Use this component to synchronize the camera of multiple
+ *  SimpleSceneComponent
+ *
+ *
+ */
 export default class CameraContext extends Component {
     render() {
         if (!!this.props.children) {
@@ -17,6 +25,9 @@ export default class CameraContext extends Component {
 }
 
 CameraContext.propTypes = {
+    /**
+     * The ID used to identify this component in Dash callbacks
+     */
     id: PropTypes.string,
     children: PropTypes.any,
 };

src/lib/components/MatSidebar.react.js

@@ -3,6 +3,12 @@ import {Component} from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
 
+
+/**
+ *
+ *  Material navigation bar
+ *
+ */
 export default class MatSidebar extends Component {
     render() {
         return (

src/lib/components/search/MatMaterialsTable.react.js

@@ -5,6 +5,13 @@ import React from 'react';
 import {MatPrintViewContext} from './MatPrintViewContext.react';
 
 const emptyArray = [];
+
+
+/**
+ *
+ *  Display a table of materials
+ *
+ */
 export default class MatMaterialsTable extends Component {
 
     render() {

src/lib/components/search/MatPrintViewContext.react.js

@@ -5,6 +5,14 @@ import {Component} from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
 
+
+/**
+ *
+ *  Print view context pass a boolean prop that allows children component to know if
+ *  they are in print-view. Those components can react in various ways ( hidding some elements, changing
+ *  their layouts, and so on... )
+ *
+ */
 export default class MatPrintViewContext extends Component {
     render() {
         if (!!this.props.children) {

src/lib/components/search/MatSearchGrid.react.js

@@ -3,6 +3,13 @@ import {MTGrid} from '@materialsproject/mp-react-components';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+
+/**
+ *
+ *  Use this search grid component if you do not use a periodic table
+ *
+ *
+ */
 export default class MatSearchGrid extends Component {
     render() {
         return (
@@ -24,11 +31,4 @@ MatSearchGrid.propTypes = {
      * to Dash, to make them available for callbacks.
      */
     setProps: PropTypes.func,
-    /**
-     * An array of object describing the behavior/content of each card
-     *
-     */
-    /**
-     * The ID used to identify this component in Dash callbacks.
-     */
 };

src/lib/components/search/Search.react.js

@@ -4,8 +4,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 
-// this a search funnel
-
+/**
+ *
+ *  This search grid is using the periodic context provider. This allows the grid
+ *  to be notified of changes happening in the periodic table. Use it if you intend
+ *  to use the periodic table
+ *
+ */
 export default class Search extends Component {
     render() {
         return (

src/lib/components/search/SearchGrid.react.js

@@ -3,8 +3,14 @@ import {Component} from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-// this is the whole search page, wrapped in a component
 
+
+/**
+ *
+ * This is the whole search page, wrapped in a component
+ *
+ *
+ */
 export default class SearchGrid extends Component {
     render() {
         return (