feat: Distinguish the current node from other nodes (#173)

Signed-off-by: LinHaiming <lhming23@outlook.com>
hypertrons · Jun 16, 2021 · 43ffbb5 · 43ffbb5
1 parent bc9b36f
commit 43ffbb5
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 15 deletions.
diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
@@ -24,6 +24,10 @@ interface GraphProps {
    * callback function when click node
    */
   readonly onNodeClick?: NodeClickFunc;
+  /**
+   * will assign a distinguishable color to the focused node if specified
+   */
+  readonly focusedNodeID?: string;
 }
 
 const Graph: React.FC<GraphProps> = ({
@@ -34,10 +38,13 @@ const Graph: React.FC<GraphProps> = ({
     const url = 'https://github.com/' + node.id;
     window.location.href = url;
   },
+  focusedNodeID,
 }) => {
   const NODE_SIZE = [10, 30];
   const NODE_COLOR = GITHUB_THEME === 'light' ? ['#9EB9A8', '#40C463', '#30A14E', '#216E39'] : ['#0E4429', '#006D32', '#26A641', '#39D353'];
   const THRESHOLD = [10, 100, 1000];
+  const FOCUSED_NODE_COLOR = GITHUB_THEME === 'light' ? ['#D73A49'] : ['#DA3633'];
+
   const [inited, setInited] = useState(false);
   const [settings, setSettings] = useState(new Settings());
 
@@ -72,7 +79,7 @@ const Graph: React.FC<GraphProps> = ({
           value: n.value,
           symbolSize: linearMap(n.value, minMax, NODE_SIZE),
           itemStyle: {
-            color: getColorMap(n.value)
+            color: focusedNodeID && focusedNodeID === n.name ? FOCUSED_NODE_COLOR : getColorMap(n.value)
           }
         }
       })
@@ -96,7 +103,7 @@ const Graph: React.FC<GraphProps> = ({
     const generateNodes = (nodes: any[]): any => {
       const minMax = getMinMax(nodes);
       return nodes.map((n: any) => {
-        const color = getColorMap(n.value);
+        const color = focusedNodeID && focusedNodeID === n.name ? FOCUSED_NODE_COLOR : getColorMap(n.value);
         return {
           id: n.name,
           value: n.value,

diff --git a/src/pages/Content/DeveloperNetwork.tsx b/src/pages/Content/DeveloperNetwork.tsx
@@ -180,6 +180,7 @@ const DeveloperNetworkView: React.FC<DeveloperNetworkViewProps> = ({ currentDeve
                       graphType={graphType}
                       data={developerCollabrationData!}
                       style={graphStyle}
+                      focusedNodeID={currentDeveloper}
                     />
                   </div>
                 </div>

diff --git a/src/pages/Content/ProjectNetwork.tsx b/src/pages/Content/ProjectNetwork.tsx
@@ -129,6 +129,7 @@ const ProjectNetworkView: React.FC<ProjectNetworkViewProps> = ({ currentRepo, gr
                 graphType={graphType}
                 data={repoCorrelationData!}
                 style={graphStyle}
+                focusedNodeID={currentRepo}
               />
             </div>
           </div>

diff --git a/webpack.config.js b/webpack.config.js
@@ -137,19 +137,6 @@ var options = {
         copyUnmodified: true,
       }
     ),
-    new CopyWebpackPlugin(
-      [
-        {
-          from: 'src/_locales',
-          to: path.join(__dirname, 'build','_locales'),
-          force: true,
-        },
-      ],
-      {
-        logLevel: 'info',
-        copyUnmodified: true,
-      }
-    ),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'src', 'pages', 'Options', 'index.html'),
       filename: 'options.html',