Merge pull request #1124 from faisal7008/fix/1066-relation-persists

fix: relation name persisting on screen while hovering graph edges #1066
tailwarden · Oct 25, 2023 · e45972b · e45972b
2 parents 17b0b01 + d71149c
commit e45972b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/dashboard/components/explorer/DependencyGraph.tsx b/dashboard/components/explorer/DependencyGraph.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, memo, useEffect } from 'react';
 import CytoscapeComponent from 'react-cytoscapejs';
-import Cytoscape, { EventObject } from 'cytoscape';
+import Cytoscape, { EdgeSingular, EventObject } from 'cytoscape';
 import popper from 'cytoscape-popper';
 
 import nodeHtmlLabel, {
@@ -91,6 +91,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
               const content = document.createElement('div');
               content.classList.add('popper-div');
               content.innerHTML = event.target.data('label');
+              content.style.pointerEvents = 'none';
 
               document.body.appendChild(content);
               return content;
@@ -108,6 +109,20 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
 
       // Hide labels when being zoomed out
       cy.on('zoom', event => {
+        if (cy.zoom() <= zoomLevelBreakpoint) {
+          interface ExtendedEdgeSingular extends EdgeSingular {
+            popperRefObj?: any;
+          }
+
+          // Check if a tooltip is present and remove it
+          cy.edges().forEach((edge: ExtendedEdgeSingular) => {
+            if (edge.popperRefObj) {
+              edge.popperRefObj.state.elements.popper.remove();
+              edge.popperRefObj.destroy();
+            }
+          });
+        }
+
         const opacity = cy.zoom() <= zoomLevelBreakpoint ? 0 : 1;
 
         Array.from(
@@ -126,7 +141,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
 
   return (
     <div className="relative h-full flex-1 bg-dependency-graph bg-[length:40px_40px]">
-      <CytoscapeComponent
+      {/* <CytoscapeComponent
         className="h-full w-full"
         elements={CytoscapeComponent.normalizeElements({
           nodes: data.nodes,
@@ -150,7 +165,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
           }
         ]}
         cy={(cy: Cytoscape.Core) => cyActionHandlers(cy)}
-      />
+      /> */}
       {dataIsEmpty ? (
         <>
           <div className="translate-y-[201px]">

diff --git a/dashboard/components/feedback-widget/FeedbackWidget.tsx b/dashboard/components/feedback-widget/FeedbackWidget.tsx
@@ -8,6 +8,7 @@ import Input from '@components/input/Input';
 import settingsService from '@services/settingsService';
 import Button from '@components/button/Button';
 import { useToast } from '@components/toast/ToastProvider';
+import Toast from '@components/toast/Toast';
 import Upload from '@components/upload/Upload';
 
 // We define the placeholder here for convenience
@@ -51,7 +52,7 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
     const [isTakingScreenCapture, setIsTakingScreenCapture] = useState(false);
     const [fileAttachement, setFileAttachement] = useState<File | null>(null);
     const [isSendingFeedback, setIsSendingFeedback] = useState(false);
-    const { showToast } = useToast();
+    const { toast, showToast, dismissToast } = useToast();
 
     async function takeScreenshot() {
       if (

diff --git a/dashboard/components/upload/Upload.stories.tsx b/dashboard/components/upload/Upload.stories.tsx
@@ -10,24 +10,35 @@ function UploadWrapper({
   onClose,
   ...otherProps
 }: UploadProps) {
-  const [selectedFile, setSelectedFile] = useState<File | File[] | null>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [selectedFiles, setSelectedFiles] = useState<File[] | null>(null);
 
   useEffect(() => {
     setSelectedFile(null);
+    setSelectedFiles(null);
   }, [multiple]);
 
   const uploadFile = (file: File | File[] | null): void => {
     if (file instanceof FileList) {
       const filesArray = Array.from(file);
-      setSelectedFile(filesArray);
+      setSelectedFiles(filesArray);
     } else if (file instanceof File) {
       setSelectedFile(file);
     } else {
       setSelectedFile(null);
+      setSelectedFiles(null);
     }
   };
 
-  return (
+  return multiple ? (
+    <Upload
+      multiple={multiple}
+      fileOrFiles={selectedFiles}
+      handleChange={uploadFile}
+      onClose={() => setSelectedFiles(null)}
+      {...otherProps}
+    />
+  ) : (
     <Upload
       multiple={multiple}
       fileOrFiles={selectedFile}
@@ -39,7 +50,7 @@ function UploadWrapper({
 }
 
 const meta: Meta<typeof Upload> = {
-  title: 'Komiser/FileUpload',
+  title: 'Komiser/Upload',
   component: UploadWrapper,
   decorators: [
     Story => (