Revert "add new box plot changes"

This reverts commit 922b6e0.

docker/superset/Dockerfile

@@ -1,4 +1,4 @@
-# Based on https://github.com/apache/superset/blob/1.1.0/Dockerfile
+# Based on https://github.com/apache/superset/blob/1.0.0rc1/Dockerfile
 
 ######################################################################
 # PY stage that simply does a pip install on our requirements
@@ -30,10 +30,7 @@ RUN cd /app \
 ######################################################################
 # Node stage to deal with static asset construction
 ######################################################################
-FROM node:14 AS superset-node
-
-ARG NPM_VER=7
-RUN npm install -g npm@${NPM_VER}
+FROM node:12 AS superset-node
 
 ARG NPM_BUILD_CMD="build"
 ENV BUILD_CMD=${NPM_BUILD_CMD}
@@ -48,7 +45,7 @@ COPY ./plugins/plugins /app/superset-frontend/plugins
 
 RUN /frontend-mem-nag.sh \
         && cd /app/superset-frontend \
-        && for f in $(ls /app/superset-frontend/plugins) ; do npm install --save ./plugins/$f ; done \
+        && for f in $(ls /app/superset-frontend/plugins) ; do npm install --save plugins/$f ; done \
         && npm ci \
         && mkdir -p package_json_files \
         && cp package*.json package_json_files

superset/README.md

@@ -1,18 +1,8 @@
-# Update Superset
-
-1. `cd` into superset's submodule directory and checkout to the new desired release tag.
-
-2. Check if there any changes made to superset's Dockerfile (on the root of the repository for the current latest release), adapt them, and insert them on our custom Dockerfile under the `docker/superset` directory.
-
-3. Check if there any changes made to superset's `superset-frontend/src/visualizations/MainPreset.js` file. You can use the script `mainpreset_has_changes.py` under the `plugins` directory to check that. Apply the new changes if any and remember to keep our plugins imported and registered (Currently we only have the *Box plot* plugin).
-
-4. If the version of the frontend package `@superset-ui/plugin-chart-echarts` changed it's necessary to update our box plot plugin. Follow the instructions present [here](https://github.com/EHDEN/NetworkDashboards/tree/master/superset/plugins/plugins/plugin-chart-box-plot#how-to-update) also take into account the instruction of the next section.
-
-# Plugin Development
+# Development
 
 Instructions on how you can set up your development environment to develop on a custom superset plugin: and add it to develop a superset plugin:
 
