fix(ui) - filters source, fetch navigation tooltips

frontend/app/components/Session_/TimeTable/TimeTable.tsx

@@ -227,8 +227,24 @@ export default class TimeTable extends React.PureComponent<Props, State> {
             <div className={cn(className, 'relative')}>
                 {navigation && (
                     <div className={cn(autoscrollStl.navButtons, 'flex items-center')}>
-                        <Button variant="text-primary" icon="chevron-up" onClick={this.onPrevClick} />
-                        <Button variant="text-primary" icon="chevron-down" onClick={this.onNextClick} />
+                        <Button
+                            variant="text-primary"
+                            icon="chevron-up"
+                            tooltip={{
+                                title: 'Previous Error',
+                                delay: 0,
+                            }}
+                            onClick={this.onPrevClick}
+                        />
+                        <Button
+                            variant="text-primary"
+                            icon="chevron-down"
+                            tooltip={{
+                                title: 'Next Error',
+                                delay: 0,
+                            }}
+                            onClick={this.onNextClick}
+                        />
                         {/* <IconButton 
               size="small" 
               icon="chevron-up" 

frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx

@@ -33,7 +33,7 @@ function FilterItem(props: Props) {
     };
 
     const onSourceOperatorChange = (e: any, { name, value }: any) => {
-        props.onUpdate({ ...filter, sourceOperator: value.value });
+        props.onUpdate({ ...filter, sourceOperator: value });
     };
 
     const onUpdateSubFilter = (subFilter: any, subFilterIndex: any) => {

frontend/app/components/ui/Button/Button.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import { CircularLoader, Icon } from 'UI';
+import { CircularLoader, Icon, Popup } from 'UI';
 
 interface Props {
     className?: string;
@@ -11,6 +11,7 @@ interface Props {
     loading?: boolean;
     icon?: string;
     rounded?: boolean;
+    tooltip?: any;
     [x: string]: any;
 }
 export default (props: Props) => {
@@ -24,6 +25,7 @@ export default (props: Props) => {
         children,
         loading = false,
         rounded = false,
+        tooltip = null,
         ...rest
     } = props;
 
@@ -69,7 +71,7 @@ export default (props: Props) => {
         classes = classes.map((c) => c.replace('rounded', 'rounded-full h-10 w-10 justify-center'));
     }
 
-    return (
+    const render = () => (
         <button {...rest} type={type} className={cn(classes, className)}>
             {icon && <Icon className={cn({ 'mr-2': children })} name={icon} color={iconColor} size="16" />}
             {loading && (
@@ -80,4 +82,6 @@ export default (props: Props) => {
             <div className={cn({ 'opacity-0': loading }, 'flex items-center')}>{children}</div>
         </button>
     );
+
+    return tooltip ? <Popup content={tooltip.title} {...tooltip}>{render()}</Popup> : render();
 };

frontend/app/mstore/types/filterItem.ts

@@ -31,6 +31,7 @@ export default class FilterItem {
             filters: observable,
             isActive: observable,
             sourceOperator: observable,
+            category: observable,
 
             merge: action,
         });
@@ -77,6 +78,7 @@ export default class FilterItem {
         this.isEvent = _filter.isEvent;
 
         (this.value = json.value.length === 0 || !json.value ? [''] : json.value), (this.operator = json.operator);
+        this.source = json.source;
         this.sourceOperator = json.sourceOperator;
 
         this.filters =