feat(annotations): Update annotations UI to display label as tooltip …

…on hover (#27)

* Update annotations UI to display label as tooltip on hover
* fix annotation label overlap
* formatting

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts

@@ -60,6 +60,7 @@ import {
   evalFormula,
   extractRecordAnnotations,
   formatAnnotationLabel,
+  formatAnnotationTooltipLabel,
   parseAnnotationOpacity,
 } from '../utils/annotation';
 import { currentSeries, getChartPadding } from '../utils/series';
@@ -326,16 +327,8 @@ export function transformIntervalAnnotation(
         }
       : {
           show: false,
-          color: theme.colors.grayscale.dark2,
-          // @ts-ignore
-          emphasis: {
-            fontWeight: 'bold',
-            show: true,
-            position: 'insideTop',
-            verticalAlign: 'top',
-            backgroundColor: theme.colors.grayscale.light5,
-          },
         };
+
     series.push({
       id: `Interval - ${label}`,
       type: 'line',
@@ -351,6 +344,12 @@ export function transformIntervalAnnotation(
         } as ItemStyleOption,
         label: intervalLabel,
         data: intervalData,
+        tooltip: {
+          show: !showLabel,
+          trigger: 'item',
+          formatter: () =>
+            formatAnnotationTooltipLabel(name, title, descriptions),
+        },
       },
     });
   });
@@ -403,15 +402,6 @@ export function transformEventAnnotation(
         }
       : {
           show: false,
-          color: theme.colors.grayscale.dark2,
-          position: 'insideEndTop',
-          // @ts-ignore
-          emphasis: {
-            formatter: (params: CallbackDataParams) => params.name,
-            fontWeight: 'bold',
-            show: true,
-            backgroundColor: theme.colors.grayscale.light5,
-          },
         };
 
     series.push({
@@ -424,6 +414,12 @@ export function transformEventAnnotation(
         lineStyle,
         label: eventLabel,
         data: eventData,
+        tooltip: {
+          show: !showLabel,
+          trigger: 'item',
+          formatter: () =>
+            formatAnnotationTooltipLabel(name, title, descriptions),
+        },
       },
     });
   });

superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts

@@ -120,6 +120,26 @@ export function formatAnnotationLabel(
   return labels.join('\n\n');
 }
 
