Feature user roles

package.json

@@ -56,6 +56,8 @@
     "papaparse": "^5.3.2",
     "prismjs": "^1.29.0",
     "react": "^17.0.2",
+    "react-avatar": "^5.0.3",
+    "react-avatar-generator": "^1.0.3",
     "react-cookie": "^4.1.1",
     "react-custom-scrollbars-2": "^4.4.0",
     "react-dnd": "15.1.2",

src/App.tsx

@@ -1,5 +1,30 @@
-import Main from "./views/Main";
+import { useTheme } from "./theme";
+import { cx, css } from "@emotion/css";
+import MainStatusBar from "./views/Main/MainStatusBar";
+import {  Outlet } from "react-router-dom";
+import { Notification } from "./qryn-ui/notifications";
+import { useSelector } from "react-redux";
+import SettingsDialog from "./plugins/settingsdialog/SettingsDialog";
+
+export const MainAppStyles = (theme: any) => css`
+    background: ${theme.mainBgColor};
+    display:flex;
+    flex-direction:column;
+    height:100vh;
+    flex:1;
+
+`;
 
 export default function App() {
-    return <Main />;
+    const theme = useTheme();
+    const settingDialogOpen = useSelector((store:any)=>store.settingsDialogOpen)
+    return (
+        <div className={cx(MainAppStyles(theme))}>
+            <MainStatusBar/>
+
+            <Outlet />
+            <Notification/>
+            <SettingsDialog open={settingDialogOpen} />
+        </div>
+    );
 }

src/components/LabelBrowser/components/LabelsSelector/LabelsList.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import styled from "@emotion/styled";
 
 
@@ -17,24 +17,28 @@ export const EmptyLabels = (props: any) => {
 
 function LabelItem(props: any) {
 
-    const { selected, label, type } = props;
+    const { label, type } = props;
 
-    const isSelected = useMemo(() => selected, [selected]);
+    const [selected, setSelected] = useState(props.selected)
+
+    useEffect(()=>{
+       setSelected(props.selected)
+    },[props.selected])
 
     const selectedStyle = useMemo(() => {
-        if (isSelected)
+        if (selected)
             return {
                 borderColor: "#11abab",
                 color: "#11abab",
             };
         else return {};
-    }, [isSelected]);
+    }, [selected]);
     return (
         <small
             className={type}
             style={selectedStyle}
             onClick={(e) => props.onClick(label)}
-        >
+        > 
             {label}
         </small>
     );
@@ -49,8 +53,9 @@ export default function LabelsList(props: any) {
     const onClick = (e: any) => {
         if (e === "Select Metric") {
             props.onLabelSelected("__name__");
+        } else {
+            props.onLabelSelected(e);
         }
-        props.onLabelSelected(e);
     };
 
     const lsList = useMemo(() => {