pinterest · czgu · Mar 25, 2021 · Mar 24, 2021 · Mar 24, 2021 · Mar 24, 2021
diff --git a/babel.config.js b/babel.config.js
@@ -3,7 +3,15 @@ module.exports = (api) => {
 
     return {
         presets: [
-            '@babel/preset-react',
+            [
+                '@babel/preset-react',
+                {
+                    // uncomment to use why-did-you-render
+                    // runtime: 'automatic',
+                    // development: !isProd,
+                    // importSource: '@welldone-software/why-did-you-render',
+                },
+            ],
             [
                 '@babel/preset-typescript',
                 {

diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
         "@babel/preset-env": "^7.12.11",
         "@babel/preset-react": "^7.12.10",
         "@babel/preset-typescript": "^7.12.7",
+        "@welldone-software/why-did-you-render": "^6.1.1",
         "axios": "0.21.1",
         "bignumber.js": "^9.0.1",
         "chart.js": "^2.9.3",

diff --git a/querybook/webapp/components/App/App.tsx b/querybook/webapp/components/App/App.tsx
@@ -1,3 +1,5 @@
+// import './wdyr';
+
 import { hot } from 'react-hot-loader/root';
 import { setConfig } from 'react-hot-loader';
 import React from 'react';

diff --git a/querybook/webapp/components/App/wdyr.ts b/querybook/webapp/components/App/wdyr.ts
@@ -0,0 +1,14 @@
+/// <reference types="@welldone-software/why-did-you-render" />
+
+import React from 'react';
+
+if (process.env.NODE_ENV === 'development') {
+    const whyDidYouRender = require('@welldone-software/why-did-you-render');
+
+    whyDidYouRender(React, {
+        trackAllPureComponents: true,
+        trackHooks: true,
+        trackExtraHooks: [[require('react-redux/lib'), 'useSelector']],
+        exclude: [],
+    });
+}
diff --git a/querybook/webapp/components/DataDoc/DataDoc.tsx b/querybook/webapp/components/DataDoc/DataDoc.tsx
@@ -82,7 +82,7 @@ interface IState {
     showSearchAndReplace: boolean;
 }
 
-class DataDocComponent extends React.Component<IProps, IState> {
+class DataDocComponent extends React.PureComponent<IProps, IState> {
     public readonly state = {
         errorObj: null,
         focusedCellIndex: null,
@@ -157,7 +157,7 @@ class DataDocComponent extends React.Component<IProps, IState> {
     }
 
     @bind
-    @debounce(200)
+    @debounce(500)
     public updateDocCursor(index: number) {
         const {
             docId,
@@ -408,31 +408,43 @@ class DataDocComponent extends React.Component<IProps, IState> {
         });
     }
 
+    @bind
+    public onQuerycellSelectExecution(cellId: number, executionId: number) {
+        this.setState(
+            ({ cellIdToExecutionId: oldCellIdToExecutionId }) => ({
+                cellIdToExecutionId: {
+                    ...oldCellIdToExecutionId,
+                    [cellId]: executionId,
+                },
+            }),
+            () => {
+                this.updateDocUrl(cellId, executionId);
+            }
+        );
+    }
+
+    @decorate(memoizeOne)
+    public _getCellFocusProps() {
+        return {
+            onUpKeyPressed: (index: number) => this.focusCellAt(index - 1),
+            onDownKeyPressed: (index: number) => this.focusCellAt(index + 1),
+            onFocus: this.onCellFocus,
+            onBlur: this.onCellBlur,
+        };
+    }
+
     @bind
     @decorate(memoizeOne)
     public _getDataDocContextState(
         isEditable: boolean,
         defaultCollapse: boolean,
-        focusedCellIndex: number,
         fullScreenCellIndex: number,
         highlightCellIndex: number,
         cellIdToExecutionId: Record<number, number>
     ): IDataDocContextType {
         return {
             cellIdToExecutionId,
-            onQueryCellSelectExecution: (cellId, executionId) => {
-                this.setState(
-                    ({ cellIdToExecutionId: oldCellIdToExecutionId }) => ({
-                        cellIdToExecutionId: {
-                            ...oldCellIdToExecutionId,
-                            [cellId]: executionId,
-                        },
-                    }),
-                    () => {
-                        this.updateDocUrl(cellId, executionId);
-                    }
-                );
-            },
+            onQueryCellSelectExecution: this.onQuerycellSelectExecution,
 
             insertCellAt: this.insertCellAt,
             updateCell: this.updateCell,
@@ -441,17 +453,10 @@ class DataDocComponent extends React.Component<IProps, IState> {
             fullScreenCellAt: this.fullScreenCellAt,
 
             defaultCollapse,
-            focusedCellIndex,
             highlightCellIndex,
             fullScreenCellIndex,
 
-            cellFocus: {
-                onUpKeyPressed: (index: number) => this.focusCellAt(index - 1),
-                onDownKeyPressed: (index: number) =>
-                    this.focusCellAt(index + 1),
-                onFocus: this.onCellFocus,
-                onBlur: this.onCellBlur,
-            },
+            cellFocus: this._getCellFocusProps(),
             isEditable,
         };
     }
@@ -461,7 +466,6 @@ class DataDocComponent extends React.Component<IProps, IState> {
         return this._getDataDocContextState(
             this.props.isEditable,
             this.state.defaultCollapseAllCells,
-            this.state.focusedCellIndex,
             this.state.fullScreenCellIndex,
             this.state.highlightCellIndex,
             this.state.cellIdToExecutionId
@@ -515,6 +519,7 @@ class DataDocComponent extends React.Component<IProps, IState> {
         queryIndexInDoc: number
     ) {
         const { dataDoc, isEditable } = this.props;
+        const { focusedCellIndex } = this.state;
 
         const insertCellAtBinded = this.insertCellAt;
 
@@ -545,11 +550,14 @@ class DataDocComponent extends React.Component<IProps, IState> {
             return (
                 <DataDocCell
                     key={cell.id}
-                    dataDoc={dataDoc}
+                    docId={dataDoc.id}
+                    numberOfCells={dataDoc.dataDocCells.length}
+                    templatedVariables={dataDoc.meta}
                     cell={cell}
                     index={index}
                     queryIndexInDoc={queryIndexInDoc}
                     lastQueryCellId={lastQueryCellId}
+                    isFocused={focusedCellIndex === index}
                 />
             );
         }
@@ -772,18 +780,17 @@ class DataDocComponent extends React.Component<IProps, IState> {
 
 function mapStateToProps(state: IStoreState, ownProps: IOwnProps) {
     const userInfo = myUserInfoSelector(state);
-    const dataDoc = dataDocSelectors.dataDocSelector(state, ownProps);
+    const dataDoc = dataDocSelectors.dataDocSelector(state, ownProps.docId);
     const dataDocSavePromise =
         state.dataDoc.dataDocSavePromiseById[ownProps.docId];
 
     const isEditable = dataDocSelectors.canCurrentUserEditSelector(
         state,
-        ownProps
+        ownProps.docId
     );
-    const userIds = dataDocSelectors.dataDocViewerIdsSelector(state, ownProps);
-    const cellIdtoUid = dataDocSelectors.dataDocCursorByCellIdSelector(
+    const userIds = dataDocSelectors.dataDocViewerIdsSelector(
         state,
-        ownProps
+        ownProps.docId
     );
 
     return {
@@ -795,7 +802,6 @@ function mapStateToProps(state: IStoreState, ownProps: IOwnProps) {
         isEditable,
         userIds,
         environment: currentEnvironmentSelector(state),
-        cellIdtoUid,
     };
 }
 

diff --git a/querybook/webapp/components/DataDoc/DataDocCellControl.tsx b/querybook/webapp/components/DataDoc/DataDocCellControl.tsx
@@ -1,11 +1,12 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useCallback } from 'react';
 import toast from 'react-hot-toast';
 import { titleize, sleep, copy } from 'lib/utils';
 
 import { IDataCellMeta } from 'const/datadoc';
+import { useBoundFunc } from 'hooks/useBoundFunction';
 import { AsyncButton } from 'ui/AsyncButton/AsyncButton';
-import { Button, SoftButton } from 'ui/Button/Button';
+import { SoftButton } from 'ui/Button/Button';
 import { Dropdown } from 'ui/Dropdown/Dropdown';
 import { ListMenu, IListMenuItem } from 'ui/Menu/ListMenu';
 
@@ -69,6 +70,19 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
         );
     }, [toggleDefaultCollapsed]);
 
+    const handleShare = useCallback(() => {
+        copy(shareUrl);
+        toast('Url Copied!');
+    }, [shareUrl]);
+    const handleCopyCell = useBoundFunc(copyCellAt, index, false);
+    const handleCutCell = useBoundFunc(copyCellAt, index, true);
+    const handlePasteCell = useBoundFunc(pasteCellAt, index);
+    const handleDeleteCell = useBoundFunc(deleteCellAt, index);
+    const handleMoveCellClick = useCallback(
+        () => moveCellAt(index, isHeader ? index - 1 : index + 1),
+        [moveCellAt, index, isHeader]
+    );
+
     const rightButtons: JSX.Element[] = [];
     const centerButtons: JSX.Element[] = [];
 
@@ -79,10 +93,7 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
         if (shareUrl) {
             leftMenuItems.push({
                 name: 'Share',
-                onClick: () => {
-                    copy(shareUrl);
-                    toast('Url Copied!');
-                },
+                onClick: handleShare,
                 tooltip: 'Click to copy',
                 tooltipPos: 'right',
                 icon: 'share',
@@ -93,7 +104,7 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
         if (copyCellAt) {
             leftMenuItems.push({
                 name: 'Copy',
-                onClick: () => copyCellAt(index, false),
+                onClick: handleCopyCell,
                 tooltip: 'Copy cell',
                 tooltipPos: 'right',
                 icon: 'copy',
@@ -103,7 +114,7 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
         if (isEditable && copyCellAt) {
             leftMenuItems.push({
                 name: 'Cut',
-                onClick: () => copyCellAt(index, true),
+                onClick: handleCutCell,
                 tooltip: 'Cut cell',
                 tooltipPos: 'right',
                 icon: 'cut',
@@ -113,7 +124,7 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
         if (isEditable && pasteCellAt) {
             leftMenuItems.push({
                 name: 'Paste',
-                onClick: () => pasteCellAt(index),
+                onClick: handlePasteCell,
                 tooltip: 'Paste cell to above',
                 tooltipPos: 'right',
                 icon: 'paste',
@@ -127,7 +138,7 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
             deleteCellAt && isHeader && numberOfCells > 0 && (
                 <AsyncButton
                     className="block-crud-button"
-                    onClick={deleteCellAt.bind(this, index)}
+                    onClick={handleDeleteCell}
                     icon="x"
                     type="soft"
                     key="delete"
@@ -142,11 +153,7 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
                 moveCellAt && (
                     <AsyncButton
                         className="block-crud-button"
-                        onClick={moveCellAt.bind(
-                            this,
-                            index,
-                            isHeader ? index - 1 : index + 1
-                        )}
+                        onClick={handleMoveCellClick}
                         icon={isHeader ? 'chevrons-up' : 'chevrons-down'}
                         type="soft"
                         key="swap"
@@ -192,23 +199,12 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
             );
         }
 
-        Object.keys(cellTypes).forEach((cellKey) =>
-            centerButtons.push(
-                <AsyncButton
-                    className="block-crud-button"
-                    key={cellKey}
-                    onClick={insertCellAt.bind(
-                        null,
-                        index,
-                        cellKey,
-                        null,
-                        null
-                    )}
-                    icon="plus"
-                    title={titleize(cellKey)}
-                    type="soft"
-                />
-            )
+        centerButtons.push(
+            <InsertCellButtons
+                index={index}
+                key="insert-cell-buttons"
+                insertCellAt={insertCellAt}
+            />
         );
     } else {
         // In case center buttons are empty
@@ -256,3 +252,25 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
         </div>
     );
 };
+
+const InsertCellButtons: React.FC<{
+    insertCellAt: IProps['insertCellAt'];
+    index: number;
+}> = React.memo(({ insertCellAt, index }) => {
+    const handleInsertcell = useCallback(
+        (cellType: string) => insertCellAt(index, cellType, null, null),
+        [insertCellAt, index]
+    );
+
+    const buttonsDOM = Object.keys(cellTypes).map((cellKey) => (
+        <AsyncButton
+            className="block-crud-button"
+            key={cellKey}
+            onClick={() => handleInsertcell(cellKey)}
+            icon="plus"
+            title={titleize(cellKey)}
+            type="soft"
+        />
+    ));
+    return <>{buttonsDOM}</>;
+});