+export function formatAnnotationTooltipLabel(
+  name?: string,
+  title?: string,
+  descriptions: string[] = [],
+): string {
+  const tooltipParts: string[] = [];
+
+  const titleParts = [name, title].filter(val => !!val);
+  if (titleParts.length) {
+    const titleSection = `<strong>${titleParts.join(' - ')}</strong>`;
+    tooltipParts.push(titleSection);
+  }
+
+  const filteredDescriptions: string[] = descriptions.filter(
+    description => !!description,
+  );
+  tooltipParts.push(...filteredDescriptions);
+
+  return `<div>${tooltipParts.join('<br/>')}</div>`;
+}
 export function extractAnnotationLabels(
   layers: AnnotationLayer[],
   data: AnnotationData,

superset/connectors/sqla/models.py

@@ -231,7 +231,6 @@ def values_for_column(self, column_name: str, limit: int = 10000) -> List[Any]:
 
 
 class TableColumn(Model, BaseColumn, CertificationMixin):
-
     """ORM object for table columns, each table can have multiple columns"""
 
     __tablename__ = "table_columns"
@@ -446,7 +445,6 @@ def data(self) -> Dict[str, Any]:
 
 
 class SqlMetric(Model, BaseMetric, CertificationMixin):
-
     """ORM object for metrics, each table can have multiple metrics"""
 
     __tablename__ = "sql_metrics"
@@ -1935,7 +1933,14 @@ def assign_column_label(df: pd.DataFrame) -> Optional[pd.DataFrame]:
             return df
 
         try:
-            df = self.database.get_df(sql, self.schema, mutator=assign_column_label, query_obj=query_obj, table_name=self.table_name, columns=self.columns)
+            df = self.database.get_df(
+                sql,
+                self.schema,
+                mutator=assign_column_label,
+                query_obj=query_obj,
+                table_name=self.table_name,
+                columns=self.columns,
+            )
         except Exception as ex:  # pylint: disable=broad-except
             df = pd.DataFrame()
             status = QueryStatus.FAILED

superset/db_engine_specs/presto.py

@@ -164,7 +164,7 @@ class PrestoBaseEngineSpec(BaseEngineSpec, metaclass=ABCMeta):
     """
     A base class that share common functions between Presto and Trino
     """
-    
+
     column_type_mappings = (
         (
             re.compile(r"^boolean.*", re.IGNORECASE),

superset/initialization/__init__.py

@@ -583,7 +583,10 @@ def configure_middlewares(self) -> None:
 
         # This is Pinterest custom code, the envoy https forwarding
         # becomes http internally and it breaks HTTPs requirement for OAuth
-        if 'ENABLE_HTTPS_OVERRIDE' in self.config and self.config['ENABLE_HTTPS_OVERRIDE']:
+        if (
+            "ENABLE_HTTPS_OVERRIDE" in self.config
+            and self.config["ENABLE_HTTPS_OVERRIDE"]
+        ):
             self.superset_app.wsgi_app = ForceHttps(  # type: ignore
                 self.superset_app.wsgi_app
             )
@@ -700,14 +703,17 @@ class SupersetIndexView(IndexView):
     def index(self) -> FlaskResponse:
         return redirect("/superset/welcome/")
 
-class ForceHttps(object):
+
+class ForceHttps:  # pylint: disable=too-few-public-methods
     """
     wrapper class forces the html schema to be "https"
     """
 
-    def __init__(self, app):
+    def __init__(self, app: Callable[[Dict[str, Any], Callable[..., Any]], Any]):
         self.app = app
 
-    def __call__(self, environ, start_response):
-        environ['wsgi.url_scheme'] = 'https'
-        return self.app(environ, start_response)
+    def __call__(
+        self, environ: Dict[str, Any], start_response: Callable[..., Any]
+    ) -> Any:
+        environ["wsgi.url_scheme"] = "https"
+        return self.app(environ, start_response)

superset/key_value/commands/create.py

@@ -81,7 +81,7 @@ def validate(self) -> None:
     def create(self) -> Key:
         try:
             value = self.codec.encode(self.value)
-        except Exception as ex:  # pylint: disable=broad-except
+        except Exception as ex:
             raise KeyValueCreateFailedError("Unable to encode value") from ex
         entry = KeyValueEntry(
             resource=self.resource.value,

superset/models/core.py

@@ -92,7 +92,6 @@ class Url(Model, AuditMixinNullable):
 
 
 class KeyValue(Model):  # pylint: disable=too-few-public-methods
-
     """Used for any type of key-value store"""
 
     __tablename__ = "keyvalue"
@@ -117,7 +116,6 @@ class ConfigurationMethod(str, enum.Enum):
 class Database(
     Model, AuditMixinNullable, ImportExportMixin
 ):  # pylint: disable=too-many-public-methods
-
     """An ORM object that stores Database related information"""
 
     __tablename__ = "dbs"
@@ -539,7 +537,13 @@ def _log_query(sql: str) -> None:
                         database=None,
                     )
                 _log_query(sql_)
-                self.db_engine_spec.execute(cursor, sql_, query_obj=query_obj, table_name=table_name, columns=columns)
+                self.db_engine_spec.execute(
+                    cursor,
+                    sql_,
+                    query_obj=query_obj,
+                    table_name=table_name,
+                    columns=columns,
+                )
                 cursor.fetchall()
 
             if mutate_after_split:
@@ -550,11 +554,23 @@ def _log_query(sql: str) -> None:
                     database=None,
                 )
                 _log_query(last_sql)
-                self.db_engine_spec.execute(cursor, last_sql, query_obj=query_obj, table_name=table_name, columns=columns)
+                self.db_engine_spec.execute(
+                    cursor,
+                    last_sql,
+                    query_obj=query_obj,
+                    table_name=table_name,
+                    columns=columns,
+                )
             else:
                 _log_query(sqls[-1])
-                self.db_engine_spec.execute(cursor, sqls[-1], query_obj=query_obj, table_name=table_name, columns=columns)
-
+                self.db_engine_spec.execute(
+                    cursor,
+                    sqls[-1],
+                    query_obj=query_obj,
+                    table_name=table_name,
+                    columns=columns,
+                )
+
             data = self.db_engine_spec.fetch_data(cursor)
             result_set = SupersetResultSet(
                 data, cursor.description, self.db_engine_spec
@@ -917,7 +933,6 @@ def get_dialect(self) -> Dialect:
 
 
 class Log(Model):  # pylint: disable=too-few-public-methods
-
     """ORM object used to log Superset actions to the database"""
 
     __tablename__ = "logs"

superset/tasks/cache.py

@@ -239,7 +239,7 @@ def __init__(self, schedule: str) -> None:
         self.schedule = schedule  # "hourly" or "daily"
 
     def get_urls(self) -> List[str]:
-        import json
+        import json  # pylint: disable=import-outside-toplevel
 
         urls = []
         session = db.create_scoped_session()

superset/tasks/database.py

@@ -12,7 +12,7 @@
 
 
 @celery_app.task(name="db_tables_cache_warm_up")
-def db_tables_cache_warm_up(database_id: str, schema_name: str):
+def db_tables_cache_warm_up(database_id: str, schema_name: str) -> None:
     """
     Warm up tables in a database schema
 
@@ -48,13 +48,13 @@ def db_tables_cache_warm_up(database_id: str, schema_name: str):
             cache_timeout=database.table_cache_timeout,
         )
         logger.info(
-            "Database tables cache warm up succeeded for database_id: %i, schema_name: %s",
+            "Database tables cache warm up succeeded for database_id: %i, schema_name: %s",  # pylint: disable=line-too-long
             database_id,
             schema_name,
         )
     except SupersetException as ex:
         logger.exception(
-            "Superset exception for db_tables_cache_warm_up job database_id: %i, schema_name: %s, message: %s",
+            "Superset exception for db_tables_cache_warm_up job database_id: %i, schema_name: %s, message: %s",  # pylint: disable=line-too-long
             database_id,
             schema_name,
             ex.message,

superset/utils/screenshots.py

@@ -236,7 +236,8 @@ def __init__(
         # should always capture in standalone
         url = modify_url_query(
             url,
-            standalone=DashboardStandaloneMode.HIDE_NAV_AND_TITLE.value,  # TODO: temp fix for report mode error
+            # TODO: temp fix for report mode error
+            standalone=DashboardStandaloneMode.HIDE_NAV_AND_TITLE.value,
         )
 
         super().__init__(url, digest)

superset/views/health.py

@@ -28,6 +28,7 @@ def health() -> FlaskResponse:
     stats_logger.incr("health")
     return "OK"
 
+
 @talisman(force_https=False)
 @app.route("/_/_/health/")
 def health_pinterest_only() -> FlaskResponse: