feature/COR-1857-refactor-order-of-variants

packages/app/src/domain/variants/data-selection/get-variant-bar-chart-data.ts

@@ -20,7 +20,7 @@ export function getVariantBarChartData(variants: NlVariants) {
     return EMPTY_VALUES;
   }
 
-  const sortedVariants = variants.values.sort((a, b) => b.last_value.order - a.last_value.order);
+  const sortedVariants = variants.values.sort((a, b) => a.last_value.order - b.last_value.order);
 
   const firstVariantInList = sortedVariants.shift();
 

packages/app/src/domain/variants/logic/reorder-and-filter.ts

@@ -17,18 +17,38 @@ const hasMetricProperty = (config: any): config is { metricProperty: string } =>
  * @param selectionOptions - Currently selected variants
  */
 export const reorderAndFilter = <T, P>(context: TooltipData<VariantChartValue & T>, selectionOptions: P[]) => {
-  const hasSelectedMetrics = context.config.length !== selectionOptions.length; // Check whether the user has selected any variants from the interactive legend.
+  const filterSelectionActive = context.config.length !== selectionOptions.length; // Check whether the user has selected any variants from the interactive legend.
 
-  /* Filter out any variants that have an occcurrence value of 0 */
-  const filteredValues = Object.fromEntries(
+  // If the user has no filter selected -> Filter out any variants that have an occurrence value of 0
+  const valuesFromContext = Object.fromEntries(
     Object.entries(context.value).filter(([key, value]) => (key.includes('occurrence') ? value !== 0 && isPresent(value) && !isNaN(Number(value)) : value))
   ) as VariantChartValue;
 
-  /* Rebuild tooltip data context with filtered values */
+  // If the user has no filter selected -> Filter out configs that do not contain a 'metricProperty' key OR have an occurrence value of 0
+  const filteredConfigs = context.config
+    .filter((value) => {
+      return !hasMetricProperty(value) || valuesFromContext[value.metricProperty] || filterSelectionActive;
+    })
+    .filter(isDefined);
+
+  // Sort variants by occurrence
+  const sortedConfigs = filteredConfigs.sort((a: any, b: any) => {
+    return context.value[b.metricProperty] - context.value[a.metricProperty];
+  });
+
+  // Move config entry 'other variants' to end
+  sortedConfigs.push(
+    sortedConfigs.splice(
+      sortedConfigs.map((configEntry: any) => configEntry.metricProperty).findIndex((e) => e === 'other_variants_percentage' || e === 'other_variants_occurrence'),
+      1
+    )[0]
+  );
+
+  // Generate filtered tooltip context
   const reorderContext = {
     ...context,
-    config: [...context.config.filter((value) => !hasMetricProperty(value) || filteredValues[value.metricProperty] || hasSelectedMetrics)].filter(isDefined),
-    value: !hasSelectedMetrics ? filteredValues : context.value,
+    config: sortedConfigs.filter(isDefined),
+    value: !filterSelectionActive ? valuesFromContext : context.value,
   };
 
   return reorderContext as TooltipData<VariantChartValue & T>;

packages/app/src/domain/variants/variants-stacked-bar-chart-tile.tsx

@@ -59,7 +59,7 @@ export const VariantsStackedBarChartTile = ({ title, description, tooltipLabels,
       timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
       onSelectTimeframe={setVariantTimeFrame}
     >
-      <InteractiveLegend helpText={text.legend_help_text} selectOptions={interactiveLegendOptions} selection={list} onToggleItem={toggle} onReset={clear} />
+      <InteractiveLegend helpText={text.legend_help_text} selectOptions={interactiveLegendOptions.reverse()} selection={list} onToggleItem={toggle} onReset={clear} />
       <Spacer marginBottom={space[2]} />
       <TimeSeriesChart
         accessibility={{