fix pr

pinterest · Dec 19, 2023 · a6cb52e · a6cb52e
1 parent 0dc4dcc
commit a6cb52e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 deletions.
diff --git a/querybook/server/datasources/metastore.py b/querybook/server/datasources/metastore.py
@@ -267,7 +267,7 @@ def get_columns_from_table(table_id):
 def get_detailed_columns_from_table(table_id):
     with DBSession() as session:
         verify_data_table_permission(table_id, session=session)
-        return logic.get_detailed_columns_by_table_id(table_id, session=session)
+        return logic.get_detailed_columns_dict_by_table_id(table_id, session=session)
 
 
 @register("/table/<int:table_id>/raw_samples_query/", methods=["GET"])

diff --git a/querybook/server/logic/metastore.py b/querybook/server/logic/metastore.py
@@ -521,7 +521,7 @@ def get_detailed_column_dict(column: DataTableColumn, with_table=False, session=
 
 
 @with_session
-def get_detailed_columns_by_table_id(table_id, session=None):
+def get_detailed_columns_dict_by_table_id(table_id, session=None):
     data_table_columns = (
         session.query(DataTableColumn)
         .filter(DataTableColumn.table_id == table_id)

diff --git a/querybook/webapp/components/DataTableStats/DataTableColumnStats.tsx b/querybook/webapp/components/DataTableStats/DataTableColumnStats.tsx
@@ -17,7 +17,7 @@ export const DataTableColumnStats: React.FunctionComponent<IProps> = ({
             ? stat.value.join(', ')
             : stat.value;
         return (
-            <TagGroup key={i}>
+            <TagGroup key={stat.key}>
                 <Tag>{stat.key}</Tag>
                 <Tag highlighted>{formattedValue}</Tag>
             </TagGroup>

diff --git a/querybook/webapp/components/DataTableViewColumn/DataTableViewColumn.tsx b/querybook/webapp/components/DataTableViewColumn/DataTableViewColumn.tsx
@@ -21,7 +21,7 @@ export interface IDataTableViewColumnProps {
     onEditColumnDescriptionRedirect?: Nullable<() => Promise<void>>;
 }
 
-type ColumnOrderBy = 'alphabetical' | 'usage';
+type ColumnOrderBy = 'Default' | 'Aa' | 'Usage';
 
 const COLUMN_STATS_USAGE_KEY = 'usage';
 
@@ -35,7 +35,7 @@ export const DataTableViewColumn: React.FunctionComponent<
 }) => {
     const [filterString, setFilterString] = React.useState('');
     const [orderColumnsBy, setOrderColumnsBy] =
-        React.useState<ColumnOrderBy>('usage');
+        React.useState<ColumnOrderBy>('Aa');
     const [orderColumnsByAsc, setOrderColumnsByAsc] = React.useState(false);
     const { data: tableColumns } = useResource(
         React.useCallback(
@@ -55,6 +55,12 @@ export const DataTableViewColumn: React.FunctionComponent<
             }, {}),
         [tableColumns]
     );
+    const canSortByUsage = React.useMemo(
+        () =>
+            !!usageByColumnId &&
+            Object.values(usageByColumnId).some((usage) => usage !== 0),
+        [usageByColumnId]
+    );
     const filteredColumns = React.useMemo(() => {
         if (!tableColumns) {
             return [];
@@ -67,13 +73,13 @@ export const DataTableViewColumn: React.FunctionComponent<
         if (numberOfRows != null) {
             filteredCols.splice(numberOfRows);
         }
-        if (orderColumnsBy === 'alphabetical') {
+        if (orderColumnsBy === 'Aa') {
             filteredCols.sort(
                 (a, b) =>
                     (a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1) *
                     (orderColumnsByAsc ? 1 : -1)
             );
-        } else {
+        } else if (orderColumnsBy === 'Usage') {
             filteredCols.sort(
                 (a, b) =>
                     (usageByColumnId[a.id] > usageByColumnId[b.id] ? 1 : -1) *
@@ -83,30 +89,39 @@ export const DataTableViewColumn: React.FunctionComponent<
         return filteredCols;
     }, [
         tableColumns,
-        filterString,
         numberOfRows,
         orderColumnsBy,
+        filterString,
         orderColumnsByAsc,
         usageByColumnId,
     ]);
 
+    const onOrderByFieldToggle = React.useCallback(() => {
+        setOrderColumnsBy((v) => {
+            if (v === 'Aa') {
+                v = canSortByUsage ? 'Usage' : 'Default';
+            } else if (v === 'Usage') {
+                v = 'Default';
+            } else {
+                // v = 'Default'
+                v = 'Aa';
+            }
+            return v;
+        });
+    }, [canSortByUsage]);
+
     if (!table || !tableColumns) {
         return <Loading />;
     }
 
     const sortButton = (
         <OrderByButton
             asc={orderColumnsByAsc}
+            hideAscToggle={orderColumnsBy === 'Default'}
             onAscToggle={() => setOrderColumnsByAsc((v) => !v)}
             orderByField="name"
-            orderByFieldSymbol={
-                orderColumnsBy === 'alphabetical' ? 'Aa' : 'Usage'
-            }
-            onOrderByFieldToggle={() =>
-                setOrderColumnsBy((v) =>
-                    v === 'alphabetical' ? 'usage' : 'alphabetical'
-                )
-            }
+            orderByFieldSymbol={orderColumnsBy}
+            onOrderByFieldToggle={onOrderByFieldToggle}
         />
     );