feat(ui) - funnels - step toggle

frontend/app/components/Funnels/FunnelWidget/FunnelWidget.css

@@ -1,6 +1,7 @@
 .step {
     /* display: flex; */
     position: relative;
+    transition: all 0.5s ease;
     &:before {
         content: '';
         border-left: 2px solid $gray-lightest;
@@ -15,4 +16,10 @@
     &:last-child:before {
         display: none;
     }
+}
+
+.step-disabled {
+    filter: grayscale(1);
+    opacity: 0.8;
+    transition: all 0.2s ease-in-out;
 }

frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import Funnel from 'App/mstore/types/funnel';
 import Widget from 'App/mstore/types/widget';
-import Funnelbar from './FunnelBar'
+import Funnelbar from './FunnelBar';
 import cn from 'classnames';
 import stl from './FunnelWidget.css';
 import { Icon } from 'UI';
@@ -16,13 +15,15 @@ function FunnelWidget(props: Props) {
         <>
             <div className="w-full">
                 {metric.series[0].filter.filters.filter(f => f.isEvent).map((filter, index) => (
-                    <div className={cn("flex items-start mb-4", stl.step)}>
+                    <div className={cn("flex items-start mb-4", stl.step, { [stl['step-disabled']] : !filter.isActive })}>
                         <div className="z-10 w-6 h-6 border mr-4 text-sm rounded-full bg-gray-lightest flex items-center justify-center leading-3">
                             {index + 1}
                         </div>
-                        <Funnelbar key={index} completed={90} dropped={10} filter={filter}/>
-                        <div className="self-end flex items-center justify-center ml-4" style={{ marginBottom: '50px'}}>
-                            <Icon name="eye-slash" size="22" />
+                        <Funnelbar key={index} completed={90} dropped={10} filter={filter} />
+                        <div className="self-end flex items-center justify-center ml-4" style={{ marginBottom: '49px'}}>
+                            <button onClick={() => filter.updateKey('isActive', !filter.isActive)}>
+                                <Icon name="eye-slash-fill" color={filter.isActive ? "gray-light" : "gray-darkest"} size="22" />
+                            </button>
                         </div>
                     </div>
                 ))}

frontend/app/mstore/types/filterItem.ts

@@ -14,6 +14,7 @@ export default class FilterItem {
     filters: FilterItem[] = []
     operatorOptions: any[] = []
     options: any[] = []
+    isActive: boolean = true
 
     constructor(data: any = {}) {
         makeAutoObservable(this, {
@@ -23,19 +24,20 @@ export default class FilterItem {
             operator: observable,
             source: observable,
             filters: observable,
+            isActive: observable,
 
             merge: action
         })
 
-        if (Array.isArray(data.filters)) {
-            data.filters = data.filters.map(function (i) {
-                return new FilterItem(i);
-            });
-        }
+        
 
         this.merge(data)
     }
 
+    updateKey(key: string, value: any) {
+        this[key] = value
+    }
+
     merge(data) {
         Object.keys(data).forEach(key => {
             this[key] = data[key]

frontend/app/svg/icons/eye-slash-fill.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-eye-slash-fill" viewBox="0 0 16 16">
+  <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
+  <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/>
+</svg>