add plugin class properties. update plugin interface. clean up redundant useState declarations

apps/remix-ide/src/app/plugins/solidity-umlgen.tsx

@@ -18,9 +18,13 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   element: HTMLDivElement
   currentFile: string
   svgPayload: string
+  updatedSvg: string
   amIActivated: boolean
   constructor() {
     super(profile)
+    this.currentFile = ''
+    this.svgPayload = ''
+    this.updatedSvg = ''
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'sol-uml-gen')
   }
@@ -37,7 +41,8 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
 
   showUmlDiagram(path: string, svgPayload: string) {
     if (!this.amIActivated) return
-    if(path.length < 1 || (svgPayload.length < 1 || !svgPayload.startsWith('<svg'))) {
+    console.log({ path, svgPayload })
+    if((!path && path.length < 1) || (svgPayload.length < 1 || !svgPayload.startsWith('<?xml'))) {
       this.call('notification', 'alert', {
         id: 'solidityumlgenAlert',
         message: 'Both file path and svg payload are required!'
@@ -45,7 +50,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
       return
     } else {
       this.currentFile = path
-      this.svgPayload = svgPayload
+      this.updatedSvg = svgPayload
     }
 
   }

libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx

@@ -7,12 +7,14 @@ export interface RemixUiSolidityUmlGenProps {
 
 export function RemixUiSolidityUmlGen ({ plugin }: RemixUiSolidityUmlGenProps) {
   const [showViewer, setShowViewer] = useState(false)
-  const [svgPayload, setSVGPayload] = useState('')
+  const [svgPayload, setSVGPayload] = useState<string>(plugin.svgPayload)
 
   useEffect(() => {
-    if (plugin.svgPayload.length > 1 
-      && plugin.svgPayload.startsWith('<svg')) setSVGPayload(plugin.svgPayload)
-  }, [plugin.svgPayload])
+    if (plugin.updatedSvg.startsWith('<?xml') && plugin.updatedSvg.includes('<svg')) {
+      setSVGPayload(plugin.updatedSvg)
+      console.log({ svgPayload })
+    }
+  })
 
   return (
     <div>

libs/remix-ui/solidity-uml-gen/src/types/index.ts

@@ -5,6 +5,7 @@ export interface ISolidityUmlGen extends ViewPlugin {
     element: HTMLDivElement
     currentFile: string
     svgPayload: string
+    updatedSvg: string
     showUmlDiagram(path: string, svgPayload: string): void
     render(): JSX.Element
 }

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -47,9 +47,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
   })
   const [canPaste, setCanPaste] = useState(false)
   const treeRef = useRef<HTMLDivElement>(null)
-  const [isClientLoaded, setIsClientLoaded] = useState(false);
-  const [svgPayload, setSVGPayload] = useState('')
-  const [showViewer, setShowViewer] = useState(false)
   const [contentForAST, setContentForAST] = useState('')
 
   
@@ -458,33 +455,18 @@ export const FileExplorer = (props: FileExplorerProps) => {
     try {
       const currentFile = path
       let ast: any
-      // const canActivateUmlGen = plugin.can
       plugin.call('solidity', 'compile', path)
       plugin.on('solidity', 'compilationFinished', async (file, source, languageVersion, data, input, version) => {
-      console.log({
-          file, source, languageVersion, data, input, version
-        })
         if (data.sources && Object.keys(data.sources).length > 1) { // we should flatten first as there are multiple asts
           flattenContract(source, currentFile, data)
         }
         ast = contentForAST.length > 1 ? parser.parse(contentForAST) : parser.parse(source.sources[currentFile].content)
         const payload = vizRenderStringSync(convertUmlClasses2Dot(convertAST2UmlClasses(ast, currentFile)))
-        console.log({ payload })
         const fileName = `${currentFile.split('/')[0]}/resources/${currentFile.split('/')[1].split('.')[0]}.svg`
         plugin.call('fileManager', 'writeFile', fileName, payload)
-        plugin.call('fileManager', 'open', fileName)
-        setSVGPayload(payload)
-        const isItActive = await plugin.appManager.isActive('solidityumlgen')
-        console.log('is solidityumlgen active?', { isItActive })
+        if (!await plugin.appManager.isActive('solidityumlgen')) await plugin.appManager.activatePlugin('solidityumlgen')
+        plugin.call('solidityumlgen', 'showUmlDiagram', fileName, payload)
       })
-      
-      // const element = new DOMParser().parseFromString(payload, 'image/svg+xml')
-      // .querySelector('svg')
-      // domToPdf(element, { filename: `${currentFile.split('/')[1].split('.')[0]}.pdf`, scale: 1.2 }, (pdf: jsPDF) => {
-        
-      //   // api.writeFile(fileName, pdf.output())
-      // })
-      // setShowViewer(!showViewer)
     } catch (error) {
       console.log({ error })
     }