feat(app): Introduce slider as an option for navigating paginated tables

weave-js/src/components/Panel2/ControlPage.tsx

@@ -1,6 +1,8 @@
 import {Node, opCount} from '@wandb/weave/core';
 import React, {useCallback, useEffect, useMemo} from 'react';
 
+import SliderInput from '../../common/components/elements/SliderInput';
+import clamp from '../../common/util/clamp';
 import * as LLReact from '../../react';
 import * as S from './ControlPage.styles';
 
@@ -9,7 +11,8 @@ const PageControls: React.FC<{
   pageSize: number;
   page: number;
   setPage: (page: number) => void;
-}> = ({rowsNode, pageSize, page, setPage}) => {
+  shouldUseSlider: boolean;
+}> = ({rowsNode, pageSize, page, setPage, shouldUseSlider}) => {
   const countNode = useMemo(() => opCount({arr: rowsNode as any}), [rowsNode]);
 
   const countValue = LLReact.useNodeValue(countNode);
@@ -46,10 +49,29 @@ const PageControls: React.FC<{
       setPage(page + 1);
     }
   }, [page, setPage, onLastPage]);
-  return countValue.loading || countValue.result < 2 ? (
-    <></>
+  const onSliderChange = useCallback(
+    value => setPage(clamp(value - 1, {min: 0, max: totalItems - 1})),
+    [setPage, totalItems]
+  );
+
+  const controls = shouldUseSlider ? (
+    <span
+      style={{
+        flex: '1 1 auto',
+        textAlign: 'center',
+      }}>
+      <SliderInput
+        min={1}
+        max={totalItems}
+        onChange={onSliderChange}
+        step={1}
+        value={page + 1}
+        hasInput={true}
+        debounceTime={100}
+      />
+    </span>
   ) : (
-    <S.ControlBar>
+    <>
       <S.ArrowIcon name="previous" onClick={prevPage} />
       <span
         style={{
@@ -60,7 +82,13 @@ const PageControls: React.FC<{
         {!singleItem && `-${endIndex}`} of {totalItems}{' '}
       </span>
       <S.ArrowIcon name="next" onClick={nextPage} />
-    </S.ControlBar>
+    </>
+  );
+
+  return countValue.loading || countValue.result < 2 ? (
+    <></>
+  ) : (
+    <S.ControlBar>{controls}</S.ControlBar>
   );
 };
 

weave-js/src/components/Panel2/PanelRow.tsx

@@ -32,6 +32,7 @@ export interface PanelRowConfig {
 
   vertical?: boolean;
   filterEmpty?: boolean;
+  shouldUseSlider?: boolean;
   childConfig: any;
 }
 type PanelRowProps = Panel2.PanelConverterProps;
@@ -59,7 +60,13 @@ function defaultConfig(
     pageSize = 1;
   }
 
-  return {pageSize, vertical: false, filterEmpty: true, childConfig: undefined};
+  return {
+    pageSize,
+    vertical: false,
+    filterEmpty: true,
+    shouldUseSlider: false,
+    childConfig: undefined,
+  };
 }
 
 const useConfig = (
@@ -80,7 +87,7 @@ const PanelRowConfigComp: React.FC<PanelRowProps> = props => {
   const {updateConfig} = props;
   const {dashboardConfigOptions} = usePanelContext();
   const config = useConfig(props.input.type, props.child, props.config);
-  const {pageSize, vertical, filterEmpty} = config;
+  const {pageSize, vertical, filterEmpty, shouldUseSlider} = config;
   const childConfig = useMemo(
     () => config.childConfig ?? {},
     [config.childConfig]
@@ -135,6 +142,14 @@ const PanelRowConfigComp: React.FC<PanelRowProps> = props => {
           onChange={(e, {checked}) => updateConfig({filterEmpty: !!checked})}
         />
       </ConfigPanel.ConfigOption>
+      <ConfigPanel.ConfigOption label={'Use Slider'}>
+        <Checkbox
+          checked={shouldUseSlider ?? false}
+          onChange={(e, {checked}) =>
+            updateConfig({shouldUseSlider: !!checked})
+          }
+        />
+      </ConfigPanel.ConfigOption>
       <PanelComp2
         input={newInput}
         inputType={convertedType}
@@ -228,12 +243,13 @@ const PanelRow: React.FC<PanelRowProps> = props => {
         })}
       </div>
       {(rowsNode.type.length == null || rowsNode.type.length > pageSize) && (
-        <div style={{flex: '0 0 auto', maxHeight: '27px'}}>
+        <div style={{flex: '0 0 auto'}}>
           <PageControls
             rowsNode={rowsNode}
             page={pageNum}
             pageSize={pageSize}
             setPage={setPageNum}
+            shouldUseSlider={config.shouldUseSlider ?? false}
           />
         </div>
       )}