change(ui) - funnel changes

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

@@ -5,10 +5,10 @@ import { Tooltip } from 'react-tippy';
 
 interface Props {
   filter: any;
+  isFirst: boolean
 }
 function FunnelBar(props: Props) {
-  const { filter } = props;
-
+  const { filter, isFirst = false } = props;
 
   return (
     <div className="w-full mb-4">
@@ -64,18 +64,24 @@ function FunnelBar(props: Props) {
         )} */}
       </div>
       <div className="flex justify-between py-2">
-        <div className="flex items-center">
-          <Icon name="arrow-right-short" size="20" color="green" />
-          <span className="mx-1 font-medium">{filter.sessionsCount}</span>
-          <span className="color-gray-medium text-sm">
-            ({filter.completedPercentage}%) Completed
-          </span>
-        </div>
-        <div className="flex items-center">
-          <Icon name="caret-down-fill" color="red" size={16} />
-          <span className="font-medium mx-1 color-red">{filter.droppedCount}</span>
-          <span className="text-sm color-red">({filter.droppedPercentage}%) Dropped</span>
-        </div>
+        {/* @ts-ignore */}
+        <Tooltip title="With respect to the previous step." disabled={isFirst}>
+          <div className="flex items-center">
+            <Icon name="arrow-right-short" size="20" color="green" />
+            <span className="mx-1 font-medium">{filter.sessionsCount}</span>
+            <span className="color-gray-medium text-sm">
+              ({filter.completedPercentage}%) Completed
+            </span>
+          </div>
+        </Tooltip>
+        {/* @ts-ignore */}
+        <Tooltip title="Total drop till this step." disabled={isFirst}>
+          <div className="flex items-center">
+            <Icon name="caret-down-fill" color="red" size={16} />
+            <span className="font-medium mx-1 color-red">{filter.droppedCount}</span>
+            <span className="text-sm color-red">({filter.droppedPercentage}%) Dropped</span>
+          </div>
+        </Tooltip>
       </div>
     </div>
   );

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

@@ -98,7 +98,7 @@ function Stage({ stage, index, isWidget }: any) {
     return useObserver(() => stage ? (
         <div className={cn("flex items-start", stl.step, { [stl['step-disabled']] : !stage.isActive })}>
             <IndexNumber index={index } />
-            <Funnelbar filter={stage} />
+            <Funnelbar filter={stage} isFirst={index === 1}/>
             {!isWidget && (
                 <BarActions bar={stage} />
             )}