-1. Clone the [superset](https://github.com/apache/superset) repository. **IMPORTANT NOTE**: Since we build the superset's docker image using the existing superset's submodule, it's better not to use it to develop the plugins. If you decide to use it anyways, remember [this](https://github.com/EHDEN/NetworkDashboards/blob/master/docker/superset/Dockerfile#L54) and [this](https://github.com/EHDEN/NetworkDashboards/blob/master/docker/superset/Dockerfile#L99) steps. They might override directories (`superset-frontend/node_modules` and `superset/static/assets`) that are generated during the build process, which can cause frontend compilation errors or the app can serve outdated static files.
+1. Clone the [superset](https://github.com/apache/superset) repository.
 
 2. Clone the [superset-ui](https://github.com/apache-superset/superset-ui) repository into the directory superset-frontend of the superset repository.
 

superset/plugins/MainPreset.js

@@ -25,6 +25,7 @@ import CalendarChartPlugin from '@superset-ui/legacy-plugin-chart-calendar';
 import ChordChartPlugin from '@superset-ui/legacy-plugin-chart-chord';
 import CountryMapChartPlugin from '@superset-ui/legacy-plugin-chart-country-map';
 import EventFlowChartPlugin from '@superset-ui/legacy-plugin-chart-event-flow';
+import ForceDirectedChartPlugin from '@superset-ui/legacy-plugin-chart-force-directed';
 import HeatmapChartPlugin from '@superset-ui/legacy-plugin-chart-heatmap';
 import HistogramChartPlugin from '@superset-ui/legacy-plugin-chart-histogram';
 import HorizonChartPlugin from '@superset-ui/legacy-plugin-chart-horizon';
@@ -57,15 +58,13 @@ import {
   EchartsPieChartPlugin,
   //EchartsBoxPlotChartPlugin,
   EchartsTimeseriesChartPlugin,
-  EchartsGraphChartPlugin,
 } from '@superset-ui/plugin-chart-echarts';
 import {
   EchartsBoxPlotChartPlugin,
 } from '@superset-ui/plugin-chart-box-plot';
 import {
-  SelectFilterPlugin,
-  RangeFilterPlugin,
-  TimeFilterPlugin,
+  AntdSelectFilterPlugin,
+  AntdRangeFilterPlugin,
 } from 'src/filters/components/';
 import FilterBoxChartPlugin from '../FilterBox/FilterBoxChartPlugin';
 import TimeTableChartPlugin from '../TimeTable/TimeTableChartPlugin';
@@ -91,7 +90,7 @@ export default class MainPreset extends Preset {
         new DualLineChartPlugin().configure({ key: 'dual_line' }),
         new EventFlowChartPlugin().configure({ key: 'event_flow' }),
         new FilterBoxChartPlugin().configure({ key: 'filter_box' }),
-        new EchartsGraphChartPlugin().configure({ key: 'graph_chart' }),
+        new ForceDirectedChartPlugin().configure({ key: 'directed_force' }),
         new HeatmapChartPlugin().configure({ key: 'heatmap' }),
         new HistogramChartPlugin().configure({ key: 'histogram' }),
         new HorizonChartPlugin().configure({ key: 'horizon' }),
@@ -115,9 +114,8 @@ export default class MainPreset extends Preset {
         new EchartsTimeseriesChartPlugin().configure({
           key: 'echarts_timeseries',
         }),
-        new SelectFilterPlugin().configure({ key: 'filter_select' }),
-        new RangeFilterPlugin().configure({ key: 'filter_range' }),
-        new TimeFilterPlugin().configure({ key: 'filter_time' }),
+        new AntdSelectFilterPlugin().configure({ key: 'filter_select' }),
+        new AntdRangeFilterPlugin().configure({ key: 'filter_range' }),
       ],
     });
   }

superset/plugins/plugins/plugin-chart-box-plot/README.md

@@ -1,6 +1,8 @@
 ## @superset-ui/plugin-chart-box-plot
 
-Box Plot Chart with a raw mode. Based on the Box Plot present [here](https://github.com/apache-superset/superset-ui/tree/v0.17.10/plugins/plugin-chart-echarts)
+Box Plot Chart with a raw mode. Based on the Box Plot present [here](https://github.com/apache-superset/superset-ui/tree/v0.16.8/plugins/plugin-chart-echarts)
+
+To check if there are changes on the original repo you can use the `has_changes.py` script.
 
 [![Version](https://img.shields.io/npm/v/@superset-ui/plugin-chart-echarts.svg?style=flat-square)](https://www.npmjs.com/package/@superset-ui/plugin-chart-echarts)
 [![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-plugin-chart-echarts&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-plugin-chart-echarts)
@@ -13,7 +15,7 @@ This plugin provides Echarts viz plugins for Superset:
 
 1. Check what release version of the `@superset-ui/plugin-chart-echarts` npm plugin, superset is using (see the file at `superset-frontend/package.json`).
 
-2. If it is greater than 0.17.10, go to the [history](https://github.com/apache-superset/superset-ui/commits/master/plugins/plugin-chart-echarts) of commits done to the plugin-chart-echarts plugin of the superset-ui repository and update to the most recent commit that has the same version that is being used by your superset version. A fast way check the changes done between two commits: `git diff [old_commit_hash] [recent_commit_hash] -- plugins/plugin-chart-echarts`
+2. If it is greater than 0.16.9, go to the [history](https://github.com/apache-superset/superset-ui/commits/master/plugins/plugin-chart-echarts) of commits done to the plugin-chart-echarts plugin of the superset-ui repository and update to the most recent commit that has the same version that is being used by your superset version. A fast way check the changes done between two commits: `git diff [old_commit_hash] [recent_commit_hash] -- plugins/plugin-chart-echarts`
 
 ### Demo
 

superset/plugins/plugins/plugin-chart-box-plot/esm/BoxPlot/buildQuery.js

@@ -21,18 +21,20 @@ const PERCENTILE_REGEX = /(\d+)\/(\d+) percentiles/;
 export default function buildQuery(formData) {
   const {
     query_mode,
-    groupby,
     minimum,
     p10,
     p25,
     median,
     p75,
     p90,
     maximum,
-    whiskerOptions,
-    columns: distributionColumns = []
+    whiskerOptions
   } = formData;
   return buildQueryContext(formData, baseQueryObject => {
+    const {
+      groupby
+    } = baseQueryObject;
+
     if (query_mode == 'raw') {
       if (groupby.length == 0) {
         throw new Error(`Error: No series column defined.`);
@@ -70,6 +72,7 @@ export default function buildQuery(formData) {
       metrics
     } = baseQueryObject;
     const percentileMatch = PERCENTILE_REGEX.exec(whiskerOptions);
+    const distributionColumns = columns || [];
 
     if (whiskerOptions === 'Tukey') {
       whiskerType = 'tukey';
@@ -84,12 +87,14 @@ export default function buildQuery(formData) {
 
     return [{ ...baseQueryObject,
       is_timeseries: distributionColumns.length === 0,
+      groupby: (groupby || []).concat(distributionColumns),
+      columns: [],
       post_processing: [{
         operation: 'boxplot',
         options: {
           whisker_type: whiskerType,
           percentiles,
-          groupby: columns.filter(x => !distributionColumns.includes(x)),
+          groupby,
           metrics: metrics.map(getMetricLabel)
         }
       }]

superset/plugins/plugins/plugin-chart-box-plot/esm/BoxPlot/transformProps.js

@@ -164,36 +164,8 @@ export default function transformProps(chartProps) {
     rotate: -45
   };else axisLabel = {
     show: true
-  };
-  const series = [{
-    name: 'boxplot',
-    type: 'boxplot',
-    data: transformedData,
-    tooltip: {
-      formatter: param => {
-        // @ts-ignore
-        const {
-          value,
-          name
-        } = param;
-        const headline = name ? `<p><strong>${name}</strong></p>` : '';
-        let stats;
-
-        if (queryMode == QueryMode.raw) {
-          stats = [`Max: ${numberFormatter(value[7])}`, `90th Percentile: ${numberFormatter(value[5])}`, `75th Percentile: ${numberFormatter(value[4])}`, `Median: ${numberFormatter(value[3])}`, `25th Percentile: ${numberFormatter(value[2])}`, `10th Percentile: ${numberFormatter(value[1])}`, `Min: ${numberFormatter(value[6])}`];
-        } else {
-          stats = [`Max: ${numberFormatter(value[5])}`, `3rd Quartile: ${numberFormatter(value[4])}`, `Mean: ${numberFormatter(value[6])}`, `Median: ${numberFormatter(value[3])}`, `1st Quartile: ${numberFormatter(value[2])}`, `Min: ${numberFormatter(value[1])}`, `# Observations: ${numberFormatter(value[7])}`];
-        }
+  }; // @ts-ignore
 
-        if (value[8].length > 0) {
-          stats.push(`# Outliers: ${numberFormatter(value[8].length)}`);
-        }
-
-        return headline + stats.join('<br/>');
-      }
-    }
-  }, // @ts-ignore
-  ...outlierData];
   const echartOptions = {
     grid: { ...defaultGrid,
       top: 30,
@@ -218,7 +190,37 @@ export default function transformProps(chartProps) {
         type: 'shadow'
       }
     },
-    series
+    series: [{
+      name: 'boxplot',
+      type: 'boxplot',
+      avoidLabelOverlap: true,
+      // @ts-ignore
+      data: transformedData,
+      tooltip: {
+        formatter: param => {
+          // @ts-ignore
+          const {
+            value,
+            name
+          } = param;
+          const headline = name ? `<p><strong>${name}</strong></p>` : '';
+          let stats;
+
+          if (queryMode == QueryMode.raw) {
+            stats = [`Max: ${numberFormatter(value[7])}`, `90th Percentile: ${numberFormatter(value[5])}`, `75th Percentile: ${numberFormatter(value[4])}`, `Median: ${numberFormatter(value[3])}`, `25th Percentile: ${numberFormatter(value[2])}`, `10th Percentile: ${numberFormatter(value[1])}`, `Min: ${numberFormatter(value[6])}`];
+          } else {
+            stats = [`Max: ${numberFormatter(value[5])}`, `3rd Quartile: ${numberFormatter(value[4])}`, `Mean: ${numberFormatter(value[6])}`, `Median: ${numberFormatter(value[3])}`, `1st Quartile: ${numberFormatter(value[2])}`, `Min: ${numberFormatter(value[1])}`, `# Observations: ${numberFormatter(value[7])}`];
+          }
+
+          if (value[8].length > 0) {
+            stats.push(`# Outliers: ${numberFormatter(value[8].length)}`);
+          }
+
+          return headline + stats.join('<br/>');
+        }
+      }
+    }, // @ts-ignore
+    ...outlierData]
   };
   return {
     width,

superset/plugins/plugins/plugin-chart-box-plot/package.json

@@ -26,9 +26,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@superset-ui/chart-controls": "0.17.10",
-    "@superset-ui/core": "0.17.10",
-    "echarts": "^5.0.2"
+    "@superset-ui/chart-controls": "0.16.9",
+    "@superset-ui/core": "0.16.7",
+    "@types/echarts": "^4.6.3",
+    "echarts": "^5.0.0"
   },
   "peerDependencies": {
     "react": "^16.13.1"

superset/plugins/plugins/plugin-chart-box-plot/src/BoxPlot/buildQuery.ts

@@ -24,7 +24,6 @@ const PERCENTILE_REGEX = /(\d+)\/(\d+) percentiles/;
 export default function buildQuery(formData: BoxPlotQueryFormData) {
   const {
     query_mode,
-    groupby = [],
     minimum,
     p10,
     p25,
@@ -33,9 +32,10 @@ export default function buildQuery(formData: BoxPlotQueryFormData) {
     p90,
     maximum,
     whiskerOptions,
-    columns: distributionColumns = [],
   } = formData;
   return buildQueryContext(formData, baseQueryObject => {
+    const { groupby } = baseQueryObject;
+
     if (query_mode == 'raw') {
       if (groupby.length == 0) {
         throw new Error(`Error: No series column defined.`);
@@ -80,6 +80,7 @@ export default function buildQuery(formData: BoxPlotQueryFormData) {
     let percentiles: [number, number] | undefined;
     const { columns, metrics } = baseQueryObject;
     const percentileMatch = PERCENTILE_REGEX.exec(whiskerOptions as string);
+    const distributionColumns = columns || [];
 
     if (whiskerOptions === 'Tukey') {
       whiskerType = 'tukey';
@@ -95,13 +96,15 @@ export default function buildQuery(formData: BoxPlotQueryFormData) {
       {
         ...baseQueryObject,
         is_timeseries: distributionColumns.length === 0,
+        groupby: (groupby || []).concat(distributionColumns),
+        columns: [],
         post_processing: [
           {
             operation: 'boxplot',
             options: {
               whisker_type: whiskerType,
               percentiles,
-              groupby: columns.filter(x => !distributionColumns.includes(x)),
+              groupby,
               metrics: metrics.map(getMetricLabel),
             },
           },