attempt: dataobj ui support for cardinality estimations

owen-d · Feb 12, 2025 · c8c584f · c8c584f
1 parent 53b4670
commit c8c584f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 15 deletions.
diff --git a/pkg/dataobj/explorer/inspect.go b/pkg/dataobj/explorer/inspect.go
@@ -37,6 +37,18 @@ type ColumnWithPages struct {
 	MetadataSize     uint64     `json:"metadata_size"`
 	ValuesCount      uint64     `json:"values_count"`
 	Pages            []PageInfo `json:"pages"`
+	Statistics       Statistics `json:"statistics"`
+}
+
+type Statistics struct {
+	CardinalityCount uint64 `json:"cardinality_count"`
+}
+
+func NewStatsFrom(md *datasetmd.Statistics) (res Statistics) {
+	if md != nil {
+		res.CardinalityCount = md.CardinalityCount
+	}
+	return
 }
 
 type PageInfo struct {
@@ -213,6 +225,7 @@ func inspectLogsSection(ctx context.Context, reader encoding.Decoder, section *f
 				MetadataSize:     col.Info.MetadataSize,
 				ValuesCount:      col.Info.ValuesCount,
 				Pages:            pageInfos,
+				Statistics:       NewStatsFrom(col.Info.Statistics),
 			}
 			return nil
 		})

diff --git a/pkg/dataobj/explorer/ui/src/components/file-metadata/FileMetadata.tsx b/pkg/dataobj/explorer/ui/src/components/file-metadata/FileMetadata.tsx
@@ -165,9 +165,8 @@ export const FileMetadata: React.FC<FileMetadataProps> = ({
                   Section #{sectionIndex + 1}: {section.type}
                 </h3>
                 <svg
-                  className={`w-5 h-5 transform transition-transform duration-700 ${
-                    expandedSectionIndex === sectionIndex ? "rotate-180" : ""
-                  }`}
+                  className={`w-5 h-5 transform transition-transform duration-700 ${expandedSectionIndex === sectionIndex ? "rotate-180" : ""
+                    }`}
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -183,11 +182,10 @@ export const FileMetadata: React.FC<FileMetadataProps> = ({
 
               {/* Section Content */}
               <div
-                className={`transition-all duration-700 ease-in-out ${
-                  expandedSectionIndex === sectionIndex
-                    ? "opacity-100"
-                    : "opacity-0 hidden"
-                }`}
+                className={`transition-all duration-700 ease-in-out ${expandedSectionIndex === sectionIndex
+                  ? "opacity-100"
+                  : "opacity-0 hidden"
+                  }`}
               >
                 <div className="p-4 bg-gray-50 dark:bg-gray-800">
                   {/* Section Stats */}
@@ -252,13 +250,12 @@ export const FileMetadata: React.FC<FileMetadataProps> = ({
                               Compression: {column.compression}
                             </div>
                             <svg
-                              className={`w-4 h-4 transform transition-transform text-gray-400 ${
-                                expandedColumns[
-                                  `${sectionIndex}-${columnIndex}`
-                                ]
-                                  ? "rotate-180"
-                                  : ""
-                              }`}
+                              className={`w-4 h-4 transform transition-transform text-gray-400 ${expandedColumns[
+                                `${sectionIndex}-${columnIndex}`
+                              ]
+                                ? "rotate-180"
+                                : ""
+                                }`}
                               fill="none"
                               stroke="currentColor"
                               viewBox="0 0 24 24"
@@ -309,6 +306,14 @@ export const FileMetadata: React.FC<FileMetadataProps> = ({
                                   {column.values_count.toLocaleString()}
                                 </div>
                               </div>
+                              <div className="bg-gray-50 dark:bg-gray-600 p-3 rounded-lg">
+                                <div className="text-gray-500 dark:text-gray-400 mb-1">
+                                  Est Cardinality
+                                </div>
+                                <div className="font-medium">
+                                  {column.statistics.cardinality_count.toLocaleString()}
+                                </div>
+                              </div>
                               <div className="bg-gray-50 dark:bg-gray-600 p-3 rounded-lg">
                                 <div className="text-gray-500 dark:text-gray-400 mb-1">
                                   Offset

diff --git a/pkg/dataobj/explorer/ui/src/types/metadata.ts b/pkg/dataobj/explorer/ui/src/types/metadata.ts
@@ -20,6 +20,11 @@ export interface ColumnInfo {
   metadata_size: number;
   values_count: number;
   pages: PageInfo[];
+  statistics: Statistics;
+}
+
+export interface Statistics {
+  cardinality_count: number;
 }
 
 export interface SectionMetadata {