ui: chart drilldown -- fix datatable filtering, fix series filtering

frontend/app/components/Charts/BarChart.tsx

@@ -13,6 +13,7 @@ echarts.use([BarChart]);
 interface BarChartProps extends DataProps {
   label?: string;
   onClick?: (event: any) => void;
+  onSeriesFocus?: (event: any) => void;
 }
 
 function ORBarChart(props: BarChartProps) {
@@ -81,6 +82,9 @@ function ORBarChart(props: BarChartProps) {
       const index = event.dataIndex;
       const timestamp = (window as any).__timestampMap?.[chartUuid.current]?.[index];
       props.onClick?.({ activePayload: [{ payload: { timestamp }}]})
+      setTimeout(() => {
+        props.onSeriesFocus?.(event.seriesName)
+      }, 0)
     })
 
     return () => {

frontend/app/components/Charts/LineChart.tsx

@@ -12,6 +12,7 @@ interface Props extends DataProps {
   isArea?: boolean;
   chartName?: string;
   onClick?: (event: any) => void;
+  onSeriesFocus?: (event: any) => void;
 }
 
 function ORLineChart(props: Props) {
@@ -73,7 +74,8 @@ function ORLineChart(props: Props) {
         // nameGap: 40,
         nameTextStyle: {
           padding: [0, 0, 0, 15],
-        }
+        },
+        minInterval: 1
       },
       tooltip: {
         ...defaultOptions.tooltip,
@@ -91,6 +93,9 @@ function ORLineChart(props: Props) {
       const index = event.dataIndex;
       const timestamp = (window as any).__timestampMap?.[chartUuid.current]?.[index];
       props.onClick?.({ activePayload: [{ payload: { timestamp }}]})
+      setTimeout(() => {
+        props.onSeriesFocus?.(event.seriesName)
+      }, 0)
     })
 
     return () => {

frontend/app/components/Charts/init.ts

@@ -36,6 +36,7 @@ const defaultOptions = {
     extraCssText: 'box-shadow: none; pointer-events: auto;',
     axisPointer: {
       type: 'cross',
+      snap: true,
       label: {
         backgroundColor: '#6a7985'
       },

frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx

@@ -65,7 +65,7 @@ function WidgetChart(props: Props) {
   const prevMetricRef = useRef<any>();
   const isMounted = useIsMounted();
   const [compData, setCompData] = useState<any>(null);
-  const [enabledRows, setEnabledRows] = useState<string[]>([]);
+  const [enabledRows, setEnabledRows] = useState<string[]>(_metric.series.map(s => s.name));
   const isTableWidget =
     _metric.metricType === 'table' && _metric.viewType === 'table';
   const isPieChart =
@@ -78,6 +78,17 @@ function WidgetChart(props: Props) {
     };
   }, []);
 
+  useEffect(() => {
+    if (enabledRows.length !== _metric.series.length) {
+      const excluded = _metric.series
+        .filter((s) => !enabledRows.includes(s.name))
+        .map((s) => s.name);
+      metricStore.setDisabledSeries(excluded);
+    } else {
+      metricStore.setDisabledSeries([]);
+    }
+  }, [enabledRows])
+
   useEffect(() => {
     if (!data.chart) return;
     const series = data.chart[0]
@@ -227,7 +238,7 @@ function WidgetChart(props: Props) {
   ]);
   useEffect(loadPage, [_metric.page]);
 
-  const onFocus = (seriesName: string)=> {
+  const onFocus = (seriesName: string) => {
     metricStore.setFocusedSeriesName(seriesName);
     metricStore.setDrillDown(true)
   }
@@ -318,6 +329,7 @@ function WidgetChart(props: Props) {
             inGrid={!props.isPreview}
             data={chartData}
             compData={compDataCopy}
+            onSeriesFocus={onFocus}
             onClick={onChartClick}
             label={
               _metric.metricOf === 'sessionCount'
@@ -335,6 +347,7 @@ function WidgetChart(props: Props) {
             data={chartData}
             inGrid={!props.isPreview}
             onClick={onChartClick}
+            onSeriesFocus={onFocus}
             label={
               _metric.metricOf === 'sessionCount'
                 ? 'Number of Sessions'
@@ -351,6 +364,7 @@ function WidgetChart(props: Props) {
             compData={compDataCopy}
             params={params}
             colors={colors}
+            onSeriesFocus={onFocus}
             onClick={onChartClick}
             label={
               _metric.metricOf === 'sessionCount'

frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx

@@ -108,7 +108,12 @@ function WidgetSessions(props: Props) {
       debounceClickMapSearch(customFilter);
     } else {
       const hasStartPoint = !!widget.startPoint && widget.metricType === USER_PATH
-      const activeSeries = focusedSeries ? widget.series.filter((s) => s.name === focusedSeries) : widget.series
+      const onlyFocused = focusedSeries
+                          ? widget.series.filter((s) => s.name === focusedSeries)
+                          : widget.series
+      const activeSeries = metricStore.disabledSeries.length
+                           ? onlyFocused.filter((s) => !metricStore.disabledSeries.includes(s.name))
+                           : onlyFocused
       const seriesJson = activeSeries.map((s) => s.toJson());
       if (hasStartPoint) {
         seriesJson[0].filter.filters.push(widget.startPoint.toJson());
@@ -132,6 +137,7 @@ function WidgetSessions(props: Props) {
     metricStore.clickMapSearch,
     focusedSeries,
     widget.startPoint,
+    metricStore.disabledSeries.length
   ]);
   useEffect(loadData, [metricStore.sessionsPage]);
   useEffect(() => {

frontend/app/mstore/metricStore.ts

@@ -102,6 +102,7 @@ export default class MetricStore {
   cardCategory: string | null = CATEGORIES.product_analytics;
 
   focusedSeriesName: string | null = null;
+  disabledSeries: string[] = [];
   drillDown = false;
 
   constructor() {
@@ -151,6 +152,10 @@ export default class MetricStore {
     }
   }
 
+  setDisabledSeries(series: string[]) {
+    this.disabledSeries = series;
+  }
+
   setCardCategory(category: string) {
     this.cardCategory = category;
   }