fix label selection highlight at label selector

metrico · May 12, 2022 · 6d1d813 · 6d1d813
1 parent 02d8599
commit 6d1d813
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 39 deletions.
diff --git a/src/actions/loadLogs.js b/src/actions/loadLogs.js
@@ -76,8 +76,7 @@ export default function loadLogs() {
     const time = localStore.time || new Date().getTime() + "000000";
     const parsedStart = getTimeParsed(startTs);
     const parsedStop = getTimeParsed(stopTs);
-    const parsedTime =
-        "&start=" + (from || parsedStart) + "&end=" + (to || parsedStop);
+    const parsedTime = "&start=" + (from || parsedStart) + "&end=" + (to || parsedStop);
 
     if (findRangeByLabel(rangeLabel)) {
         ({ dateStart: startTs, dateEnd: stopTs } = findRangeByLabel(

diff --git a/src/components/DataView/ValueTags.js b/src/components/DataView/ValueTags.js
@@ -49,8 +49,8 @@ export default function ValueTags({ tags }) {
                     true || labelValue.inverted !== isInverted;
                 labelValue.inverted = !labelValue.inverted && isInverted;
                 label.selected = label.values.some((value) => value.selected);
-                console.log("labels set at value tags if labelvalue")
                 store.dispatch(setLabels(labels));
+
             } else {
                 await store.dispatch(loadLabelValues(label, labels, apiUrl));
                 const updatedLabels = store.getState().labels;

diff --git a/src/components/LabelBrowser/QueryBar.js b/src/components/LabelBrowser/QueryBar.js
@@ -67,9 +67,6 @@ export const QueryBar = () => {
     const onValueDisplay = (e) => {
         e.preventDefault();
         const isOpen = labelsBrowserOpen ? false : true;
-        if (isOpen) {
-            dispatch(loadLabels(apiUrl));
-        }
         dispatch(setLabelsBrowserOpen(isOpen));
     };
 

diff --git a/src/components/LabelBrowser/ValuesList.js b/src/components/LabelBrowser/ValuesList.js
@@ -30,9 +30,9 @@ const ValuesListStyled = styled.div`
     background: ${(props) => props.theme.widgetContainer};
     .valuelist-content {
         small {
-            color: ${(props) => props.theme.textColor} !important;
+            color: ${(props) => props.theme.textColor};
             background: ${(props) => props.theme.buttonDefault} !important;
-            border: 1px solid ${(props) => props.theme.buttonBorder} !important;
+            border: 1px solid ${(props) => props.theme.buttonBorder};
             margin: 5px;
             padding: 4px 8px;
             border-radius: 3px;
@@ -108,11 +108,6 @@ export const ValuesList = (props) => {
     const labelsBrowserOpen = useSelector((store) => store.labelsBrowserOpen);
     const CLEAR = "clear";
 
-    // useEffect(() => {
-    //     dispatch(loadLabels(apiUrl));
-    //     if (debug) console.log("🚧 LOGIC/LabelBrowser/ValuesList", apiUrl);
-    // }, [apiUrl]);
-
     useEffect(() => {
         setLabelList(labels); // LABELS
         console.log('labels changed')

diff --git a/src/helpers/UpdateStateFromQueryParams.js b/src/helpers/UpdateStateFromQueryParams.js
@@ -83,7 +83,14 @@ export function UpdateStateFromQueryParams() {
         theme: setTheme,
     };
 
-    const STRING_VALUES = ["limit", "step", "apiUrl", "theme", "queryType","time"];
+    const STRING_VALUES = [
+        "limit",
+        "step",
+        "apiUrl",
+        "theme",
+        "queryType",
+        "time",
+    ];
 
     const QUERY_VALUE = "query";
 
@@ -123,6 +130,7 @@ export function UpdateStateFromQueryParams() {
                         const parsedQuery = decodeURIComponent(
                             startParams[param]
                         );
+
                         dispatch(STORE_ACTIONS[param](parsedQuery));
                     } else if (
                         TIME_VALUES.includes(param) &&
@@ -319,8 +327,6 @@ export function decodeQuery(query, apiUrl, labels = []) {
                 .filter((value) => !!value);
             labelWithValues.values = values;
             labelWithValues.selected = true;
-            console.log('labels changed from labels from query')
-            console.log('here the labels get their values')
             store.dispatch(setLabels(labelsWithValues));
         });
     }

diff --git a/src/plugins/charts/index.js b/src/plugins/charts/index.js
@@ -1,11 +1,8 @@
 import "./jquery-loader";
 import ReactFlot from "react-flot";
 import "react-flot/flot/jquery.flot.time.min";
-
 import "react-flot/flot/jquery.flot.selection.min";
-
 import "react-flot/flot/jquery.flot.crosshair.min";
-
 import loadLogs from "../../actions/loadLogs";
 import { useDispatch } from "react-redux";
 import { setStartTime, setStopTime, setTimeRangeLabel } from "../../actions";
@@ -60,11 +57,6 @@ export default function ClokiChart({ matrixData }) {
         }
     }
 
-    /**
-     *
-     * Set chart types
-     */
-
     function plotChartData(data, type, element) {
         const chartSeries = setChartTypeSeries(type);
         const { timeformat, min, max } = formatDateRange(data);
@@ -73,7 +65,7 @@ export default function ClokiChart({ matrixData }) {
             data,
             $q.extend(true, {}, chartOptions, {
                 ...chartSeries,
-                xaxis: { timeformat, min, max, },
+                xaxis: { timeformat, min, max },
             })
         );
     }
@@ -139,10 +131,10 @@ export default function ClokiChart({ matrixData }) {
                         min: ranges.xaxis.from - 100000,
                         max: ranges.xaxis.to + 100000,
                         timeformat: formatDateRange(newData).timerange,
-
                     },
                 })
             );
+
             $q(chartRef.current).UseTooltip(plot);
             setTimeout(() => {
                 const fromTime = ranges.xaxis.from;
@@ -160,7 +152,7 @@ export default function ClokiChart({ matrixData }) {
                 const toLabel = format(toTs, "yyyy/MM/dd HH:mm:ss");
 
                 const timeRangeLabel = `${fromLabel}-${toLabel}`;
-                
+
                 dispatch(setStopTime(toTs));
                 dispatch(setStartTime(fromTs));
 
@@ -173,11 +165,6 @@ export default function ClokiChart({ matrixData }) {
         }
     }
 
-    /**
-     *
-     *Isolate Series clicking label
-     */
-
     function onLabelClick(e, v) {
         let newList = [];
         const lSelected =
@@ -220,7 +207,7 @@ export default function ClokiChart({ matrixData }) {
 
                 $q.extend(true, {}, chartOptions, {
                     series: getSeriesFromChartType(chartType),
-                    xaxis: { timeformat, min, max, },
+                    xaxis: { timeformat, min, max },
                 })
             );
 
@@ -246,7 +233,7 @@ export default function ClokiChart({ matrixData }) {
                 newData,
                 $q.extend(true, {}, chartOptions, {
                     series: getSeriesFromChartType(chartType),
-                    xaxis: { timeformat, min, max, },
+                    xaxis: { timeformat, min, max },
                 })
             );
 
@@ -281,7 +268,7 @@ export default function ClokiChart({ matrixData }) {
                 newData,
                 $q.extend(true, {}, chartOptions, {
                     series: getSeriesFromChartType(chartType),
-                    xaxis: { timeformat, min, max, },
+                    xaxis: { timeformat, min, max },
                 })
             );
 
@@ -302,7 +289,7 @@ export default function ClokiChart({ matrixData }) {
     };
 
     return (
-        <div style={{ margin: '10px' }}>
+        <div style={{ margin: "10px" }}>
             <ChartTools
                 matrixData={matrixData}
                 chartType={chartType}
@@ -316,10 +303,10 @@ export default function ClokiChart({ matrixData }) {
                 ref={chartRef}
                 id={"chart-container"}
                 style={{
-                    width: '100%',
+                    width: "100%",
                     height: "220px",
-                    display: 'block',
-                    position: 'relative'
+                    display: "block",
+                    position: "relative",
                 }}
             ></div>