From 2b6ab5966aa48fadef73cd094be2c4fb1c092e4e Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Mon, 20 May 2024 17:02:22 -0300
Subject: [PATCH 01/13] make GroupByRow controlled

---
 .../src/components/GroupByInput.tsx           |  4 +-
 .../src/components/GroupByRow.tsx             | 78 ++++++++++---------
 .../src/components/QueryEditor.tsx            |  6 +-
 .../src/datasource.ts                         |  2 +-
 4 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/GroupByInput.tsx b/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
index 2a0e2f7..8d2670d 100644
--- a/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
+++ b/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
@@ -15,7 +15,7 @@ type Props = {
   readonly groupBy: SelectableValue<QueryAttribute | QueryAdAttribute>;
   readonly selectableGroupBys: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
   readonly onDelete: () => void;
-  readonly onChange: (newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) => void;
+  readonly onChange: (newValue: QueryAdAttribute | QueryAttribute) => void;
   readonly isFirst: boolean;
   readonly isLast: boolean;
   readonly onReorderGroupBy: (direction: REORDER_DIRECTION) => void;
@@ -26,7 +26,7 @@ export function GroupByInput(props: Props) {
     <HorizontalGroup>
       <Select
         value={isEmpty(props.groupBy) ? undefined : props.groupBy}
-        onChange={props.onChange}
+        onChange={(value) => props.onChange(value.value!)}
         options={props.selectableGroupBys}
         width={30}
       />
diff --git a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
index 4dd5aa9..97e8b6e 100644
--- a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
@@ -1,89 +1,95 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Box, IconButton, VerticalGroup } from '@grafana/ui';
-import { difference } from 'lodash';
+import { differenceWith } from 'lodash';
 
 import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
 import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
 import { GroupByInput, REORDER_DIRECTION } from './GroupByInput';
 
-const mapGroupBysToSelectableValue = (
-  selectedGroupBys: Array<SelectableValue<QueryAdAttribute | QueryAttribute>>,
+const getSelectableGroupByOptions = (
+  selectedGroupBys: Array<QueryAttribute | QueryAdAttribute>,
   isAdAnalytics: boolean
 ): Array<SelectableValue<QueryAttribute | QueryAdAttribute>> => {
   if (isAdAnalytics) {
-    return difference(SELECTABLE_QUERY_AD_ATTRIBUTES, selectedGroupBys);
+    return differenceWith(
+      SELECTABLE_QUERY_AD_ATTRIBUTES,
+      selectedGroupBys,
+      (selectableValue, selectedValue) => selectableValue.value === selectedValue
+    );
   } else {
-    return difference(SELECTABLE_QUERY_ATTRIBUTES, selectedGroupBys);
+    return differenceWith(
+      SELECTABLE_QUERY_ATTRIBUTES,
+      selectedGroupBys,
+      (selectableValue, selectedValue) => selectableValue.value === selectedValue
+    );
+  }
+};
+
+const mapGroupByToSelectableValue = (
+  selectedGroupBy: QueryAttribute | QueryAdAttribute,
+  isAdAnalytics: boolean
+): SelectableValue<QueryAttribute | QueryAdAttribute> => {
+  if (isAdAnalytics) {
+    return SELECTABLE_QUERY_AD_ATTRIBUTES.filter((selectableValue) => selectableValue.value === selectedGroupBy);
+  } else {
+    return SELECTABLE_QUERY_ATTRIBUTES.filter((selectableValue) => selectableValue.value === selectedGroupBy);
   }
 };
 
 type Props = {
   readonly isAdAnalytics: boolean;
-  readonly onChange: (newGroupBys: QueryAdAttribute[] | QueryAttribute[]) => void;
+  readonly onChange: (newGroupBys: Array<QueryAttribute | QueryAdAttribute>) => void;
+  readonly groupBys: Array<QueryAttribute | QueryAdAttribute>;
 };
 
 export function GroupByRow(props: Props) {
-  const [selectedGroupBys, setSelectedGroupBys] = useState<Array<SelectableValue<QueryAdAttribute | QueryAttribute>>>(
-    []
-  );
-
   const deleteGroupByInput = (index: number) => {
-    const newSelectedGroupBys = [...selectedGroupBys];
+    const newSelectedGroupBys = [...props.groupBys];
     newSelectedGroupBys.splice(index, 1);
 
-    setSelectedGroupBys(newSelectedGroupBys);
-
-    const groupBys = newSelectedGroupBys.map((groupBy) => groupBy.value);
-    props.onChange(groupBys as QueryAttribute[] | QueryAdAttribute[]);
+    props.onChange(newSelectedGroupBys);
   };
 
-  const onSelectedGroupByChange = (
-    index: number,
-    newSelectedGroupBy: SelectableValue<QueryAttribute | QueryAdAttribute>
-  ) => {
-    const newSelectedGroupBys = [...selectedGroupBys];
+  const onSelectedGroupByChange = (index: number, newSelectedGroupBy: QueryAttribute | QueryAdAttribute) => {
+    const newSelectedGroupBys = [...props.groupBys];
     newSelectedGroupBys.splice(index, 1, newSelectedGroupBy);
-    setSelectedGroupBys(newSelectedGroupBys);
 
-    const groupBys = newSelectedGroupBys.map((groupBy) => groupBy.value);
-    props.onChange(groupBys as QueryAttribute[] | QueryAdAttribute[]);
+    props.onChange(newSelectedGroupBys);
   };
 
   const reorderGroupBy = (direction: REORDER_DIRECTION, index: number) => {
-    const newSelectedGroupBys = [...selectedGroupBys];
+    const newSelectedGroupBys = [...props.groupBys];
     const groupByToMove = newSelectedGroupBys[index];
     newSelectedGroupBys.splice(index, 1);
 
     const newIndex = direction === REORDER_DIRECTION.UP ? index - 1 : index + 1;
     newSelectedGroupBys.splice(newIndex, 0, groupByToMove);
-    setSelectedGroupBys(newSelectedGroupBys);
 
-    const groupBys = newSelectedGroupBys.map((groupBy) => groupBy.value);
-    props.onChange(groupBys as QueryAttribute[] | QueryAdAttribute[]);
+    props.onChange(newSelectedGroupBys);
   };
 
   const addGroupByInput = () => {
-    setSelectedGroupBys((prevState) => [...prevState, {}]);
+    const newDefaultSelectedValue = getSelectableGroupByOptions(props.groupBys, props.isAdAnalytics)[0].value!;
+    //TODOMY decide on whats the best approach here with the new selected Value, it shouldn't run when adding a new default value, or should it?
+    props.onChange([...props.groupBys, newDefaultSelectedValue]);
   };
 
   return (
     <VerticalGroup>
-      {selectedGroupBys.map((item, index, selectedGroupBysArray) => (
+      {props.groupBys.map((item, index, selectedGroupBysArray) => (
         <GroupByInput
           key={index}
-          groupBy={item}
-          onChange={(newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) =>
-            onSelectedGroupByChange(index, newValue)
-          }
-          selectableGroupBys={mapGroupBysToSelectableValue(selectedGroupBysArray, props.isAdAnalytics)}
+          groupBy={mapGroupByToSelectableValue(item, props.isAdAnalytics)}
+          onChange={(newValue: QueryAdAttribute | QueryAttribute) => onSelectedGroupByChange(index, newValue)}
+          selectableGroupBys={getSelectableGroupByOptions(selectedGroupBysArray, props.isAdAnalytics)}
           onDelete={() => deleteGroupByInput(index)}
           isFirst={index === 0}
           isLast={index === selectedGroupBysArray.length - 1}
           onReorderGroupBy={(direction: REORDER_DIRECTION) => reorderGroupBy(direction, index)}
         />
       ))}
-      <Box paddingTop={selectedGroupBys.length === 0 ? 0.5 : 0}>
+      <Box paddingTop={props.groupBys.length === 0 ? 0.5 : 0}>
         <IconButton name="plus-square" tooltip="Add Group By" onClick={() => addGroupByInput()} size="xl" />
       </Box>
     </VerticalGroup>
diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index 5630f73..a6d9d0d 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -165,7 +165,11 @@ export function QueryEditor(props: Props) {
           <FilterRow isAdAnalytics={props.datasource.adAnalytics ? true : false} onChange={handleFilterChange} />
         </InlineField>
         <InlineField label="Group By" labelWidth={20}>
-          <GroupByRow isAdAnalytics={props.datasource.adAnalytics ? true : false} onChange={handleGroupByChange} />
+          <GroupByRow
+            isAdAnalytics={props.datasource.adAnalytics ? true : false}
+            onChange={handleGroupByChange}
+            groupBys={query.groupBy}
+          />
         </InlineField>
         <InlineField label="Order By" labelWidth={20}>
           <OrderByRow isAdAnalytics={props.datasource.adAnalytics ? true : false} onChange={handleOrderByChange} />
diff --git a/bitmovin-analytics-datasource/src/datasource.ts b/bitmovin-analytics-datasource/src/datasource.ts
index 0d384b2..6a3caac 100644
--- a/bitmovin-analytics-datasource/src/datasource.ts
+++ b/bitmovin-analytics-datasource/src/datasource.ts
@@ -32,7 +32,7 @@ type BitmovinAnalyticsRequestQuery = {
   start: Date;
   end: Date;
   filters: QueryFilter[];
-  groupBy: QueryAttribute[] | QueryAdAttribute[];
+  groupBy: Array<QueryAttribute | QueryAdAttribute>;
   orderBy: QueryOrderBy[];
   dimension?: QueryAttribute | QueryAdAttribute;
   metric?: Metric;

From 9f077d545c78e4acbbd20665e8eae139b5839903 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Mon, 20 May 2024 17:03:57 -0300
Subject: [PATCH 02/13] make OrderByRow controlled

---
 .../src/components/OrderByRow.tsx             | 124 ++++++++----------
 .../src/components/QueryEditor.tsx            |   6 +-
 2 files changed, 63 insertions(+), 67 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/OrderByRow.tsx b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
index e4b19be..66e5cd3 100644
--- a/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
@@ -1,122 +1,114 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Box, IconButton, VerticalGroup } from '@grafana/ui';
-import { SelectableValue } from '@grafana/data';
-import { difference } from 'lodash';
+import type { SelectableValue } from '@grafana/data';
+import { differenceWith } from 'lodash';
 
 import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
 import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
-import { QueryOrderBy, QuerySortOrder } from '../types/queryOrderBy';
+import type { QueryOrderBy, QuerySortOrder } from '../types/queryOrderBy';
 import { OrderByInput } from './OrderByInput';
 import { REORDER_DIRECTION } from './GroupByInput';
 
-const mapOrderBysToSelectableValue = (
-  selectedAttributes: Array<SelectableValue<QueryAdAttribute | QueryAttribute>>,
+//TODOMY should the selectable not be only available from the Group By attributes?
+const getSelectableOrderByOptions = (
+  selectedOrderBys: QueryOrderBy[],
   isAdAnalytics: boolean
-): Array<SelectableValue<QueryAttribute | QueryAdAttribute>> => {
+): Array<SelectableValue<QueryAdAttribute | QueryAttribute>> => {
   if (isAdAnalytics) {
-    return difference(SELECTABLE_QUERY_AD_ATTRIBUTES, selectedAttributes);
+    return differenceWith(
+      SELECTABLE_QUERY_AD_ATTRIBUTES,
+      selectedOrderBys,
+      (selectableValue, selectedValue) => selectableValue.value === selectedValue.name
+    );
   } else {
-    return difference(SELECTABLE_QUERY_ATTRIBUTES, selectedAttributes);
+    return differenceWith(
+      SELECTABLE_QUERY_ATTRIBUTES,
+      selectedOrderBys,
+      (selectableValue, selectedValue) => selectableValue.value === selectedValue.name
+    );
+  }
+};
+
+const mapOrderByAttributeToSelectableValue = (
+  selectedOrderBy: QueryAttribute | QueryAdAttribute,
+  isAdAnalytics: boolean
+): SelectableValue<QueryAttribute | QueryAdAttribute> => {
+  if (isAdAnalytics) {
+    return SELECTABLE_QUERY_AD_ATTRIBUTES.filter((selectableValue) => selectableValue.value === selectedOrderBy);
+  } else {
+    return SELECTABLE_QUERY_ATTRIBUTES.filter((selectableValue) => selectableValue.value === selectedOrderBy);
   }
 };
 
 type Props = {
   readonly isAdAnalytics: boolean;
   readonly onChange: (newOrderBy: QueryOrderBy[]) => void;
+  readonly orderBys: QueryOrderBy[];
 };
 
 export function OrderByRow(props: Props) {
-  const [selectedAttributes, setSelectedAttributes] = useState<
-    Array<SelectableValue<QueryAdAttribute | QueryAttribute>>
-  >([]);
-  const [selectedSortOrders, setSelectedSortOrders] = useState<QuerySortOrder[]>([]);
-
-  const mapSelectedValuesToQueryOrderBy = (
-    selectedAttributes: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>,
-    selectedSortOrders: QuerySortOrder[]
-  ): QueryOrderBy[] => {
-    const queryOrderBys: QueryOrderBy[] = [];
-    for (let i = 0; i < selectedAttributes.length; i++) {
-      queryOrderBys.push({
-        name: selectedAttributes[i].value!,
-        order: selectedSortOrders[i],
-      });
-    }
-    return queryOrderBys;
-  };
-
   const deleteOrderByInput = (index: number) => {
-    const newSelectedAttributes = [...selectedAttributes];
-    newSelectedAttributes.splice(index, 1);
+    const newOrderBys = [...props.orderBys];
+    newOrderBys.splice(index, 1);
 
-    const newSelectedSortOrders = [...selectedSortOrders];
-    newSelectedSortOrders.splice(index, 1);
-
-    setSelectedAttributes(newSelectedAttributes);
-    setSelectedSortOrders(newSelectedSortOrders);
-    props.onChange(mapSelectedValuesToQueryOrderBy(newSelectedAttributes, newSelectedSortOrders));
+    props.onChange(newOrderBys);
   };
 
   const onAttributesChange = (index: number, newAttribute: SelectableValue<QueryAttribute | QueryAdAttribute>) => {
-    const newSelectedAttributes = [...selectedAttributes];
-    newSelectedAttributes.splice(index, 1, newAttribute);
-    setSelectedAttributes(newSelectedAttributes);
+    const newOrderBys = [...props.orderBys];
+    const newOrderBy = { name: newAttribute.value, order: newOrderBys[index].order } as QueryOrderBy;
+
+    newOrderBys.splice(index, 1, newOrderBy);
 
-    props.onChange(mapSelectedValuesToQueryOrderBy(newSelectedAttributes, selectedSortOrders));
+    props.onChange(newOrderBys);
   };
 
   const onSortOrdersChange = (index: number, newSortOrder: QuerySortOrder) => {
-    const newSelectedSortOrders = [...selectedSortOrders];
-    newSelectedSortOrders.splice(index, 1, newSortOrder);
-    setSelectedSortOrders(newSelectedSortOrders);
+    const newOrderBys = [...props.orderBys];
+    const newOrderBy = { name: newOrderBys[index].name, order: newSortOrder } as QueryOrderBy;
 
-    props.onChange(mapSelectedValuesToQueryOrderBy(selectedAttributes, newSelectedSortOrders));
-  };
+    newOrderBys.splice(index, 1, newOrderBy);
 
+    props.onChange(newOrderBys);
+  };
   const reorderOrderBy = (direction: REORDER_DIRECTION, index: number) => {
     const newIndex = direction === REORDER_DIRECTION.UP ? index - 1 : index + 1;
 
-    const newSelectedAttributes = [...selectedAttributes];
-    const attributeToMove = newSelectedAttributes[index];
-    newSelectedAttributes.splice(index, 1);
-    newSelectedAttributes.splice(newIndex, 0, attributeToMove);
+    const newOrderBys = [...props.orderBys];
+    const orderByToMove = newOrderBys[index];
+    newOrderBys.splice(index, 1);
+    newOrderBys.splice(newIndex, 0, orderByToMove);
 
-    const newSelectedSortOrders = [...selectedSortOrders];
-    const sortOrderToMove = newSelectedSortOrders[index];
-    newSelectedSortOrders.splice(index, 1);
-    newSelectedSortOrders.splice(newIndex, 0, sortOrderToMove);
-
-    setSelectedAttributes(newSelectedAttributes);
-    setSelectedSortOrders(newSelectedSortOrders);
-
-    props.onChange(mapSelectedValuesToQueryOrderBy(newSelectedAttributes, newSelectedSortOrders));
+    props.onChange(newOrderBys);
   };
+
   const addOrderByInput = () => {
-    setSelectedAttributes((prevState) => [...prevState, {}]);
-    setSelectedSortOrders((prevState) => [...prevState, 'ASC']);
+    const newDefaultSelectedValue = getSelectableOrderByOptions(props.orderBys, props.isAdAnalytics)[0].value!;
+    //TODOMY decide on whats the best approach here with the new selected Value, it shouldn't run when adding a new default value, or should it?
+    props.onChange([...props.orderBys, { name: newDefaultSelectedValue, order: 'ASC' }]);
   };
 
   return (
     <VerticalGroup>
-      {selectedAttributes.map((attribute, index, selectedAttributesArray) => (
+      {props.orderBys.map((orderBy, index, selectedOrderBys) => (
         <OrderByInput
           key={index}
           isAdAnalytics={props.isAdAnalytics}
-          selectableOrderByAttributes={mapOrderBysToSelectableValue(selectedAttributesArray, props.isAdAnalytics)}
-          attribute={attribute}
+          selectableOrderByAttributes={getSelectableOrderByOptions(selectedOrderBys, props.isAdAnalytics)}
+          attribute={mapOrderByAttributeToSelectableValue(orderBy.name, props.isAdAnalytics)}
           onAttributeChange={(newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) =>
             onAttributesChange(index, newValue)
           }
-          sortOrder={selectedSortOrders[index]}
+          sortOrder={orderBy.order}
           onSortOrderChange={(newValue: QuerySortOrder) => onSortOrdersChange(index, newValue)}
           onDelete={() => deleteOrderByInput(index)}
           isFirst={index === 0}
-          isLast={index === selectedAttributesArray.length - 1}
+          isLast={index === selectedOrderBys.length - 1}
           onReorderOrderBy={(direction: REORDER_DIRECTION) => reorderOrderBy(direction, index)}
         />
       ))}
 
-      <Box paddingTop={selectedAttributes.length === 0 ? 0.5 : 0}>
+      <Box paddingTop={props.orderBys.length === 0 ? 0.5 : 0}>
         <IconButton name="plus-square" tooltip="Add Order By" onClick={() => addOrderByInput()} size="xl" />
       </Box>
     </VerticalGroup>
diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index a6d9d0d..baa5628 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -172,7 +172,11 @@ export function QueryEditor(props: Props) {
           />
         </InlineField>
         <InlineField label="Order By" labelWidth={20}>
-          <OrderByRow isAdAnalytics={props.datasource.adAnalytics ? true : false} onChange={handleOrderByChange} />
+          <OrderByRow
+            isAdAnalytics={props.datasource.adAnalytics ? true : false}
+            onChange={handleOrderByChange}
+            orderBys={query.orderBy}
+          />
         </InlineField>
         <InlineField label="Limit" labelWidth={20}>
           <Input type="number" onBlur={handleLimitBlur} width={30} placeholder="No limit" />

From 4da38868d8b1c0b4ead6126c429f95853ae066f0 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Mon, 20 May 2024 17:06:43 -0300
Subject: [PATCH 03/13] make FilterByRow controlled

---
 .../src/components/FilterInput.tsx            |  34 +++--
 .../src/components/FilterRow.tsx              | 119 +++++++++---------
 .../src/components/QueryEditor.tsx            |  38 +++++-
 .../src/utils/filterUtils.ts                  |  10 ++
 4 files changed, 130 insertions(+), 71 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/FilterInput.tsx b/bitmovin-analytics-datasource/src/components/FilterInput.tsx
index ba4a747..c7eec8d 100644
--- a/bitmovin-analytics-datasource/src/components/FilterInput.tsx
+++ b/bitmovin-analytics-datasource/src/components/FilterInput.tsx
@@ -1,13 +1,31 @@
 import React from 'react';
-import { SelectableValue } from '@grafana/data';
+import type { SelectableValue } from '@grafana/data';
 import { HorizontalGroup, IconButton, Input, Select, Tooltip } from '@grafana/ui';
+import { isEmpty } from 'lodash';
 
-import { QueryAttribute } from '../types/queryAttributes';
-import { QueryAdAttribute } from '../types/queryAdAttributes';
+import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
+import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
 import { QueryFilterOperator, SELECTABLE_QUERY_FILTER_OPERATORS } from '../types/queryFilter';
+import type { FilterRowData } from './QueryEditor';
+
+const mapAttributeToSelectableValue = (
+  attribute: QueryAttribute | QueryAdAttribute,
+  isAdAnalytics: boolean
+): SelectableValue<QueryAttribute | QueryAdAttribute> => {
+  if (isAdAnalytics) {
+    return SELECTABLE_QUERY_AD_ATTRIBUTES.filter((selectableValue) => selectableValue.value === attribute);
+  } else {
+    return SELECTABLE_QUERY_ATTRIBUTES.filter((selectableValue) => selectableValue.value === attribute);
+  }
+};
+
+const mapOperatorToSelectableOperator = (operator: QueryFilterOperator): SelectableValue<QueryFilterOperator> => {
+  return SELECTABLE_QUERY_FILTER_OPERATORS.filter((selectableOperator) => selectableOperator.value === operator);
+};
 
 type Props = {
   readonly isAdAnalytics: boolean;
+  readonly filter: FilterRowData;
   readonly selectableFilterAttributes: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
   readonly onAttributeChange: (newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) => void;
   readonly onOperatorChange: (newValue: SelectableValue<QueryFilterOperator>) => void;
@@ -15,29 +33,31 @@ type Props = {
   readonly onDelete: () => void;
   readonly addFilterDisabled: boolean;
   readonly onAddFilter: () => void;
-  readonly parsingValueError: string | undefined;
 };
 
 export function FilterInput(props: Props) {
   return (
     <HorizontalGroup spacing="xs">
       <Select
+        value={mapAttributeToSelectableValue(props.filter.attribute, props.isAdAnalytics)}
         onChange={(value) => props.onAttributeChange(value)}
         options={props.selectableFilterAttributes}
         width={30}
       />
       <Select
+        value={mapOperatorToSelectableOperator(props.filter.operator)}
         onChange={(value) => props.onOperatorChange(value)}
         options={SELECTABLE_QUERY_FILTER_OPERATORS}
         width={15}
       />
       <Tooltip
-        content={props.parsingValueError ? props.parsingValueError : ''}
-        show={!!props.parsingValueError}
+        content={isEmpty(props.filter.parsingValueError) ? '' : props.filter.parsingValueError}
+        show={!isEmpty(props.filter.parsingValueError)}
         theme="error"
       >
         <Input
-          invalid={!!props.parsingValueError}
+          value={props.filter.rawFilterValue}
+          invalid={!isEmpty(props.filter.parsingValueError)}
           type="text"
           onChange={(value) => props.onValueChange(value.currentTarget.value)}
           width={30}
diff --git a/bitmovin-analytics-datasource/src/components/FilterRow.tsx b/bitmovin-analytics-datasource/src/components/FilterRow.tsx
index 0344fec..bc94324 100644
--- a/bitmovin-analytics-datasource/src/components/FilterRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/FilterRow.tsx
@@ -1,39 +1,39 @@
-import React, { useState } from 'react';
-import { difference, isEmpty } from 'lodash';
+import React from 'react';
+import { differenceWith, isEmpty } from 'lodash';
 import { SelectableValue } from '@grafana/data';
 import { Box, HorizontalGroup, IconButton, InlineLabel, VerticalGroup } from '@grafana/ui';
 
-import { QueryFilter, QueryFilterOperator, QueryFilterValue } from '../types/queryFilter';
+import { QueryFilter, QueryFilterOperator } from '../types/queryFilter';
 import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
 import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
 import { FilterInput } from './FilterInput';
 import { convertFilterValueToProperType } from '../utils/filterUtils';
-
-type Filter = {
-  selectedAttribute: SelectableValue<QueryAdAttribute | QueryAttribute>;
-  selectedOperator: SelectableValue<QueryFilterOperator>;
-  rawFilterValue: string;
-  convertedFilterValue: QueryFilterValue;
-  parsingValueError: string;
-};
+import type { FilterRowData } from './QueryEditor';
 
 const mapFilterAttributesToSelectableValue = (
-  filters: Filter[],
+  filters: FilterRowData[],
   isAdAnalytics: boolean
 ): Array<SelectableValue<QueryAttribute | QueryAdAttribute>> => {
-  const selectedAttributes = filters.map((filter) => filter.selectedAttribute);
   if (isAdAnalytics) {
-    return difference(SELECTABLE_QUERY_AD_ATTRIBUTES, selectedAttributes);
+    return differenceWith(
+      SELECTABLE_QUERY_AD_ATTRIBUTES,
+      filters,
+      (selectableValue, selectedValue) => selectableValue.value === selectedValue.attribute
+    );
   } else {
-    return difference(SELECTABLE_QUERY_ATTRIBUTES, selectedAttributes);
+    return differenceWith(
+      SELECTABLE_QUERY_ATTRIBUTES,
+      filters,
+      (selectableValue, selectedValue) => selectableValue.value === selectedValue.attribute
+    );
   }
 };
 
-const mapFiltersToQueryFilters = (filters: Filter[]): QueryFilter[] => {
+const mapFilterRowsToQueryFilters = (filters: FilterRowData[]): QueryFilter[] => {
   return filters.map((filter) => {
     return {
-      name: filter.selectedAttribute.value!,
-      operator: filter.selectedOperator.value!,
+      name: filter.attribute,
+      operator: filter.operator,
       value: filter.convertedFilterValue,
     } as QueryFilter;
   });
@@ -42,95 +42,94 @@ const mapFiltersToQueryFilters = (filters: Filter[]): QueryFilter[] => {
 type Props = {
   readonly isAdAnalytics: boolean;
   readonly onChange: (newFilters: QueryFilter[]) => void;
+  readonly onFilterRowChange: (newFilters: FilterRowData[]) => void;
+  readonly filters: FilterRowData[];
 };
 
 export function FilterRow(props: Props) {
-  const [filters, setFilters] = useState<Filter[]>([]);
-
   const addFilterInput = () => {
-    setFilters((prevState) => [
-      ...prevState,
-      {
-        selectedAttribute: {},
-        selectedOperator: {},
-        rawFilterValue: '',
-        convertedFilterValue: '',
-        parsingValueError: '',
-      } as Filter,
-    ]);
+    const newFilters = [...props.filters];
+    newFilters.push({
+      attribute: {},
+      operator: {},
+      rawFilterValue: '',
+      convertedFilterValue: '',
+      parsingValueError: '',
+    } as FilterRowData);
+    props.onFilterRowChange(newFilters);
   };
 
   const onAddFilter = (index: number) => {
-    const filter = filters[index];
+    const filter = props.filters[index];
     try {
       const convertedValue = convertFilterValueToProperType(
         filter.rawFilterValue,
-        filter.selectedAttribute.value!,
-        filter.selectedAttribute.label!,
-        filter.selectedOperator.value!,
+        filter.attribute,
+        filter.attribute,
+        filter.operator,
         props.isAdAnalytics
       );
 
-      const newFilter = { ...filter, convertedFilterValue: convertedValue, parsingValueError: '' } as Filter;
+      const newFilter = { ...filter, convertedFilterValue: convertedValue, parsingValueError: '' } as FilterRowData;
 
-      const newFilters = [...filters];
+      const newFilters = [...props.filters];
       newFilters.splice(index, 1, newFilter);
 
-      setFilters(newFilters);
+      props.onFilterRowChange(newFilters);
 
-      props.onChange(mapFiltersToQueryFilters(newFilters));
+      props.onChange(mapFilterRowsToQueryFilters(newFilters));
     } catch (e: unknown) {
       if (e instanceof Error) {
         const errorMessage = e.message;
-        const newFilter = { ...filter, parsingValueError: errorMessage } as Filter;
+        const newFilter = { ...filter, parsingValueError: errorMessage } as FilterRowData;
 
-        const newFilters = [...filters];
+        const newFilters = [...props.filters];
         newFilters.splice(index, 1, newFilter);
 
-        setFilters(newFilters);
+        props.onFilterRowChange(newFilters);
       }
     }
   };
 
   const deleteFilterInput = (index: number) => {
-    const newFilters = [...filters];
+    const newFilters = [...props.filters];
     newFilters.splice(index, 1);
 
-    setFilters(newFilters);
+    props.onFilterRowChange(newFilters);
 
-    props.onChange(mapFiltersToQueryFilters(newFilters));
+    props.onChange(mapFilterRowsToQueryFilters(newFilters));
   };
 
   const onAttributesChange = (index: number, newAttribute: SelectableValue<QueryAttribute | QueryAdAttribute>) => {
-    const filter = filters[index];
-    const newFilter = { ...filter, selectedAttribute: newAttribute } as Filter;
-    const newFilters = [...filters];
+    const filter = props.filters[index];
+    const newFilter = { ...filter, attribute: newAttribute.value } as FilterRowData;
+    const newFilters = [...props.filters];
     newFilters.splice(index, 1, newFilter);
 
-    setFilters(newFilters);
+    props.onFilterRowChange(newFilters);
   };
 
   const onOperatorsChange = (index: number, newOperator: SelectableValue<QueryFilterOperator>) => {
-    const filter = filters[index];
-    const newFilter = { ...filter, selectedOperator: newOperator } as Filter;
-    const newFilters = [...filters];
+    const filter = props.filters[index];
+    const newFilter = { ...filter, operator: newOperator.value } as FilterRowData;
+    const newFilters = [...props.filters];
     newFilters.splice(index, 1, newFilter);
 
-    setFilters(newFilters);
+    props.onFilterRowChange(newFilters);
   };
 
   const onValuesChange = (index: number, newValue: string) => {
-    const filter = filters[index];
+    const filter = props.filters[index];
     const newFilter = { ...filter, rawFilterValue: newValue };
-    const newFilters = [...filters];
+    const newFilters = [...props.filters];
     newFilters.splice(index, 1, newFilter);
 
-    setFilters(newFilters);
+    props.onFilterRowChange(newFilters);
   };
 
   return (
     <VerticalGroup>
-      {filters.length !== 0 && (
+      {props.filters.length !== 0 && (
         <HorizontalGroup spacing={'none'}>
           <InlineLabel width={30} tooltip="">
             Dimension
@@ -143,10 +142,11 @@ export function FilterRow(props: Props) {
           </InlineLabel>
         </HorizontalGroup>
       )}
-      {filters.map((filter, index, filtersArray) => (
+      {props.filters.map((filter, index, filtersArray) => (
         <FilterInput
           key={index}
           isAdAnalytics={props.isAdAnalytics}
+          filter={filter}
           selectableFilterAttributes={mapFilterAttributesToSelectableValue(filtersArray, props.isAdAnalytics)}
           onAttributeChange={(newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) =>
             onAttributesChange(index, newValue)
@@ -154,13 +154,12 @@ export function FilterRow(props: Props) {
           onOperatorChange={(newValue: SelectableValue<QueryFilterOperator>) => onOperatorsChange(index, newValue)}
           onValueChange={(newValue: string) => onValuesChange(index, newValue)}
           onDelete={() => deleteFilterInput(index)}
-          addFilterDisabled={isEmpty(filter.selectedAttribute) || isEmpty(filter.selectedOperator)}
+          addFilterDisabled={isEmpty(filter.attribute) || isEmpty(filter.operator)}
           onAddFilter={() => onAddFilter(index)}
-          parsingValueError={isEmpty(filter.parsingValueError) ? undefined : filter.parsingValueError}
         />
       ))}
 
-      <Box paddingTop={filters.length === 0 ? 0.5 : 0}>
+      <Box paddingTop={props.filters.length === 0 ? 0.5 : 0}>
         <IconButton name="plus-square" tooltip="Add Filter" onClick={() => addFilterInput()} size="xl" />
       </Box>
     </VerticalGroup>
diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index baa5628..a138a88 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -13,9 +13,10 @@ import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttri
 import { isMetric, SELECTABLE_METRICS } from '../types/metric';
 import { GroupByRow } from './GroupByRow';
 import { OrderByRow } from './OrderByRow';
-import { QueryOrderBy } from '../types/queryOrderBy';
-import { QueryFilter } from '../types/queryFilter';
+import type { QueryOrderBy } from '../types/queryOrderBy';
+import type { QueryFilter, QueryFilterOperator, QueryFilterValue } from '../types/queryFilter';
 import { FilterRow } from './FilterRow';
+import { mapFilterValueToRawFilterValue } from '../utils/filterUtils';
 
 enum LoadingState {
   Default = 'DEFAULT',
@@ -24,6 +25,14 @@ enum LoadingState {
   Error = 'ERROR',
 }
 
+export type FilterRowData = {
+  attribute: QueryAdAttribute | QueryAttribute;
+  operator: QueryFilterOperator;
+  rawFilterValue: string;
+  convertedFilterValue: QueryFilterValue;
+  parsingValueError: string;
+};
+
 type Props = QueryEditorProps<DataSource, BitmovinAnalyticsDataQuery, BitmovinDataSourceOptions>;
 
 export function QueryEditor(props: Props) {
@@ -32,6 +41,7 @@ export function QueryEditor(props: Props) {
   const [licenseErrorMessage, setLicenseErrorMessage] = useState('');
   const [isTimeSeries, setIsTimeSeries] = useState(true);
   const [isDimensionMetricSelected, setIsDimensionMetricSelected] = useState(false);
+  const [filterRows, setFilterRows] = useState<FilterRowData[]>([]);
 
   useEffect(() => {
     setLicenseLoadingState(LoadingState.Loading);
@@ -44,7 +54,18 @@ export function QueryEditor(props: Props) {
         setLicenseLoadingState(LoadingState.Error);
         setLicenseErrorMessage(e.status + ' ' + e.statusText);
       });
-  }, [props.datasource.apiKey, props.datasource.baseUrl]);
+
+    const filterRows = props.query.filters.map((filter) => {
+      return {
+        attribute: filter.name,
+        operator: filter.operator,
+        rawFilterValue: mapFilterValueToRawFilterValue(filter.value),
+        convertedFilterValue: filter.value,
+        parsingValueError: '',
+      } as FilterRowData;
+    });
+    setFilterRows(filterRows);
+  }, [props.datasource.apiKey, props.datasource.baseUrl, props.query.filters]);
 
   const query = defaults(props.query, DEFAULT_QUERY);
 
@@ -79,6 +100,10 @@ export function QueryEditor(props: Props) {
     props.onRunQuery();
   };
 
+  const handleFilterRowChange = (newFilters: FilterRowData[]) => {
+    setFilterRows(newFilters);
+  };
+
   const handleFilterChange = (newFilters: QueryFilter[]) => {
     props.onChange({ ...query, filters: newFilters });
     props.onRunQuery();
@@ -162,7 +187,12 @@ export function QueryEditor(props: Props) {
           />
         </InlineField>
         <InlineField label="Filter" labelWidth={20}>
-          <FilterRow isAdAnalytics={props.datasource.adAnalytics ? true : false} onChange={handleFilterChange} />
+          <FilterRow
+            isAdAnalytics={props.datasource.adAnalytics ? true : false}
+            onChange={handleFilterChange}
+            onFilterRowChange={handleFilterRowChange}
+            filters={filterRows}
+          />
         </InlineField>
         <InlineField label="Group By" labelWidth={20}>
           <GroupByRow
diff --git a/bitmovin-analytics-datasource/src/utils/filterUtils.ts b/bitmovin-analytics-datasource/src/utils/filterUtils.ts
index 082d490..ca3b9ed 100644
--- a/bitmovin-analytics-datasource/src/utils/filterUtils.ts
+++ b/bitmovin-analytics-datasource/src/utils/filterUtils.ts
@@ -4,6 +4,16 @@ import { QUERY_AD_ATTRIBUTES, QueryAdAttribute } from '../types/queryAdAttribute
 import { QUERY_FILTER_OPERATORS, QueryFilterOperator, QueryFilterValue } from '../types/queryFilter';
 import { QUERY_ATTRIBUTES, QueryAttribute } from '../types/queryAttributes';
 
+export const mapFilterValueToRawFilterValue = (filterValue: QueryFilterValue) => {
+  if (filterValue == null) {
+    return '';
+  } else if (Array.isArray(filterValue)) {
+    return JSON.stringify(filterValue);
+  } else {
+    return filterValue.toString();
+  }
+};
+
 const isNullFilter = (filterAttribute: QueryAttribute | QueryAdAttribute): boolean => {
   switch (filterAttribute) {
     case QUERY_ATTRIBUTES.CDN_PROVIDER:

From 58cc290c0b5b0432fbc92819d84857900fb2b9ef Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Mon, 20 May 2024 17:08:19 -0300
Subject: [PATCH 04/13] make simple selection controlled

---
 .../src/components/QueryEditor.tsx                | 15 +++++++++++----
 .../src/types/aggregations.ts                     |  4 +++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index a138a88..ca3fa05 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -1,6 +1,6 @@
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import { FieldSet, InlineField, InlineSwitch, Input, Select } from '@grafana/ui';
-import { QueryEditorProps, SelectableValue } from '@grafana/data';
+import type { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { defaults } from 'lodash';
 
 import { DataSource } from '../datasource';
@@ -162,6 +162,7 @@ export function QueryEditor(props: Props) {
           required
         >
           <Select
+            value={query.licenseKey}
             onChange={handleLicenseChange}
             width={30}
             options={selectableLicenses}
@@ -172,11 +173,17 @@ export function QueryEditor(props: Props) {
         </InlineField>
         {!isDimensionMetricSelected && (
           <InlineField label="Metric" labelWidth={20} required>
-            <Select onChange={(item) => handleAggregationChange(item)} width={30} options={SELECTABLE_AGGREGATIONS} />
+            <Select
+              value={query.aggregation}
+              onChange={(item) => handleAggregationChange(item)}
+              width={30}
+              options={SELECTABLE_AGGREGATIONS}
+            />
           </InlineField>
         )}
         <InlineField label="Dimension" labelWidth={20} required>
           <Select
+            value={query.dimension}
             onChange={handleDimensionChange}
             width={30}
             options={
@@ -209,14 +216,14 @@ export function QueryEditor(props: Props) {
           />
         </InlineField>
         <InlineField label="Limit" labelWidth={20}>
-          <Input type="number" onBlur={handleLimitBlur} width={30} placeholder="No limit" />
+          <Input value={query.limit} type="number" onBlur={handleLimitBlur} width={30} placeholder="No limit" />
         </InlineField>
         <InlineField label="Format as time series" labelWidth={20}>
           <InlineSwitch value={isTimeSeries} onChange={handleFormatAsTimeSeriesChange}></InlineSwitch>
         </InlineField>
         {isTimeSeries && renderTimeSeriesOption()}
         <InlineField label="Alias By" labelWidth={20}>
-          <Input placeholder="Naming pattern" onBlur={handleAliasByBlur} />
+          <Input value={query.aliasBy} placeholder="Naming pattern" onBlur={handleAliasByBlur} />
         </InlineField>
       </FieldSet>
     </div>
diff --git a/bitmovin-analytics-datasource/src/types/aggregations.ts b/bitmovin-analytics-datasource/src/types/aggregations.ts
index 72072ad..8c26f9f 100644
--- a/bitmovin-analytics-datasource/src/types/aggregations.ts
+++ b/bitmovin-analytics-datasource/src/types/aggregations.ts
@@ -1,6 +1,8 @@
+import { SelectableValue } from '@grafana/data';
+
 export type Aggregation = 'count' | 'sum' | 'avg' | 'min' | 'max' | 'stddev' | 'percentile' | 'variance' | 'median';
 
-export const SELECTABLE_AGGREGATIONS: Array<{ value: Aggregation; label: string }> = [
+export const SELECTABLE_AGGREGATIONS: Array<SelectableValue<Aggregation>> = [
   { value: 'count', label: 'Count' },
   { value: 'sum', label: 'Sum' },
   { value: 'avg', label: 'Avg' },

From 021267e289475f551149d564d5d43f728023e003 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Mon, 20 May 2024 17:08:37 -0300
Subject: [PATCH 05/13] fix groupBy types

---
 bitmovin-analytics-datasource/src/components/QueryEditor.tsx | 2 +-
 bitmovin-analytics-datasource/src/types/grafanaTypes.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index ca3fa05..59a82f3 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -90,7 +90,7 @@ export function QueryEditor(props: Props) {
     props.onRunQuery();
   };
 
-  const handleGroupByChange = (newGroupBys: QueryAdAttribute[] | QueryAttribute[]) => {
+  const handleGroupByChange = (newGroupBys: Array<QueryAttribute | QueryAdAttribute>) => {
     props.onChange({ ...query, groupBy: newGroupBys });
     props.onRunQuery();
   };
diff --git a/bitmovin-analytics-datasource/src/types/grafanaTypes.ts b/bitmovin-analytics-datasource/src/types/grafanaTypes.ts
index e5d3f2b..cc8665d 100644
--- a/bitmovin-analytics-datasource/src/types/grafanaTypes.ts
+++ b/bitmovin-analytics-datasource/src/types/grafanaTypes.ts
@@ -17,7 +17,7 @@ export interface BitmovinAnalyticsDataQuery extends DataQuery {
   aggregation?: Aggregation;
   metric?: Metric;
   dimension?: QueryAttribute | QueryAdAttribute;
-  groupBy: QueryAttribute[] | QueryAdAttribute[];
+  groupBy: Array<QueryAttribute | QueryAdAttribute>;
   orderBy: QueryOrderBy[];
   limit?: number;
   filters: QueryFilter[];

From 39193ad8eb33328fc05d01d4be01836bbb7f0370 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Mon, 20 May 2024 17:09:03 -0300
Subject: [PATCH 06/13] fix interval default value bug

---
 bitmovin-analytics-datasource/src/components/QueryEditor.tsx | 2 +-
 bitmovin-analytics-datasource/src/types/grafanaTypes.ts      | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index 59a82f3..7d61c10 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -39,7 +39,7 @@ export function QueryEditor(props: Props) {
   const [selectableLicenses, setSelectableLicenses] = useState<SelectableValue[]>([]);
   const [licenseLoadingState, setLicenseLoadingState] = useState<LoadingState>(LoadingState.Default);
   const [licenseErrorMessage, setLicenseErrorMessage] = useState('');
-  const [isTimeSeries, setIsTimeSeries] = useState(true);
+  const [isTimeSeries, setIsTimeSeries] = useState(!!props.query.interval);
   const [isDimensionMetricSelected, setIsDimensionMetricSelected] = useState(false);
   const [filterRows, setFilterRows] = useState<FilterRowData[]>([]);
 
diff --git a/bitmovin-analytics-datasource/src/types/grafanaTypes.ts b/bitmovin-analytics-datasource/src/types/grafanaTypes.ts
index cc8665d..045ec5d 100644
--- a/bitmovin-analytics-datasource/src/types/grafanaTypes.ts
+++ b/bitmovin-analytics-datasource/src/types/grafanaTypes.ts
@@ -26,7 +26,6 @@ export interface BitmovinAnalyticsDataQuery extends DataQuery {
 
 export const DEFAULT_QUERY: Partial<BitmovinAnalyticsDataQuery> = {
   licenseKey: '',
-  interval: 'AUTO',
   orderBy: [],
   groupBy: [],
   filters: [],

From 72d1ebdc16c687d055293c22350af91278f9cfaf Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Wed, 5 Jun 2024 11:34:02 -0300
Subject: [PATCH 07/13] rename filterRow prop

---
 bitmovin-analytics-datasource/src/components/FilterRow.tsx  | 6 +++---
 .../src/components/QueryEditor.tsx                          | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/FilterRow.tsx b/bitmovin-analytics-datasource/src/components/FilterRow.tsx
index bc94324..da6cfa5 100644
--- a/bitmovin-analytics-datasource/src/components/FilterRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/FilterRow.tsx
@@ -41,7 +41,7 @@ const mapFilterRowsToQueryFilters = (filters: FilterRowData[]): QueryFilter[] =>
 
 type Props = {
   readonly isAdAnalytics: boolean;
-  readonly onChange: (newFilters: QueryFilter[]) => void;
+  readonly onQueryFilterChange: (newFilters: QueryFilter[]) => void;
   readonly onFilterRowChange: (newFilters: FilterRowData[]) => void;
   readonly filters: FilterRowData[];
 };
@@ -77,7 +77,7 @@ export function FilterRow(props: Props) {
 
       props.onFilterRowChange(newFilters);
 
-      props.onChange(mapFilterRowsToQueryFilters(newFilters));
+      props.onQueryFilterChange(mapFilterRowsToQueryFilters(newFilters));
     } catch (e: unknown) {
       if (e instanceof Error) {
         const errorMessage = e.message;
@@ -97,7 +97,7 @@ export function FilterRow(props: Props) {
 
     props.onFilterRowChange(newFilters);
 
-    props.onChange(mapFilterRowsToQueryFilters(newFilters));
+    props.onQueryFilterChange(mapFilterRowsToQueryFilters(newFilters));
   };
 
   const onAttributesChange = (index: number, newAttribute: SelectableValue<QueryAttribute | QueryAdAttribute>) => {
diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index 7d61c10..c2c2ea8 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -104,7 +104,7 @@ export function QueryEditor(props: Props) {
     setFilterRows(newFilters);
   };
 
-  const handleFilterChange = (newFilters: QueryFilter[]) => {
+  const handleQueryFilterChange = (newFilters: QueryFilter[]) => {
     props.onChange({ ...query, filters: newFilters });
     props.onRunQuery();
   };
@@ -196,7 +196,7 @@ export function QueryEditor(props: Props) {
         <InlineField label="Filter" labelWidth={20}>
           <FilterRow
             isAdAnalytics={props.datasource.adAnalytics ? true : false}
-            onChange={handleFilterChange}
+            onQueryFilterChange={handleQueryFilterChange}
             onFilterRowChange={handleFilterRowChange}
             filters={filterRows}
           />

From 26d00ad59e04f95b4b301f95702f4104e7ab5544 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Wed, 5 Jun 2024 11:34:10 -0300
Subject: [PATCH 08/13] delete TODOs

---
 bitmovin-analytics-datasource/src/components/GroupByRow.tsx | 1 -
 bitmovin-analytics-datasource/src/components/OrderByRow.tsx | 2 --
 2 files changed, 3 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
index 97e8b6e..e90ba1e 100644
--- a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
@@ -71,7 +71,6 @@ export function GroupByRow(props: Props) {
 
   const addGroupByInput = () => {
     const newDefaultSelectedValue = getSelectableGroupByOptions(props.groupBys, props.isAdAnalytics)[0].value!;
-    //TODOMY decide on whats the best approach here with the new selected Value, it shouldn't run when adding a new default value, or should it?
     props.onChange([...props.groupBys, newDefaultSelectedValue]);
   };
 
diff --git a/bitmovin-analytics-datasource/src/components/OrderByRow.tsx b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
index 66e5cd3..9708168 100644
--- a/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
@@ -9,7 +9,6 @@ import type { QueryOrderBy, QuerySortOrder } from '../types/queryOrderBy';
 import { OrderByInput } from './OrderByInput';
 import { REORDER_DIRECTION } from './GroupByInput';
 
-//TODOMY should the selectable not be only available from the Group By attributes?
 const getSelectableOrderByOptions = (
   selectedOrderBys: QueryOrderBy[],
   isAdAnalytics: boolean
@@ -84,7 +83,6 @@ export function OrderByRow(props: Props) {
 
   const addOrderByInput = () => {
     const newDefaultSelectedValue = getSelectableOrderByOptions(props.orderBys, props.isAdAnalytics)[0].value!;
-    //TODOMY decide on whats the best approach here with the new selected Value, it shouldn't run when adding a new default value, or should it?
     props.onChange([...props.orderBys, { name: newDefaultSelectedValue, order: 'ASC' }]);
   };
 

From dc691b25f11a052ee2f9b997b4b58778064db44b Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 6 Jun 2024 08:07:05 -0300
Subject: [PATCH 09/13] split useEffect and useMemo for isMetricSelected

---
 .../src/components/QueryEditor.tsx               | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index c2c2ea8..c6d9358 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { FieldSet, InlineField, InlineSwitch, Input, Select } from '@grafana/ui';
 import type { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { defaults } from 'lodash';
@@ -40,8 +40,10 @@ export function QueryEditor(props: Props) {
   const [licenseLoadingState, setLicenseLoadingState] = useState<LoadingState>(LoadingState.Default);
   const [licenseErrorMessage, setLicenseErrorMessage] = useState('');
   const [isTimeSeries, setIsTimeSeries] = useState(!!props.query.interval);
-  const [isDimensionMetricSelected, setIsDimensionMetricSelected] = useState(false);
   const [filterRows, setFilterRows] = useState<FilterRowData[]>([]);
+  const isDimensionMetricSelected = useMemo(() => {
+    return props.query.metric != undefined;
+  }, [props.query.metric]);
 
   useEffect(() => {
     setLicenseLoadingState(LoadingState.Loading);
@@ -54,7 +56,9 @@ export function QueryEditor(props: Props) {
         setLicenseLoadingState(LoadingState.Error);
         setLicenseErrorMessage(e.status + ' ' + e.statusText);
       });
+  }, [props.datasource.apiKey, props.datasource.baseUrl]);
 
+  useEffect(() => {
     const filterRows = props.query.filters.map((filter) => {
       return {
         attribute: filter.name,
@@ -65,7 +69,7 @@ export function QueryEditor(props: Props) {
       } as FilterRowData;
     });
     setFilterRows(filterRows);
-  }, [props.datasource.apiKey, props.datasource.baseUrl, props.query.filters]);
+  }, [props.query.filters]);
 
   const query = defaults(props.query, DEFAULT_QUERY);
 
@@ -81,11 +85,9 @@ export function QueryEditor(props: Props) {
 
   const handleDimensionChange = (item: SelectableValue) => {
     if (isMetric(item.value)) {
-      setIsDimensionMetricSelected(true);
       props.onChange({ ...query, aggregation: undefined, dimension: undefined, metric: item.value });
     } else {
-      setIsDimensionMetricSelected(false);
-      props.onChange({ ...query, dimension: item.value });
+      props.onChange({ ...query, dimension: item.value, metric: undefined });
     }
     props.onRunQuery();
   };
@@ -183,7 +185,7 @@ export function QueryEditor(props: Props) {
         )}
         <InlineField label="Dimension" labelWidth={20} required>
           <Select
-            value={query.dimension}
+            value={query.dimension || query.metric}
             onChange={handleDimensionChange}
             width={30}
             options={

From 684ac2cc69d134683b3c566602fa398a86d17090 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 6 Jun 2024 08:16:26 -0300
Subject: [PATCH 10/13] lint

---
 bitmovin-analytics-datasource/src/components/QueryEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index c6d9358..5702e8f 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -42,7 +42,7 @@ export function QueryEditor(props: Props) {
   const [isTimeSeries, setIsTimeSeries] = useState(!!props.query.interval);
   const [filterRows, setFilterRows] = useState<FilterRowData[]>([]);
   const isDimensionMetricSelected = useMemo(() => {
-    return props.query.metric != undefined;
+    return props.query.metric !== undefined;
   }, [props.query.metric]);
 
   useEffect(() => {

From d7a81635bb8592143af03aced31cea19581a5a08 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Fri, 7 Jun 2024 11:35:20 -0300
Subject: [PATCH 11/13] refactor FilterRow and QueryEditor to hold UI related
 Row data as local state

---
 .../src/components/FilterInput.tsx            |  17 +--
 .../src/components/FilterRow.tsx              | 113 +++++++++++-------
 .../src/components/QueryEditor.tsx            |  33 +----
 .../src/utils/filterUtils.ts                  |   7 +-
 4 files changed, 86 insertions(+), 84 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/FilterInput.tsx b/bitmovin-analytics-datasource/src/components/FilterInput.tsx
index c7eec8d..dcd7c36 100644
--- a/bitmovin-analytics-datasource/src/components/FilterInput.tsx
+++ b/bitmovin-analytics-datasource/src/components/FilterInput.tsx
@@ -6,7 +6,7 @@ import { isEmpty } from 'lodash';
 import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
 import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
 import { QueryFilterOperator, SELECTABLE_QUERY_FILTER_OPERATORS } from '../types/queryFilter';
-import type { FilterRowData } from './QueryEditor';
+import { FilterRowData } from './FilterRow';
 
 const mapAttributeToSelectableValue = (
   attribute: QueryAttribute | QueryAdAttribute,
@@ -31,16 +31,19 @@ type Props = {
   readonly onOperatorChange: (newValue: SelectableValue<QueryFilterOperator>) => void;
   readonly onValueChange: (newValue: string) => void;
   readonly onDelete: () => void;
-  readonly addFilterDisabled: boolean;
-  readonly onAddFilter: () => void;
+  readonly onSaveFilter: () => void;
 };
 
 export function FilterInput(props: Props) {
   return (
     <HorizontalGroup spacing="xs">
       <Select
-        value={mapAttributeToSelectableValue(props.filter.attribute, props.isAdAnalytics)}
-        onChange={(value) => props.onAttributeChange(value)}
+        value={
+          props.filter.attribute
+            ? mapAttributeToSelectableValue(props.filter.attribute, props.isAdAnalytics)
+            : undefined
+        }
+        onChange={(selectableValue) => props.onAttributeChange(selectableValue)}
         options={props.selectableFilterAttributes}
         width={30}
       />
@@ -65,11 +68,11 @@ export function FilterInput(props: Props) {
       </Tooltip>
       <IconButton
         tooltip="Add Filter"
-        onClick={props.onAddFilter}
+        onClick={props.onSaveFilter}
         name="check"
         size="xl"
         variant="primary"
-        disabled={props.addFilterDisabled}
+        disabled={isEmpty(props.filter.attribute) || isEmpty(props.filter.operator)}
       />
       <IconButton tooltip="Delete Filter" name="trash-alt" onClick={props.onDelete} size="lg" variant="destructive" />
     </HorizontalGroup>
diff --git a/bitmovin-analytics-datasource/src/components/FilterRow.tsx b/bitmovin-analytics-datasource/src/components/FilterRow.tsx
index da6cfa5..fc337cf 100644
--- a/bitmovin-analytics-datasource/src/components/FilterRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/FilterRow.tsx
@@ -1,14 +1,21 @@
-import React from 'react';
-import { differenceWith, isEmpty } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { differenceWith } from 'lodash';
 import { SelectableValue } from '@grafana/data';
 import { Box, HorizontalGroup, IconButton, InlineLabel, VerticalGroup } from '@grafana/ui';
 
-import { QueryFilter, QueryFilterOperator } from '../types/queryFilter';
+import { QueryFilter, QueryFilterOperator, QueryFilterValue } from '../types/queryFilter';
 import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
 import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
 import { FilterInput } from './FilterInput';
-import { convertFilterValueToProperType } from '../utils/filterUtils';
-import type { FilterRowData } from './QueryEditor';
+import { convertFilterValueToProperType, mapQueryFilterValueToRawFilterValue } from '../utils/filterUtils';
+
+export type FilterRowData = {
+  attribute: QueryAdAttribute | QueryAttribute | undefined;
+  operator: QueryFilterOperator | undefined;
+  rawFilterValue: string;
+  convertedFilterValue: QueryFilterValue;
+  parsingValueError: string;
+};
 
 const mapFilterAttributesToSelectableValue = (
   filters: FilterRowData[],
@@ -32,104 +39,119 @@ const mapFilterAttributesToSelectableValue = (
 const mapFilterRowsToQueryFilters = (filters: FilterRowData[]): QueryFilter[] => {
   return filters.map((filter) => {
     return {
-      name: filter.attribute,
-      operator: filter.operator,
+      name: filter.attribute!,
+      operator: filter.operator!,
       value: filter.convertedFilterValue,
-    } as QueryFilter;
+    };
   });
 };
 
 type Props = {
   readonly isAdAnalytics: boolean;
   readonly onQueryFilterChange: (newFilters: QueryFilter[]) => void;
-  readonly onFilterRowChange: (newFilters: FilterRowData[]) => void;
-  readonly filters: FilterRowData[];
+  readonly filters: QueryFilter[];
 };
 
 export function FilterRow(props: Props) {
+  const [filterInputs, setFilterInputs] = useState<FilterRowData[]>([]);
+
+  /** Map QueryFilters to FilterRowData */
+  useEffect(() => {
+    const filterRows = props.filters.map((filter) => {
+      return {
+        attribute: filter.name,
+        operator: filter.operator,
+        rawFilterValue: mapQueryFilterValueToRawFilterValue(filter.value),
+        convertedFilterValue: filter.value,
+        parsingValueError: '',
+      };
+    });
+    setFilterInputs(filterRows);
+  }, [props.filters]);
+
   const addFilterInput = () => {
-    const newFilters = [...props.filters];
-    newFilters.push({
-      attribute: {},
-      operator: {},
+    const newFilterInputs = [...filterInputs];
+    newFilterInputs.push({
+      attribute: undefined,
+      operator: undefined,
       rawFilterValue: '',
       convertedFilterValue: '',
       parsingValueError: '',
-    } as FilterRowData);
-    props.onFilterRowChange(newFilters);
+    });
+    setFilterInputs(newFilterInputs);
   };
 
-  const onAddFilter = (index: number) => {
-    const filter = props.filters[index];
+  const onSaveFilter = (index: number) => {
+    const filter = filterInputs[index];
     try {
       const convertedValue = convertFilterValueToProperType(
         filter.rawFilterValue,
-        filter.attribute,
-        filter.attribute,
-        filter.operator,
+        filter.attribute!,
+        filter.attribute!,
+        filter.operator!,
         props.isAdAnalytics
       );
 
-      const newFilter = { ...filter, convertedFilterValue: convertedValue, parsingValueError: '' } as FilterRowData;
+      const newFilter: FilterRowData = { ...filter, convertedFilterValue: convertedValue, parsingValueError: '' };
 
-      const newFilters = [...props.filters];
+      const newFilters = [...filterInputs];
       newFilters.splice(index, 1, newFilter);
 
-      props.onFilterRowChange(newFilters);
+      setFilterInputs(filterInputs);
 
       props.onQueryFilterChange(mapFilterRowsToQueryFilters(newFilters));
     } catch (e: unknown) {
       if (e instanceof Error) {
         const errorMessage = e.message;
-        const newFilter = { ...filter, parsingValueError: errorMessage } as FilterRowData;
+        const newFilter: FilterRowData = { ...filter, parsingValueError: errorMessage };
 
-        const newFilters = [...props.filters];
+        const newFilters = [...filterInputs];
         newFilters.splice(index, 1, newFilter);
 
-        props.onFilterRowChange(newFilters);
+        setFilterInputs(newFilters);
       }
     }
   };
 
   const deleteFilterInput = (index: number) => {
-    const newFilters = [...props.filters];
+    const newFilters = [...filterInputs];
     newFilters.splice(index, 1);
 
-    props.onFilterRowChange(newFilters);
+    setFilterInputs(newFilters);
 
     props.onQueryFilterChange(mapFilterRowsToQueryFilters(newFilters));
   };
 
   const onAttributesChange = (index: number, newAttribute: SelectableValue<QueryAttribute | QueryAdAttribute>) => {
-    const filter = props.filters[index];
-    const newFilter = { ...filter, attribute: newAttribute.value } as FilterRowData;
-    const newFilters = [...props.filters];
+    const filter = filterInputs[index];
+    const newFilter: FilterRowData = { ...filter, attribute: newAttribute.value! };
+    const newFilters = [...filterInputs];
     newFilters.splice(index, 1, newFilter);
 
-    props.onFilterRowChange(newFilters);
+    setFilterInputs(newFilters);
   };
 
   const onOperatorsChange = (index: number, newOperator: SelectableValue<QueryFilterOperator>) => {
-    const filter = props.filters[index];
-    const newFilter = { ...filter, operator: newOperator.value } as FilterRowData;
-    const newFilters = [...props.filters];
+    const filter = filterInputs[index];
+    const newFilter: FilterRowData = { ...filter, operator: newOperator.value! };
+    const newFilters = [...filterInputs];
     newFilters.splice(index, 1, newFilter);
 
-    props.onFilterRowChange(newFilters);
+    setFilterInputs(newFilters);
   };
 
   const onValuesChange = (index: number, newValue: string) => {
-    const filter = props.filters[index];
-    const newFilter = { ...filter, rawFilterValue: newValue };
-    const newFilters = [...props.filters];
+    const filter = filterInputs[index];
+    const newFilter: FilterRowData = { ...filter, rawFilterValue: newValue };
+    const newFilters = [...filterInputs];
     newFilters.splice(index, 1, newFilter);
 
-    props.onFilterRowChange(newFilters);
+    setFilterInputs(newFilters);
   };
 
   return (
     <VerticalGroup>
-      {props.filters.length !== 0 && (
+      {filterInputs.length > 0 && (
         <HorizontalGroup spacing={'none'}>
           <InlineLabel width={30} tooltip="">
             Dimension
@@ -142,7 +164,7 @@ export function FilterRow(props: Props) {
           </InlineLabel>
         </HorizontalGroup>
       )}
-      {props.filters.map((filter, index, filtersArray) => (
+      {filterInputs.map((filter, index, filtersArray) => (
         <FilterInput
           key={index}
           isAdAnalytics={props.isAdAnalytics}
@@ -154,12 +176,11 @@ export function FilterRow(props: Props) {
           onOperatorChange={(newValue: SelectableValue<QueryFilterOperator>) => onOperatorsChange(index, newValue)}
           onValueChange={(newValue: string) => onValuesChange(index, newValue)}
           onDelete={() => deleteFilterInput(index)}
-          addFilterDisabled={isEmpty(filter.attribute) || isEmpty(filter.operator)}
-          onAddFilter={() => onAddFilter(index)}
+          onSaveFilter={() => onSaveFilter(index)}
         />
       ))}
 
-      <Box paddingTop={props.filters.length === 0 ? 0.5 : 0}>
+      <Box paddingTop={filterInputs.length === 0 ? 0.5 : 0}>
         <IconButton name="plus-square" tooltip="Add Filter" onClick={() => addFilterInput()} size="xl" />
       </Box>
     </VerticalGroup>
diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index 5702e8f..a208f84 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -14,9 +14,8 @@ import { isMetric, SELECTABLE_METRICS } from '../types/metric';
 import { GroupByRow } from './GroupByRow';
 import { OrderByRow } from './OrderByRow';
 import type { QueryOrderBy } from '../types/queryOrderBy';
-import type { QueryFilter, QueryFilterOperator, QueryFilterValue } from '../types/queryFilter';
+import type { QueryFilter } from '../types/queryFilter';
 import { FilterRow } from './FilterRow';
-import { mapFilterValueToRawFilterValue } from '../utils/filterUtils';
 
 enum LoadingState {
   Default = 'DEFAULT',
@@ -25,14 +24,6 @@ enum LoadingState {
   Error = 'ERROR',
 }
 
-export type FilterRowData = {
-  attribute: QueryAdAttribute | QueryAttribute;
-  operator: QueryFilterOperator;
-  rawFilterValue: string;
-  convertedFilterValue: QueryFilterValue;
-  parsingValueError: string;
-};
-
 type Props = QueryEditorProps<DataSource, BitmovinAnalyticsDataQuery, BitmovinDataSourceOptions>;
 
 export function QueryEditor(props: Props) {
@@ -40,11 +31,11 @@ export function QueryEditor(props: Props) {
   const [licenseLoadingState, setLicenseLoadingState] = useState<LoadingState>(LoadingState.Default);
   const [licenseErrorMessage, setLicenseErrorMessage] = useState('');
   const [isTimeSeries, setIsTimeSeries] = useState(!!props.query.interval);
-  const [filterRows, setFilterRows] = useState<FilterRowData[]>([]);
   const isDimensionMetricSelected = useMemo(() => {
     return props.query.metric !== undefined;
   }, [props.query.metric]);
 
+  /** Fetch Licenses */
   useEffect(() => {
     setLicenseLoadingState(LoadingState.Loading);
     fetchLicenses(props.datasource.apiKey, props.datasource.baseUrl)
@@ -58,19 +49,6 @@ export function QueryEditor(props: Props) {
       });
   }, [props.datasource.apiKey, props.datasource.baseUrl]);
 
-  useEffect(() => {
-    const filterRows = props.query.filters.map((filter) => {
-      return {
-        attribute: filter.name,
-        operator: filter.operator,
-        rawFilterValue: mapFilterValueToRawFilterValue(filter.value),
-        convertedFilterValue: filter.value,
-        parsingValueError: '',
-      } as FilterRowData;
-    });
-    setFilterRows(filterRows);
-  }, [props.query.filters]);
-
   const query = defaults(props.query, DEFAULT_QUERY);
 
   const handleLicenseChange = (item: SelectableValue) => {
@@ -102,10 +80,6 @@ export function QueryEditor(props: Props) {
     props.onRunQuery();
   };
 
-  const handleFilterRowChange = (newFilters: FilterRowData[]) => {
-    setFilterRows(newFilters);
-  };
-
   const handleQueryFilterChange = (newFilters: QueryFilter[]) => {
     props.onChange({ ...query, filters: newFilters });
     props.onRunQuery();
@@ -199,8 +173,7 @@ export function QueryEditor(props: Props) {
           <FilterRow
             isAdAnalytics={props.datasource.adAnalytics ? true : false}
             onQueryFilterChange={handleQueryFilterChange}
-            onFilterRowChange={handleFilterRowChange}
-            filters={filterRows}
+            filters={props.query.filters}
           />
         </InlineField>
         <InlineField label="Group By" labelWidth={20}>
diff --git a/bitmovin-analytics-datasource/src/utils/filterUtils.ts b/bitmovin-analytics-datasource/src/utils/filterUtils.ts
index ca3b9ed..3c20fc0 100644
--- a/bitmovin-analytics-datasource/src/utils/filterUtils.ts
+++ b/bitmovin-analytics-datasource/src/utils/filterUtils.ts
@@ -4,7 +4,12 @@ import { QUERY_AD_ATTRIBUTES, QueryAdAttribute } from '../types/queryAdAttribute
 import { QUERY_FILTER_OPERATORS, QueryFilterOperator, QueryFilterValue } from '../types/queryFilter';
 import { QUERY_ATTRIBUTES, QueryAttribute } from '../types/queryAttributes';
 
-export const mapFilterValueToRawFilterValue = (filterValue: QueryFilterValue) => {
+/**
+ * Convert QueryFilter value to string to correctly display the value in the Input Element.
+ * @param {QueryFilterValue} filterValue the filter value with the from our API expected correct type
+ * @return {string} the rawFilterValue as a string
+ * */
+export const mapQueryFilterValueToRawFilterValue = (filterValue: QueryFilterValue): string => {
   if (filterValue == null) {
     return '';
   } else if (Array.isArray(filterValue)) {

From 70a7b029e6026bcd04af4bf6c896fc8c83e8266b Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Fri, 7 Jun 2024 11:35:52 -0300
Subject: [PATCH 12/13] implement PR feedback

---
 .../src/components/FilterInput.tsx                          | 6 +++---
 .../src/components/GroupByInput.tsx                         | 2 +-
 .../src/components/OrderByInput.tsx                         | 2 +-
 bitmovin-analytics-datasource/src/components/OrderByRow.tsx | 4 ++--
 bitmovin-analytics-datasource/src/types/aggregations.ts     | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/FilterInput.tsx b/bitmovin-analytics-datasource/src/components/FilterInput.tsx
index dcd7c36..dc34f7b 100644
--- a/bitmovin-analytics-datasource/src/components/FilterInput.tsx
+++ b/bitmovin-analytics-datasource/src/components/FilterInput.tsx
@@ -48,8 +48,8 @@ export function FilterInput(props: Props) {
         width={30}
       />
       <Select
-        value={mapOperatorToSelectableOperator(props.filter.operator)}
-        onChange={(value) => props.onOperatorChange(value)}
+        value={props.filter.operator ? mapOperatorToSelectableOperator(props.filter.operator) : undefined}
+        onChange={(selectableValue) => props.onOperatorChange(selectableValue)}
         options={SELECTABLE_QUERY_FILTER_OPERATORS}
         width={15}
       />
@@ -62,7 +62,7 @@ export function FilterInput(props: Props) {
           value={props.filter.rawFilterValue}
           invalid={!isEmpty(props.filter.parsingValueError)}
           type="text"
-          onChange={(value) => props.onValueChange(value.currentTarget.value)}
+          onChange={(input) => props.onValueChange(input.currentTarget.value)}
           width={30}
         />
       </Tooltip>
diff --git a/bitmovin-analytics-datasource/src/components/GroupByInput.tsx b/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
index 8d2670d..be3e2ef 100644
--- a/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
+++ b/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
@@ -26,7 +26,7 @@ export function GroupByInput(props: Props) {
     <HorizontalGroup>
       <Select
         value={isEmpty(props.groupBy) ? undefined : props.groupBy}
-        onChange={(value) => props.onChange(value.value!)}
+        onChange={(selectableValue) => props.onChange(selectableValue.value!)}
         options={props.selectableGroupBys}
         width={30}
       />
diff --git a/bitmovin-analytics-datasource/src/components/OrderByInput.tsx b/bitmovin-analytics-datasource/src/components/OrderByInput.tsx
index 04d47d7..3bc2590 100644
--- a/bitmovin-analytics-datasource/src/components/OrderByInput.tsx
+++ b/bitmovin-analytics-datasource/src/components/OrderByInput.tsx
@@ -31,7 +31,7 @@ export function OrderByInput(props: Props) {
     <HorizontalGroup spacing="xs">
       <Select
         value={isEmpty(props.attribute) ? undefined : props.attribute}
-        onChange={(value) => props.onAttributeChange(value)}
+        onChange={(selectableValue) => props.onAttributeChange(selectableValue)}
         options={props.selectableOrderByAttributes}
         width={30}
       />
diff --git a/bitmovin-analytics-datasource/src/components/OrderByRow.tsx b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
index 9708168..6e6404d 100644
--- a/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
@@ -55,7 +55,7 @@ export function OrderByRow(props: Props) {
 
   const onAttributesChange = (index: number, newAttribute: SelectableValue<QueryAttribute | QueryAdAttribute>) => {
     const newOrderBys = [...props.orderBys];
-    const newOrderBy = { name: newAttribute.value, order: newOrderBys[index].order } as QueryOrderBy;
+    const newOrderBy: QueryOrderBy = { name: newAttribute.value!, order: newOrderBys[index].order };
 
     newOrderBys.splice(index, 1, newOrderBy);
 
@@ -64,7 +64,7 @@ export function OrderByRow(props: Props) {
 
   const onSortOrdersChange = (index: number, newSortOrder: QuerySortOrder) => {
     const newOrderBys = [...props.orderBys];
-    const newOrderBy = { name: newOrderBys[index].name, order: newSortOrder } as QueryOrderBy;
+    const newOrderBy: QueryOrderBy = { name: newOrderBys[index].name, order: newSortOrder };
 
     newOrderBys.splice(index, 1, newOrderBy);
 
diff --git a/bitmovin-analytics-datasource/src/types/aggregations.ts b/bitmovin-analytics-datasource/src/types/aggregations.ts
index 8c26f9f..4f98f5e 100644
--- a/bitmovin-analytics-datasource/src/types/aggregations.ts
+++ b/bitmovin-analytics-datasource/src/types/aggregations.ts
@@ -1,4 +1,4 @@
-import { SelectableValue } from '@grafana/data';
+import type { SelectableValue } from '@grafana/data';
 
 export type Aggregation = 'count' | 'sum' | 'avg' | 'min' | 'max' | 'stddev' | 'percentile' | 'variance' | 'median';
 

From 08606848bcad0f0c2ff4825580235662d49b794c Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Fri, 7 Jun 2024 11:45:31 -0300
Subject: [PATCH 13/13] add unit tests for mapQueryFilterValueToRawFilterValue

---
 .../src/utils/filterUtils.test.ts             | 52 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/bitmovin-analytics-datasource/src/utils/filterUtils.test.ts b/bitmovin-analytics-datasource/src/utils/filterUtils.test.ts
index bafe87c..cfaaad7 100644
--- a/bitmovin-analytics-datasource/src/utils/filterUtils.test.ts
+++ b/bitmovin-analytics-datasource/src/utils/filterUtils.test.ts
@@ -1,4 +1,4 @@
-import { convertFilterValueToProperType } from './filterUtils';
+import { convertFilterValueToProperType, mapQueryFilterValueToRawFilterValue } from './filterUtils';
 import { QUERY_ATTRIBUTES } from '../types/queryAttributes';
 import { QUERY_FILTER_OPERATORS } from '../types/queryFilter';
 import { QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
@@ -177,3 +177,53 @@ describe('convertFilterValueToProperType', () => {
     ).toThrow(new Error(`Couldn't parse filter for Error Percentage, please provide data as a number`));
   });
 });
+
+describe('mapQueryFilterValueToRawFilterValue', () => {
+  it('should return empty string for null filter value', () => {
+    //arrange && act
+    const result = mapQueryFilterValueToRawFilterValue(null);
+
+    //assert
+    expect(result).toEqual('');
+  });
+
+  it('should return boolean as string', () => {
+    //arrange && act
+    const result = mapQueryFilterValueToRawFilterValue(true);
+
+    //assert
+    expect(result).toEqual('true');
+  });
+
+  it('should return integer as string', () => {
+    //arrange && act
+    const result = mapQueryFilterValueToRawFilterValue(23);
+
+    //assert
+    expect(result).toEqual('23');
+  });
+
+  it('should return float as string', () => {
+    //arrange && act
+    const result = mapQueryFilterValueToRawFilterValue(23.5);
+
+    //assert
+    expect(result).toEqual('23.5');
+  });
+
+  it('should return string as string', () => {
+    //arrange && act
+    const result = mapQueryFilterValueToRawFilterValue('de');
+
+    //assert
+    expect(result).toEqual('de');
+  });
+
+  it('should return string array as string', () => {
+    //arrange && act
+    const result = mapQueryFilterValueToRawFilterValue(['Firefox', 'Opera']);
+
+    //assert
+    expect(result).toEqual('["Firefox","Opera"]');
+  });
+});