ui: Add user guide link for table sampling feature (#1460)

* ui: Add user guide link for table sampling feature

querybook/config/querybook_public_config.yaml

@@ -35,3 +35,4 @@ table_sampling:
     sample_rates:
         - 0.1
     default_sample_rate: 0 # 0 means no sampling
+    sample_user_guide_link: ''

querybook/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 
 import { AICommandBar } from 'components/AIAssistant/AICommandBar';
 import { DataDocQueryExecutions } from 'components/DataDocQueryExecutions/DataDocQueryExecutions';
+import { DataDocTableSamplingInfo } from 'components/DataDocTableSamplingInfo/DataDocTableSamplingInfo';
 import { QueryCellTitle } from 'components/QueryCellTitle/QueryCellTitle';
 import { runQuery, transformQuery } from 'components/QueryComposer/RunQuery';
 import { BoundQueryEditor } from 'components/QueryEditor/BoundQueryEditor';
@@ -45,12 +46,7 @@ import {
 import { DEFAULT_ROW_LIMIT } from 'lib/sql-helper/sql-limiter';
 import { getPossibleTranspilers } from 'lib/templated-query/transpile';
 import { enableResizable } from 'lib/utils';
-import {
-    getShortcutSymbols,
-    KeyMap,
-    matchKeyMap,
-    matchKeyPress,
-} from 'lib/utils/keyboard';
+import { getShortcutSymbols, KeyMap, matchKeyPress } from 'lib/utils/keyboard';
 import { doesLanguageSupportUDF } from 'lib/utils/udf';
 import * as dataDocActions from 'redux/dataDoc/action';
 import * as dataSourcesActions from 'redux/dataSources/action';
@@ -126,6 +122,7 @@ interface IState {
     hasLintError: boolean;
     tableNamesInQuery: string[];
     samplingTables: ISamplingTables;
+    showTableSamplingInfoModal: boolean;
 
     transpilerConfig?: {
         toEngine: IQueryEngine;
@@ -154,6 +151,7 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
             hasLintError: false,
             tableNamesInQuery: [],
             samplingTables: {},
+            showTableSamplingInfoModal: false,
         };
     }
 
@@ -225,7 +223,7 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
     }
 
     public get hasSamplingTables() {
-        return Object.keys(this.samplingTables).length > 0;
+        return Object.keys(this.state.samplingTables).length > 0;
     }
 
     public get sampleRate() {
@@ -686,6 +684,13 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
         }));
     }
 
+    @bind
+    public toggleShowTableSamplingInfoModal() {
+        this.setState(({ showTableSamplingInfoModal }) => ({
+            showTableSamplingInfoModal: !showTableSamplingInfoModal,
+        }));
+    }
+
     @bind
     public fetchDataTableByNameIfNeeded(schema: string, table: string) {
         return this.props.fetchDataTableByNameIfNeeded(
@@ -804,6 +809,9 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
                                     ? this.handleMetaSampleRateChange
                                     : null
                             }
+                            onTableSamplingInfoClick={
+                                this.toggleShowTableSamplingInfoModal
+                            }
                         />
                         {this.getAdditionalDropDownButtonDOM()}
                     </div>
@@ -937,13 +945,24 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
             />
         ) : null;
 
+        const renderTableSamplingInfoDOM = this.state
+            .showTableSamplingInfoModal && (
+            <DataDocTableSamplingInfo
+                query={this.state.query}
+                language={this.queryEngine.language}
+                samplingTables={this.samplingTables}
+                onHide={this.toggleShowTableSamplingInfoModal}
+            />
+        );
+
         return (
             <>
                 {editorDOM}
                 {insertQuerySnippetModalDOM}
                 {templatedQueryViewModalDOM}
                 {UDFModal}
                 {transpilerModal}
+                {renderTableSamplingInfoDOM}
             </>
         );
     }

querybook/webapp/components/DataDocTableSamplingInfo/DataDocTableSamplingInfo.scss

@@ -0,0 +1,5 @@
+.DataDocTableSamplingInfo {
+    .link-text-highlight {
+        color: var(--color-accent-dark);
+    }
+}

