From 82ce2a64d3417519d2290968af163ec16695735c Mon Sep 17 00:00:00 2001
From: jacovinus <jacovinus@gmail.com>
Date: Wed, 14 Jun 2023 00:44:44 +0200
Subject: [PATCH] fix: #337 / labels selection

---
 .../components/LabelsSelector/ValuesList.tsx  | 52 +++++++------------
 src/hooks/useLabels.ts                        |  2 +-
 2 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/src/components/LabelBrowser/components/LabelsSelector/ValuesList.tsx b/src/components/LabelBrowser/components/LabelsSelector/ValuesList.tsx
index f695b1d6..5aeec91c 100644
--- a/src/components/LabelBrowser/components/LabelsSelector/ValuesList.tsx
+++ b/src/components/LabelBrowser/components/LabelsSelector/ValuesList.tsx
@@ -120,11 +120,10 @@ const ValuesList: React.FC<ValuesListProps> = (props) => {
     const dispatch = useDispatch();
 
     const { name, data, labelsSelected, label, queries } = props;
-    const { dataSourceId, start, stop } = data;
+    const { dataSourceId, start, stop, labels: propsLabels } = data;
 
     const [filterState, setFilterState] = useState("");
 
-    // get values hook
     const { response: labelValuesResponse, loading }: any = useLabelValues(
         dataSourceId,
         label,
@@ -174,21 +173,17 @@ const ValuesList: React.FC<ValuesListProps> = (props) => {
     }, [props.data.labels]);
 
     const resp = useMemo(() => {
-       
-
         if (labelValuesResponse?.data?.data?.length > 0) {
             const labelFromResponse = data?.labels?.find(
                 (l: any) => l.name === label
             );
-    
+
             const values = labelFromResponse?.values;
-            const valuesMap = new Map(); 
+            const valuesMap = new Map();
 
             values?.forEach((value: any) => {
-                valuesMap.set(value.name, {...value,label});
+                valuesMap.set(value.name, { ...value, label });
             });
-   
-
             return labelValuesResponse?.data?.data?.map((val: any) => ({
                 label,
                 name: val,
@@ -266,32 +261,26 @@ const ValuesList: React.FC<ValuesListProps> = (props) => {
         }
     };
 
-    const onValueClick = (val: any, isAll = false) => {
+    const onValueClick = (val: any) => {
         let initialValues: any = [];
-        if (isAll) {
-            setValsSelection([]);
-        }
         if (valsSelection.length > 0) {
             initialValues = onValueFilter(val, valsSelection);
             if (val.type === "metrics") {
                 setValuesState((prev: any) => {
                     const found = prev.some((s: any) => s.id === val.id);
-
+                    let prevCp = [...prev];
                     if (found) {
-                        return prev.map((m: any) => {
-                            if (m.id === val.id) {
-                                return { ...m, selected: false };
-                            }
-                            return { ...m, selected: true };
+                        return prevCp?.map((m: any) => {
+                            return m.id === val.id
+                                ? { ...m, selected: false }
+                                : { ...m, selected: true };
                         });
                     }
                 });
             }
-        } else if (!isAll) {
-            initialValues = [...initialValues, { ...val }];
         }
 
-        let propsLabels = JSONClone(props.data.labels) || [];
+        initialValues = [...initialValues, { ...val }];
 
         let labelsMod: any = [];
 
@@ -308,18 +297,18 @@ const ValuesList: React.FC<ValuesListProps> = (props) => {
             ];
         } else {
             if (propsLabels.some((s: any) => s.name === label)) {
-                for (let LCP of propsLabels) {
-                    if (LCP.name === label) {
-                        LCP = {
+                for (let propsLabel of propsLabels) {
+                    if (propsLabel.name === label) {
+                        propsLabel = {
                             name: label,
                             selected:
                                 labelsSelected.includes(label) &&
                                 initialValues.length > 0,
                             values: [...initialValues],
                         };
-                        labelsMod.push(LCP);
+                        labelsMod.push(propsLabel);
                     } else {
-                        labelsMod.push(LCP);
+                        labelsMod.push(propsLabel);
                     }
                 }
             } else {
@@ -338,8 +327,7 @@ const ValuesList: React.FC<ValuesListProps> = (props) => {
 
         const finalLabels = labelsSelected?.map((m: any) => {
             if (labelsMod.some((s: any) => s.name === m)) {
-                let found = labelsMod.find((f: any) => f.name === m);
-                return found;
+                return labelsMod.find((f: any) => f.name === m);
             } else {
                 return { name: m, selected: true, values: [] };
             }
@@ -362,13 +350,13 @@ const ValuesList: React.FC<ValuesListProps> = (props) => {
             setFilterState((prev) => value);
 
             if (e !== "") {
-                setFilterValuesState((prev: any) =>
+                setFilterValuesState(() =>
                     valuesState.filter((f: any) =>
                         f.name.toLowerCase().includes(value.toLowerCase())
                     )
                 );
             } else {
-                setFilterValuesState((prev: any) => valuesState);
+                setFilterValuesState(() => valuesState);
             }
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -393,7 +381,7 @@ const ValuesList: React.FC<ValuesListProps> = (props) => {
                     </LoaderCont>
                 )}
                 {valuesState?.length > 0 &&
-                    filterValuesState?.map((value: any, key: any) => (
+                    filterValuesState?.map((value: any, key: number) => (
                         <LabelValue
                             {...props}
                             key={key}
diff --git a/src/hooks/useLabels.ts b/src/hooks/useLabels.ts
index 40d644dd..64966457 100644
--- a/src/hooks/useLabels.ts
+++ b/src/hooks/useLabels.ts
@@ -79,7 +79,7 @@ export const sendLabels = async (
 
                     if (response?.data?.data?.length > 0) {
                         const labels = response?.data?.data
-                            .sort()
+                            
                             .map((label: any) => ({
                                 name: label,
                                 selected: false,