chore: imporove dataTable when embed

Kanaries · May 22, 2024 · 5f2e2d7 · 5f2e2d7
1 parent f5e805a
commit 5f2e2d7
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 81 deletions.
diff --git a/packages/graphic-walker/src/Table.tsx b/packages/graphic-walker/src/Table.tsx
@@ -82,8 +82,8 @@ export const TableApp = observer(function VizApp(props: BaseTableProps) {
                     vegaThemeContext={{ vizThemeConfig: vizThemeConfig ?? themeConfig ?? themeKey }}
                     portalContainerContext={portal}
                 >
-                    <div className={`${darkMode === 'dark' ? 'dark' : ''} App font-sans bg-background text-foreground m-0 p-0`}>
-                        <div className="bg-background text-foreground">
+                    <div className={`${darkMode === 'dark' ? 'dark' : ''} App font-sans bg-background text-foreground h-full m-0 p-0`}>
+                        <div className="bg-background text-foreground h-full">
                             <DatasetTable
                                 onMetaChange={vizStore.onMetaChange ? (fid, fIndex, diffMeta) => {
                                     vizStore.updateCurrentDatasetMetas(fid, diffMeta);
@@ -92,6 +92,8 @@ export const TableApp = observer(function VizApp(props: BaseTableProps) {
                                 metas={metas}
                                 computation={wrappedComputation}
                                 displayOffset={props.displayOffset}
+                                hidePaginationAtOnepage={props.hidePaginationAtOnepage}
+                                hideProfiling={props.hideProfiling}
                             />
                         </div>
                         <div ref={setPortal} />

diff --git a/packages/graphic-walker/src/components/dataTable/index.tsx b/packages/graphic-walker/src/components/dataTable/index.tsx
@@ -24,10 +24,15 @@ interface DataTableProps {
     computation: IComputationFunction;
     onMetaChange?: (fid: string, fIndex: number, meta: Partial<IMutField>) => void;
     disableFilter?: boolean;
+    hideProfiling?: boolean;
+    hidePaginationAtOnepage?: boolean;
     displayOffset?: number;
 }
 const Container = styled.div`
     overflow-x: auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     table {
         box-sizing: content-box;
         border-collapse: collapse;
@@ -173,7 +178,7 @@ function FieldValue(props: { field: IMutField; item: IRow; displayOffset?: numbe
 }
 
 const DataTable: React.FC<DataTableProps> = (props) => {
-    const { size = 10, onMetaChange, metas, computation, disableFilter, displayOffset } = props;
+    const { size = 10, onMetaChange, metas, computation, disableFilter, displayOffset, hidePaginationAtOnepage, hideProfiling } = props;
     const [pageIndex, setPageIndex] = useState(0);
     const { t } = useTranslation();
     const computationFunction = computation;
@@ -301,32 +306,33 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                     ))}
                 </div>
             )}
-            <nav className="flex items-center justify-end space-x-2 p-2" aria-label="Pagination">
-                <div className="hidden sm:block flex-1">
-                    <p className="text-sm text-muted-foreground">
-                        Showing <span className="font-medium">{from + 1}</span> to <span className="font-medium">{to + 1}</span> of{' '}
-                        <span className="font-medium">{total}</span> results
-                    </p>
-                </div>
-                <div className="space-x-2">
-                    <Pagination
-                        total={total}
-                        pageSize={size}
-                        pageIndex={pageIndex}
-                        onNext={() => {
-                            setPageIndex(Math.min(Math.ceil(total / size) - 1, pageIndex + 1));
-                        }}
-                        onPrev={() => {
-                            setPageIndex(Math.max(0, pageIndex - 1));
-                        }}
-                        onPageChange={(index) => {
-                            setPageIndex(Math.max(0, Math.min(Math.ceil(total / size) - 1, index)));
-                        }}
-                    />
-                </div>
-            </nav>
-
-            <div className="overflow-y-auto" style={{ maxHeight: '600px' }}>
+            {!(hidePaginationAtOnepage && total <= size) && (
+                <nav className="flex items-center justify-end space-x-2 p-2" aria-label="Pagination">
+                    <div className="hidden sm:block flex-1">
+                        <p className="text-sm text-muted-foreground">
+                            Showing <span className="font-medium">{from + 1}</span> to <span className="font-medium">{to + 1}</span> of{' '}
+                            <span className="font-medium">{total}</span> results
+                        </p>
+                    </div>
+                    <div className="space-x-2">
+                        <Pagination
+                            total={total}
+                            pageSize={size}
+                            pageIndex={pageIndex}
+                            onNext={() => {
+                                setPageIndex(Math.min(Math.ceil(total / size) - 1, pageIndex + 1));
+                            }}
+                            onPrev={() => {
+                                setPageIndex(Math.max(0, pageIndex - 1));
+                            }}
+                            onPageChange={(index) => {
+                                setPageIndex(Math.max(0, Math.min(Math.ceil(total / size) - 1, index)));
+                            }}
+                        />
+                    </div>
+                </nav>
+            )}
+            <div className="overflow-y-auto h-full" style={{ maxHeight: '600px' }}>
                 <div className="h-0 w-full" ref={stickyDector}></div>
                 <table className="min-w-full relative border-x">
                     <thead className={`sticky top-0 bg-background ${isSticky ? 'shadow-md' : ''}`}>
@@ -425,19 +431,21 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                                 ))}
                             </tr>
                         ))}
-                        <tr className="divide-x divide-border border-b">
-                            {metas.map((field) => (
-                                <th key={field.fid} className={getHeaderType(field) + ' whitespace-nowrap py-2 px-3 text-xs text-muted-foreground'}>
-                                    <FieldProfiling
-                                        field={field.fid}
-                                        semanticType={field.semanticType}
-                                        computation={filteredComputation}
-                                        displayOffset={displayOffset}
-                                        offset={field.offset}
-                                    />
-                                </th>
-                            ))}
-                        </tr>
+                        {!props.hideProfiling && (
+                            <tr className="divide-x divide-border border-b">
+                                {metas.map((field) => (
+                                    <th key={field.fid} className={getHeaderType(field) + ' whitespace-nowrap py-2 px-3 text-xs text-muted-foreground'}>
+                                        <FieldProfiling
+                                            field={field.fid}
+                                            semanticType={field.semanticType}
+                                            computation={filteredComputation}
+                                            displayOffset={displayOffset}
+                                            offset={field.offset}
+                                        />
+                                    </th>
+                                ))}
+                            </tr>
+                        )}
                     </thead>
                     <tbody className="divide-y divide-border bg-background font-mono">
                         {rows.map((row, index) => (

diff --git a/packages/graphic-walker/src/index.css b/packages/graphic-walker/src/index.css
@@ -3,6 +3,7 @@ code {
 }
 
 .App {
+    height: 100%;
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
     font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,

diff --git a/packages/graphic-walker/src/interfaces.ts b/packages/graphic-walker/src/interfaces.ts
@@ -977,6 +977,8 @@ export interface ISpecProps {
 
 export interface ITableSpecProps {
     pageSize?: number;
+    hideProfiling?: boolean;
+    hidePaginationAtOnepage?: boolean;
     displayOffset?: number;
     /** @deprecated use vizThemeConfig instead */
     themeKey?: IThemeKey;

diff --git a/packages/graphic-walker/src/renderer/pureRenderer.tsx b/packages/graphic-walker/src/renderer/pureRenderer.tsx
@@ -171,7 +171,7 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps & (LocalPr
                 portalContainerContext={portal}
             >
                 {waiting && <LoadingLayer />}
-                <div className={`relative ${darkMode === 'dark' ? 'dark' : ''}`} style={sizeMode === 'full' ? { width: '100%', height: '100%' } : undefined}>
+                <div className={`App relative ${darkMode === 'dark' ? 'dark' : ''}`} style={sizeMode === 'full' ? { width: '100%', height: '100%' } : undefined}>
                     {isSpatial && (
                         <div className="max-w-full" style={{ height: LEAFLET_DEFAULT_HEIGHT, flexGrow: 1 }}>
                             <LeafletRenderer data={data} draggableFieldState={visualState} visualConfig={visualConfig} visualLayout={visualLayout} />
@@ -190,7 +190,7 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps & (LocalPr
                             vizThemeConfig={vizThemeConfig ?? themeConfig ?? themeKey}
                         />
                     )}
-                    <div className={`App ${darkMode === 'dark' ? 'dark' : ''}`} ref={setPortal} />
+                    <div ref={setPortal} />
                 </div>
             </VizAppContext>
         </ShadowDom>

diff --git a/packages/graphic-walker/src/root.tsx b/packages/graphic-walker/src/root.tsx
@@ -96,7 +96,12 @@ export const TableWalker = observer(
 
         return (
             <AppRoot ref={ref as ForwardedRef<IGWHandlerInsider>}>
-                <ShadowDom onMount={handleMount} onUnmount={handleUnmount} uiTheme={props.uiTheme ?? props.colorConfig}>
+                <ShadowDom
+                    style={{ width: '100%', height: '100%' }}
+                    onMount={handleMount}
+                    onUnmount={handleUnmount}
+                    uiTheme={props.uiTheme ?? props.colorConfig}
+                >
                     <DOMProvider value={{ head: shadowRoot ?? document.head, body: shadowRoot ?? document.body }}>
                         <TableAppWithContext {...props} />
                     </DOMProvider>

diff --git a/packages/playground/src/examples/pages/inModal.stories.tsx b/packages/playground/src/examples/pages/inModal.stories.tsx
@@ -1,47 +1,52 @@
-import { useContext, useEffect, useRef } from 'react';
+import { useContext, useState } from 'react';
 import spec from '../specs/student-chart.json';
-import { GraphicWalker, VizSpecStore, grayTheme } from '@kanaries/graphic-walker';
+import { GraphicWalker, grayTheme, IChart } from '@kanaries/graphic-walker';
 import { themeContext } from '../context';
 import { useFetch, IDataSource } from '../util';
 
 export default function GraphicWalkerInModal() {
-    const ref = useRef<VizSpecStore>(null);
     const { theme } = useContext(themeContext);
     const { dataSource, fields } = useFetch<IDataSource>('https://pub-2422ed4100b443659f588f2382cfc7b1.r2.dev/datasets/ds-students-service.json');
+    const [open, setOpen] = useState(false);
 
-    useEffect(() => {
-        setTimeout(() => {
-            if (ref.current) {
-                ref.current.importCode(spec as never);
-            }
-        }, 0);
-    }, []);
     return (
-        <div
-            className='bg-white dark:bg-gray-950'
-            style={{
-                position: 'fixed',
-                left: 80,
-                right: 80,
-                top: 80,
-                bottom: 80,
-                borderRadius: 20,
-                border: '1px solid gray',
-                overflow: 'hidden',
-                zIndex: 9999,
-            }}
-        >
-            <div
-                style={{
-                    width: '100%',
-                    height: '100%',
-                    overflow: 'auto',
-                    padding: 20,
-                    boxSizing: 'border-box',
-                }}
-            >
-                <GraphicWalker uiTheme={grayTheme} fields={fields} data={dataSource} storeRef={ref} appearance={theme} />
-            </div>
+        <div>
+            <button className="bg-slate-900 text-white px-4 py-2 rounded m-4" onClick={() => setOpen(true)}>
+                Open
+            </button>
+            {open && (
+                <div
+                    onClick={() => setOpen(false)}
+                    style={{
+                        position: 'fixed',
+                        inset: 0,
+                        backdropFilter: 'blur(10px)',
+                        zIndex: 9999,
+                    }}
+                >
+                    <div
+                        className="bg-white dark:bg-gray-950"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }}
+                        style={{
+                            position: 'absolute',
+                            borderRadius: 20,
+                            border: '1px solid gray',
+                            left: 80,
+                            right: 80,
+                            top: 80,
+                            bottom: 80,
+                            overflow: 'auto',
+                            padding: 20,
+                            boxSizing: 'border-box',
+                        }}
+                    >
+                        <GraphicWalker uiTheme={grayTheme} fields={fields} data={dataSource} chart={spec as IChart[]} appearance={theme} />
+                    </div>
+                </div>
+            )}
         </div>
     );
 }
diff --git a/packages/playground/src/examples/pages/renderer.tsx b/packages/playground/src/examples/pages/renderer.tsx
@@ -4,7 +4,7 @@ import Comp from './renderer.stories';
 
 export default function GraphicWalkerComponent() {
     return (
-        <Example name="Filter Walker" code={code}>
+        <Example name="Graphic Renderer" code={code}>
             <Comp />
         </Example>
     );