chore: graphs page details update (#655)

frontend/packages/core/components/GraphsPage/Graph.tsx

 import {Documentation, Properties, SearchItem, SearchResult} from '~/resource/graphs/types';
 import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
-import {backgroundColor, borderColor, contentHeight, primaryColor, rem, size} from '~/utils/style';
+import {backgroundColor, borderColor, contentHeight, position, primaryColor, rem, size} from '~/utils/style';
 
 import ChartToolbox from '~/components/ChartToolbox';
 import HashLoader from 'react-spinners/HashLoader';
@@ -36,12 +36,27 @@ const Toolbox = styled(ChartToolbox)`
 `;
 
 const Content = styled.div`
+    position: relative;
     height: calc(100% - ${toolboxHeight});
 
     > iframe {
         ${size('100%', '100%')}
         border: none;
     }
+
+    > .powered-by {
+        display: block;
+        ${position('absolute', null, null, rem(20), rem(30))}
+        color: #ddd;
+        font-size: ${rem(14)};
+        user-select: none;
+
+        img {
+            height: 1em;
+            opacity: 0.5;
+            vertical-align: middle;
+        }
+    }
 `;
 
 const Loading = styled.div`
@@ -221,6 +236,14 @@ const Graph = React.forwardRef<GraphRef, GraphProps>(
                             marginWidth={0}
                             marginHeight={0}
                         ></iframe>
+                        <a
+                            className="powered-by"
+                            href="https://github.com/lutzroeder/netron"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            Powered by <img src={`${process.env.PUBLIC_PATH ?? ''}/images/netron.png`} alt="netron" />
+                        </a>
                     </Content>
                 </RenderContent>
             </Wrapper>

frontend/packages/core/public/netron/index.html

@@ -6,7 +6,6 @@
             name="viewport"
             content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
         />
-        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
         <title>Netron</title>
         <link rel="stylesheet" type="text/css" href="view-grapher.css" />
         <style>

frontend/packages/core/public/netron/view-grapher.css

@@ -17,6 +17,15 @@ text {
 
 .node-item path {
     fill: #fff;
+    fill-opacity: 1;
+    stroke: none;
+}
+.node:hover .node-item path {
+    fill: #2932E1;
+    fill-opacity: 1;
+}
+.node:hover .node-item text {
+    fill: #fff;
 }
 
 .node-item-function path {
@@ -106,9 +115,6 @@ text {
 .node-attribute:hover {
     cursor: pointer;
 }
-.node-attribute:hover line {
-    cursor: pointer;
-}
 .node-attribute text {
     font-size: 9px;
     font-weight: normal;
@@ -159,7 +165,24 @@ text {
 
 .select .node.border {
     stroke: #1527C2;
+    stroke-width: 2px;
+    stroke-dasharray: 6px 3px;
+    stroke-dashoffset: 0;
+    animation: pulse 4s infinite linear;
 }
 .select.edge-path {
     stroke: #1527C2;
+    stroke-width: 2px;
+    stroke-dasharray: 6px 3px;
+    stroke-dashoffset: 0;
+    animation: pulse 4s infinite linear;
+}
+
+@keyframes pulse {
+    from {
+        stroke-dashoffset: 100px;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
 }