querybook/webapp/components/DataDocTableSamplingInfo/DataDocTableSamplingInfo.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { QueryComparison } from 'components/TranspileQueryModal/QueryComparison';
+import PublicConfig from 'config/querybook_public_config.yaml';
+import { ISamplingTables } from 'const/datadoc';
+import { useResource } from 'hooks/useResource';
+import { formatError } from 'lib/utils/error';
+import { QueryTransformResource } from 'resource/queryTransform';
+import { Link } from 'ui/Link/Link';
+import { Loading } from 'ui/Loading/Loading';
+import { ErrorMessage } from 'ui/Message/ErrorMessage';
+import { Modal } from 'ui/Modal/Modal';
+
+import './DataDocTableSamplingInfo.scss';
+
+interface IProps {
+    query: string;
+    language: string;
+    samplingTables: ISamplingTables;
+    onHide: () => void;
+}
+
+export const DataDocTableSamplingInfo: React.FC<IProps> = ({
+    query,
+    language,
+    samplingTables,
+    onHide,
+}) => {
+    const sampleUserGuideLink =
+        PublicConfig.table_sampling?.sample_user_guide_link ?? '';
+
+    const {
+        data: sampledQuery,
+        isLoading,
+        isError,
+        error,
+    } = useResource(
+        React.useCallback(
+            () =>
+                QueryTransformResource.getSampledQuery(
+                    query,
+                    language,
+                    samplingTables
+                ),
+            [language, query, samplingTables]
+        )
+    );
+
+    let contentDOM = null;
+
+    if (isLoading) {
+        contentDOM = <Loading />;
+    } else if (isError) {
+        contentDOM = (
+            <ErrorMessage title={'Failed to sample query.'}>
+                {formatError(error)}
+            </ErrorMessage>
+        );
+    } else {
+        contentDOM = (
+            <Modal onHide={onHide}>
+                <div className="DataDocTableSamplingInfo">
+                    By enabling table sampling, it will use a sample version of
+                    the table or apply table sample to the original table.
+                    {sampleUserGuideLink ? (
+                        <span>
+                            {' '}
+                            Please see more about it{' '}
+                            <Link to={sampleUserGuideLink} newTab>
+                                <span className="link-text-highlight">
+                                    here
+                                </span>
+                            </Link>
+                        </span>
+                    ) : null}
+                </div>
+                <QueryComparison
+                    fromQuery={query}
+                    toQuery={sampledQuery}
+                    fromQueryTitle={'Original Query'}
+                    toQueryTitle={'Transformed Query'}
+                />
+            </Modal>
+        );
+    }
+    return contentDOM;
+};

querybook/webapp/components/QueryComposer/QueryComposer.tsx

