add uml display logic to plugin. call plugin from react lib

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

@@ -3,27 +3,51 @@ import { ViewPlugin } from '@remixproject/engine-web'
 import React from 'react'
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { RemixUiSolidityUmlGen } from '@remix-ui/solidity-uml-gen' 
-import { RemixAppManager } from 'libs/remix-ui/plugin-manager/src/types'
+import { ISolidityUmlGen } from 'libs/remix-ui/solidity-uml-gen/src/types'
 
 const profile = {
     name: 'solidityumlgen',
     displayName: 'Solidity UML Generator',
-    description: '',
+    description: 'Generate UML diagram in svg format from last compiled contract',
     location: 'mainPanel',
-    methods: [''],
+    methods: ['showUmlDiagram'],
     events: [],
 }
 
-export class SolidityUmlGen extends ViewPlugin {
+export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
-  element: HTMLElement
+  element: HTMLDivElement
+  currentFile: string
+  svgPayload: string
+  amIActivated: boolean
   constructor() {
     super(profile)
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'sol-uml-gen')
   }
 
-  hi() {
+  onActivation(): void {
-    console.log('hello yourself')
+      this.amIActivated = true
+      console.log('amIActivated is set to true')
+  }
+
+  onDeactivation(): void {
+      this.amIActivated = false
+      console.log('amIActivated is set to false')
+  }
+
+  showUmlDiagram(path: string, svgPayload: string) {
+    if (!this.amIActivated) return
+    if(path.length < 1 || (svgPayload.length < 1 || !svgPayload.startsWith('<svg'))) {
+      this.call('notification', 'alert', {
+        id: 'solidityumlgenAlert',
+        message: 'Both file path and svg payload are required!'
+      })
+      return
+    } else {
+      this.currentFile = path
+      this.svgPayload = svgPayload
+    }
+
   }
 
   render() {

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

@@ -1,12 +1,19 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Viewer from 'react-viewer'
+import { ISolidityUmlGen } from '../types'
 export interface RemixUiSolidityUmlGenProps {
-  plugin: any
+  plugin: ISolidityUmlGen
 }
 
 export function RemixUiSolidityUmlGen ({ plugin }: RemixUiSolidityUmlGenProps) {
   const [showViewer, setShowViewer] = useState(false)
   const [svgPayload, setSVGPayload] = useState('')
+
+  useEffect(() => {
+    if (plugin.svgPayload.length > 1 
+      && plugin.svgPayload.startsWith('<svg')) setSVGPayload(plugin.svgPayload)
+  }, [plugin.svgPayload])
+
   return (
     <div>
       <h1>Solidity 2 UML Generator View!</h1>

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

@@ -0,0 +1,10 @@
+import { ViewPlugin } from '@remixproject/engine-web'
+import React from 'react'
+
+export interface ISolidityUmlGen extends ViewPlugin {
+    element: HTMLDivElement
+    currentFile: string
+    svgPayload: string
+    showUmlDiagram(path: string, svgPayload: string): void
+    render(): JSX.Element
+}

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

@@ -11,7 +11,6 @@ import vizRenderStringSync from '@aduh95/viz.js/sync'
 import domToPdf from 'dom-to-pdf'
 import { jsPDF } from 'jspdf'
 import { convertAST2UmlClasses } from 'sol2uml/lib/converterAST2Classes'
-import { createClient } from '@remixproject/plugin-webview'
 
 
 import '../css/file-explorer.css'
@@ -461,7 +460,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
       let ast: any
       // const canActivateUmlGen = plugin.can
       plugin.call('solidity', 'compile', path)
-      plugin.on('solidity', 'compilationFinished', (file, source, languageVersion, data, input, version) => {
+      plugin.on('solidity', 'compilationFinished', async (file, source, languageVersion, data, input, version) => {
       console.log({
           file, source, languageVersion, data, input, version
         })
@@ -475,6 +474,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
         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 })
       })
       
       // const element = new DOMParser().parseFromString(payload, 'image/svg+xml')