exp: Show tables as frequent and look in the columns description (#3910)

This will significantly improves search experience

Author: aMayzner

python/generators/sql_processing/stdlib_tags.py

@@ -451,8 +451,8 @@ def _validate_tags():
 # Table importance levels for documentation.
 # Importance levels help users discover the most relevant tables for their use case.
 # Levels:
-#   'high': Most commonly used, fundamental tables for trace analysis
-#   'mid': Important for specific use cases, moderately common
+#   'high': Very frequent - Most commonly used, fundamental tables for trace analysis
+#   'mid': Frequent - Important for specific use cases, moderately common
 #   'low': Specialized or advanced tables, less frequently needed
 #   None/absent: Normal importance (default)
 TABLE_IMPORTANCE = {
@@ -481,6 +481,7 @@ def _validate_tags():
     'android_anrs': 'mid',  # Application Not Responding events and diagnostics
     'android_battery_charge': 'mid',  # Battery charge level tracking over time
     'android_charging_states': 'mid',  # Device charging state transitions
+    'android_process_metadata': 'mid',  # Process metadata and information
 
     # LOW IMPORTANCE - Raw/specialized tables, less frequently needed
     'slices':

ui/src/plugins/dev.perfetto.ExplorePage/query_builder/help.scss

@@ -80,11 +80,11 @@
     }
 
     .pf-importance-high {
-      background-color: #d32f2f; // Red - Important
+      background-color: #d32f2f; // Red - Very frequent
     }
 
     .pf-importance-mid {
-      background-color: var(--pf-color-primary); // Primary blue - Recommended
+      background-color: var(--pf-color-primary); // Primary blue - Frequent
     }
 
     .pf-importance-low {

ui/src/plugins/dev.perfetto.ExplorePage/query_builder/table_list.scss

@@ -38,3 +38,78 @@
     }
   }
 }
+
+.pf-table-card-header {
+  .pf-match-type-chip {
+    background-color: var(--surface-variant);
+    color: var(--on-surface-variant);
+    font-size: 11px;
+    opacity: 0.8;
+  }
+}
+
+.table-description {
+  // Inline code styling
+  code {
+    background-color: var(--surface-variant);
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: "Roboto Mono", monospace;
+    font-size: 0.9em;
+    color: var(--on-surface);
+  }
+
+  // Links
+  a {
+    color: var(--primary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  // Bold text
+  strong {
+    font-weight: 500;
+  }
+
+  // Italic text
+  em {
+    font-style: italic;
+  }
+
+  // Paragraphs
+  p {
+    margin: 0.5em 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Lists
+  ul,
+  ol {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+  }
+
+  // Code blocks
+  pre {
+    background-color: var(--surface-variant);
+    padding: 8px 12px;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 0.5em 0;
+
+    code {
+      background-color: transparent;
+      padding: 0;
+    }
+  }
+}