Feature: Tooltips

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "homepage": "https://dashboard.jina.ai",
   "dependencies": {
-    "@bastinjafari/react-flow-chart": "0.0.14",
+    "@bastinjafari/react-flow-chart-with-tooltips-and-multi-select": "0.0.14",
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
     "@projectstorm/react-diagrams": "^6.0.1-beta.7",
@@ -93,7 +93,7 @@
     }
   },
   "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+    "src/**/*.{js,jsx,ts,tsx,json,md}": [
       "prettier --write",
       "eslint --max-warnings=0"
     ]

src/App.css

@@ -743,4 +743,20 @@ code {
   height: 100%;
   width: 100%;
   border-radius: 0.625rem;
-}
+}
+
+.tooltip-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip-icon {
+  height: 50px;
+  width: auto;
+  margin-right: 15px;
+}
+
+.tooltip-text {
+  width: 150px;
+}

src/components/FlowChart/Sidebar.tsx

@@ -2,7 +2,11 @@ import React, { useState, useEffect } from "react";
 import SidebarItem from "./SidebarItem";
 import defaultPods from "../../data/defaultPods.json";
 import _ from "lodash";
-import { IChart, ILink, INode } from "@bastinjafari/react-flow-chart";
+import {
+  IChart,
+  ILink,
+  INode,
+} from "@bastinjafari/react-flow-chart-with-tooltips-and-multi-select";
 import { Button, FormControl, Card } from "react-bootstrap";
 
 interface Node extends INode {

src/components/FlowChart/SidebarItem.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { REACT_FLOW_CHART } from "@bastinjafari/react-flow-chart";
+import { REACT_FLOW_CHART } from "@bastinjafari/react-flow-chart-with-tooltips-and-multi-select";
 import ChartNode from "./ChartNode";
 
 type Props = {

src/components/FlowChart/Tooltip.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { ITooltipComponentDefaultProps } from "@bastinjafari/react-flow-chart-with-tooltips-and-multi-select";
+
+export default function Tooltip(props: ITooltipComponentDefaultProps) {
+  return (
+    <div className="tooltip-container">
+      <img className="tooltip-icon" src="../../icon.png" alt="Tooltip Icon" />
+      <span className="tooltip-text">{props.tooltip}</span>
+    </div>
+  );
+}

src/data/tooltipConfig.ts

@@ -0,0 +1,7 @@
+export const tooltipConfig = {
+  tooltipsGlobal: {
+    showTooltip: true,
+    toogleOffWhenClicked: "global",
+    text: "Hold Shift and click to select multiple nodes",
+  },
+};

src/views/FlowView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { cloneDeep } from "lodash";
-import { FlowChart } from "@bastinjafari/react-flow-chart";
-import * as actions from "@bastinjafari/react-flow-chart/src/container/actions";
+import { FlowChart } from "@bastinjafari/react-flow-chart-with-tooltips-and-multi-select";
+import * as actions from "@bastinjafari/react-flow-chart-with-tooltips-and-multi-select/src/container/actions";
 import { Container, Row, Card } from "shards-react";
 import { Dispatcher, Constants, Store } from "../flux";
 import { PageTitle } from "../components/Common/PageTitle";
@@ -14,6 +14,9 @@ import CustomPort from "../components/FlowChart/NodePort";
 import FlowSelection from "../components/FlowChart/FlowSelection";
 import { formatAsYAML, copyToClipboard } from "../helpers";
 
+import Tooltip from "../components/FlowChart/Tooltip";
+import { tooltipConfig } from "../data/tooltipConfig";
+
 const syncEvents = [
   "onDragNodeStop",
   "onCanvasDrop",
@@ -28,6 +31,10 @@ class FlowView extends React.Component<any, any> {
   constructor(props: any) {
     super(props);
     const { flow: chart, type: flowType } = Store.getFlowchart();
+    const chartWithTooltips = {
+      ...chart,
+      ...tooltipConfig,
+    };
     const selectedFlowId = Store.getSelectedFlowId();
     const flows = Store.getFlows();
     const connected = Store.getConnectionStatus();
@@ -36,7 +43,7 @@ class FlowView extends React.Component<any, any> {
       availableProperties,
       flowType,
       connected,
-      chart,
+      chart: { ...chartWithTooltips },
       selectedFlowId,
       flows,
       showOverlay: false,
@@ -270,6 +277,7 @@ class FlowView extends React.Component<any, any> {
                 <FlowChart
                   chart={chart}
                   Components={{
+                    TooltipComponent: Tooltip,
                     NodeInner: CustomNode as any,
                     Port: CustomPort,
                   }}