@@ -10,6 +10,7 @@ import React, {
 import toast from 'react-hot-toast';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { DataDocTableSamplingInfo } from 'components/DataDocTableSamplingInfo/DataDocTableSamplingInfo';
 import { DataDocTemplateInfoButton } from 'components/DataDocTemplateButton/DataDocTemplateInfoButton';
 import { DataDocTemplateVarForm } from 'components/DataDocTemplateButton/DataDocTemplateVarForm';
 import { detectVariableType } from 'components/DataDocTemplateButton/helpers';
@@ -439,6 +440,9 @@ const QueryComposer: React.FC = () => {
 
     const [hasLintErrors, setHasLintErrors] = useState(false);
 
+    const [showTableSamplingInfoModal, setShowTableSamplingInfoModal] =
+        useState(false);
+
     const runButtonRef = useRef<IQueryRunButtonHandles>(null);
     const clickOnRunButton = useCallback(() => {
         if (runButtonRef.current) {
@@ -500,6 +504,7 @@ const QueryComposer: React.FC = () => {
             element: ElementType.RUN_QUERY_BUTTON,
             aux: {
                 lintError: hasLintErrors,
+                sampleRate,
             },
         });
         // Throttle to prevent double run
@@ -657,6 +662,15 @@ const QueryComposer: React.FC = () => {
         </Modal>
     );
 
+    const renderTableSamplingInfoDOM = showTableSamplingInfoModal && (
+        <DataDocTableSamplingInfo
+            query={getCurrentSelectedQuery()}
+            language={engine.language}
+            samplingTables={samplingTables}
+            onHide={() => setShowRenderedTemplateModal(false)}
+        />
+    );
+
     const queryEditorWrapperClassname = clsx({
         'query-editor-wrapper': true,
         mb16: executionId != null,
@@ -674,6 +688,7 @@ const QueryComposer: React.FC = () => {
             </div>
             {executionDOM()}
             {udfModalDOM}
+            {renderTableSamplingInfoDOM}
         </div>
     );
 
@@ -693,6 +708,9 @@ const QueryComposer: React.FC = () => {
                 hasSamplingTables={Object.keys(samplingTables).length > 0}
                 sampleRate={sampleRate}
                 onSampleRateChange={setSampleRate}
+                onTableSamplingInfoClick={() =>
+                    setShowTableSamplingInfoModal(true)
+                }
             />
         </div>
     );

querybook/webapp/components/QueryRunButton/QueryRunButton.tsx

@@ -18,6 +18,7 @@ import { stopPropagation } from 'lib/utils/noop';
 import { formatNumber } from 'lib/utils/number';
 import { queryEngineStatusByIdEnvSelector } from 'redux/queryEngine/selector';
 import { AsyncButton, IAsyncButtonHandles } from 'ui/AsyncButton/AsyncButton';
+import { IconButton } from 'ui/Button/IconButton';
 import { Dropdown } from 'ui/Dropdown/Dropdown';
 import { Icon } from 'ui/Icon/Icon';
 import { ListMenu } from 'ui/Menu/ListMenu';
@@ -43,6 +44,7 @@ interface IQueryRunButtonProps extends IQueryEngineSelectorProps {
     hasSamplingTables?: boolean;
     sampleRate?: number;
     onSampleRateChange?: (sampleRate: number) => void;
+    onTableSamplingInfoClick?: () => void;
 }
 
 export interface IQueryRunButtonHandles {
@@ -69,6 +71,7 @@ export const QueryRunButton = React.forwardRef<
             hasSamplingTables,
             sampleRate,
             onSampleRateChange,
+            onTableSamplingInfoClick,
         },
         ref
     ) => {
@@ -108,6 +111,7 @@ export const QueryRunButton = React.forwardRef<
                     sampleRate={sampleRate}
                     setSampleRate={onSampleRateChange}
                     tooltipPos={runButtonTooltipPos}
+                    onTableSamplingInfoClick={onTableSamplingInfoClick}
                 />
             ) : null;
 
@@ -285,7 +289,8 @@ const TableSamplingSelector: React.FC<{
     sampleRate: number;
     setSampleRate: (sampleRate: number) => void;
     tooltipPos: TooltipDirection;
-}> = ({ sampleRate, setSampleRate, tooltipPos }) => {
+    onTableSamplingInfoClick: () => void;
+}> = ({ sampleRate, setSampleRate, tooltipPos, onTableSamplingInfoClick }) => {
     React.useEffect(() => {
         if (!sampleRateOptions.some((option) => option.value === sampleRate)) {
             setSampleRate(DEFAULT_SAMPLE_RATE);
@@ -308,15 +313,28 @@ const TableSamplingSelector: React.FC<{
     return (
         <Dropdown
             customButtonRenderer={() => (
-                <div
-                    className="flex-center ph4"
-                    aria-label="Only applies to tables support sampling"
-                    data-balloon-pos={tooltipPos}
-                >
-                    <span className="mr4">
-                        Sample: {selectedSampleRateText}
-                    </span>
-                    <Icon name="ChevronDown" size={24} color="light" />
+                <div className="flex-row">
+                    <div
+                        className="flex-center"
+                        aria-label="Click to see how table sampling works"
+                        data-balloon-pos={tooltipPos}
+                    >
+                        <IconButton
+                            icon="Info"
+                            size={20}
+                            onClick={onTableSamplingInfoClick}
+                        />
+                    </div>
+                    <div
+                        className="flex-center"
+                        aria-label="Only applies to tables support sampling"
+                        data-balloon-pos={tooltipPos}
+                    >
+                        <span className="mr4">
+                            Sample: {selectedSampleRateText}
+                        </span>
+                        <Icon name="ChevronDown" size={24} color="light" />
+                    </div>
                 </div>
             )}
             layout={['bottom', 'right']}

querybook/webapp/config.d.ts

@@ -121,6 +121,7 @@ declare module 'config/querybook_public_config.yaml' {
             enabled: boolean;
             sample_rates: Array<number>;
             default_sample_rate: number;
+            sample_user_guide_link: string;
         };
     };
     export default data;