refactor: adapt for the new genertaed data(v2) (#37)

* refactor: adapt for the new genertaed data(v2) * refactor: modify line view width and opacity Signed-off-by: frank-zsy <[email protected]> * chore: hardcode the data version to 'v2' * chore: 'Contributor' --> 'Developer' && '贡献者' --> '开发者' * fix: avoid horizontal scroll bar triggered by node-hover-tooltip * fix: if edges is [] the Graph will crash * feat: support two kinds of nodes and improve the UI * Revert "chore: hardcode the data version to 'v2'" This reverts commit 4a5f2bd. * chore: enable showLinks by default * feat: make logo and name clickable --------- Signed-off-by: frank-zsy <[email protected]> Co-authored-by: frank-zsy <[email protected]>
X-lab2017 · Mar 2, 2023 · db39fc3 · db39fc3
1 parent 2e0443a
commit db39fc3
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 117 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -1,12 +1,13 @@
 {
   "PROJECT_CORRELATION_NETWORK": "Project Network",
-  "CONTRIBUTOR_CORRELATION_NETWORK": "Contributor Network",
-  "CONTRIBUTOR_ACTIVITY_EVOLUTION": "Evolution of Contributors' Activity",
+  "CONTRIBUTOR_CORRELATION_NETWORK": "Developer Network",
   "PLAY_BUTTON": "Play",
-  "SEARCH_PLACEHOLDER": "Please enter repo name",
+  "SEARCH_PLACEHOLDER": "Please enter GitHub repo name or developer ID",
   "COUNT_FOR_RELATED_PROJECTS": "<span> has </span><strong> {count} </strong><span> related projects </span>",
+  "COUNT_FOR_RELATED_DEVELOPORS": "<span> has </span><strong> {count} </strong><span> related developers </span>",
   "COUNT_FOR_SEARCH_MATCHES": "has <strong>{count}</strong><span> matches",
-  "RELATED_PROJECT": "related",
+  "RELATED_PROJECT": "repos",
+  "RELATED_DEVELOPER": "developers",
 
   "HELP_TITLE": "OpenGalaxy Navigation Guide",
   "HELP_MOUSE_WHEEL": "mouse wheel",
@@ -30,26 +31,5 @@
   "HELP_TOGGLE_LINK": "Toggle link",
   "HELP_BACKQUOTE": "backquote",
   "HELP_TOGGLE_DATA_SCREEN": "Toggle data screen",
-
-  "SteeringIndicator_HOW_TO_TURN_OFF": "Press <Space> to turn off the Steering mode",
-
-  "ReposUsersTotal_REPOS": "Repos",
-  "ReposUsersTotal_USERS": "Users",
-  "MonthlyActiveReposAndUsers_TITLE": "Number of Active Repos and Users by Month",
-  "MonthlyActiveReposAndUsers_REPO": "Repos",
-  "MonthlyActiveReposAndUsers_USER": "Users",
-  "MonthlyActiveReposAndUsers_XAXIS_LABEL_UNIT": "",
-  "ContributorsGeoDistribution_TITLE": "Geo Distribution of Contributors in 2020",
-  "UserActionsPie_TITLE": "User Behaviors Statistics",
-  "UserActionsPie_OPEN_ISSUE": "Open Issue",
-  "UserActionsPie_COMMENT_ISSUE": "Comment Issue",
-  "UserActionsPie_OPEN_PR": "Open PR",
-  "UserActionsPie_COMMENT_PR": "Comment PR",
-  "UserActionsPie_FORK": "Fork",
-  "UserActionsPie_WATCH": "Watch",
-  "TopLanguages_TITLE": "Top20 Langugaes Used in OSS Projects",
-  "TopActiveRepos_TITLE": "Top20 Active OSS Projects",
-  "CompaniesScatter_TITLE": "Total Repos and Activities of Major Companies",
-  "CompaniesScatter_TOTAL_REPOS_NUM": "Total Repos",
-  "CompaniesScatter_TOTAL_ACTIVITY": "Total Activity"
+  "SteeringIndicator_HOW_TO_TURN_OFF": "Press <Space> to turn off the Steering mode"
 }
diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json
@@ -1,12 +1,13 @@
 {
   "PROJECT_CORRELATION_NETWORK": "项目协作网络",
-  "CONTRIBUTOR_CORRELATION_NETWORK": "贡献者协作网络",
-  "CONTRIBUTOR_ACTIVITY_EVOLUTION": "贡献者活跃度演进榜",
+  "CONTRIBUTOR_CORRELATION_NETWORK": "开发者协作网络",
   "PLAY_BUTTON": "播放",
-  "SEARCH_PLACEHOLDER": "请输入仓库名称",
+  "SEARCH_PLACEHOLDER": "请输入 GitHub 仓库名称或开发者 ID",
   "COUNT_FOR_RELATED_PROJECTS": "<span> 有 </span><strong> {count} </strong><span> 个关联项目 </span>",
+  "COUNT_FOR_RELATED_DEVELOPORS": "<span> 有 </span><strong> {count} </strong><span> 个关联开发者 </span>",
   "COUNT_FOR_SEARCH_MATCHES": "共有 <strong>{count}</strong><span> 个匹配项",
   "RELATED_PROJECT": "关联项目",
+  "RELATED_DEVELOPER": "关联开发者",
 
   "HELP_TITLE": "开源星系航行指南",
   "HELP_MOUSE_WHEEL": "鼠标滚轮",
@@ -30,26 +31,5 @@
   "HELP_TOGGLE_LINK": "显/隐 边",
   "HELP_BACKQUOTE": "反引号",
   "HELP_TOGGLE_DATA_SCREEN": "显/隐 数据大屏",
-
-  "SteeringIndicator_HOW_TO_TURN_OFF": "按下 Space 键关闭领航模式",
-
-  "ReposUsersTotal_REPOS": "仓库",
-  "ReposUsersTotal_USERS": "用户",
-  "MonthlyActiveReposAndUsers_TITLE": "GitHub月活仓库与月活用户数",
-  "MonthlyActiveReposAndUsers_REPO": "月活仓库",
-  "MonthlyActiveReposAndUsers_USER": "月活用户",
-  "MonthlyActiveReposAndUsers_XAXIS_LABEL_UNIT": "月",
-  "ContributorsGeoDistribution_TITLE": "2020年开源贡献者地理分布",
-  "UserActionsPie_TITLE": "用户行为统计",
-  "UserActionsPie_OPEN_ISSUE": "发起Issue",
-  "UserActionsPie_COMMENT_ISSUE": "评论Issue",
-  "UserActionsPie_OPEN_PR": "发起PR",
-  "UserActionsPie_COMMENT_PR": "评论PR",
-  "UserActionsPie_FORK": "Fork",
-  "UserActionsPie_WATCH": "Watch",
-  "TopLanguages_TITLE": "开源项目使用最多的20门编程语言",
-  "TopActiveRepos_TITLE": "活跃度最高的20个开源项目",
-  "CompaniesScatter_TITLE": "知名公司仓库数及总活跃度",
-  "CompaniesScatter_TOTAL_REPOS_NUM": "总项目数",
-  "CompaniesScatter_TOTAL_ACTIVITY": "总活跃度"
+  "SteeringIndicator_HOW_TO_TURN_OFF": "按下 Space 键关闭领航模式"
 }
diff --git a/src/SODAComponents/RepoDetails/Graph.jsx b/src/SODAComponents/RepoDetails/Graph.jsx
@@ -24,6 +24,9 @@ const generateEchartsData = (data, focusedNodeID) => {
     });
   };
   const generateEdges = (edges) => {
+    if (edges.length === 0) {
+      return [];
+    }
     const threshold = edges[0][0].split("/").length === 2 ? 5 : 2.5;
     return edges
       .map((e) => {

diff --git a/src/galaxy/native/appConfig.js b/src/galaxy/native/appConfig.js
@@ -7,7 +7,7 @@ import qs from 'qs';
 var defaultConfig = {
   pos: {x : 0, y: 0, z: 0 },
   lookAt: {x: 0, y: 0, z: 0, w: 1},
-  showLinks: false, // links太多了浏览器卡，故默认关掉
+  showLinks: true,
   maxVisibleDistance: 150,
   scale: 1.75,
   manifestVersion: 0

diff --git a/src/galaxy/native/lineView.js b/src/galaxy/native/lineView.js
@@ -76,9 +76,9 @@ function renderLinks(scene, THREE) {
     var material = new THREE.LineBasicMaterial({
       vertexColors: THREE.VertexColors,
       blending: THREE.AdditiveBlending,
-      opacity:0.05,
+      opacity: 0.2,
       transparent: true,
-      linewidth: 0.02,
+      linewidth: 0.1,
     });
 
     geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));

diff --git a/src/galaxy/native/renderer.js b/src/galaxy/native/renderer.js
@@ -36,14 +36,16 @@ function sceneRenderer(container) {
 
   var communityColorMap = new Map();
   var colorMap = new Map([
-    ['5901', 0x00f7ffff],
-    ['1217', 0x1a14ffff],
-    ['2272', 0x6e30ffff],
-    ['10476', 0x1189ffff],
-    ['3063', 0xde38ffff],
-    ['26766', 0xfff10cff],
-    ['7298', 0xff3254ff],
-    ['1314', 0x4dea00ff],
+    ['r', 0x1189ffff],
+    ['u', 0xfff10cff],
+    // ['5901', 0x00f7ffff],
+    // ['1217', 0x1a14ffff],
+    // ['2272', 0x6e30ffff],
+    // ['10476', 0x1189ffff],
+    // ['3063', 0xde38ffff],
+    // ['26766', 0xfff10cff],
+    // ['7298', 0xff3254ff],
+    // ['1314', 0x4dea00ff],
   ]);
   var defaultColor = 0xffffffff;
 
@@ -154,22 +156,22 @@ function sceneRenderer(container) {
     var colors = view.colors();
     nodeCommunity = [];
     for (var i = 0; i < labels.length; i++) {
-      if (!communityColorMap.has(labels[i].c)) {
-        var c = getColor(labels[i].c);
-        communityColorMap.set(labels[i].c, c);
+      if (!communityColorMap.has(labels[i].t)) {
+        var c = getColor(labels[i].t);
+        communityColorMap.set(labels[i].t, c);
       }
-      colorNode(i * 3, colors, communityColorMap.get(labels[i].c));
-      nodeCommunity.push(labels[i].c);
+      colorNode(i * 3, colors, communityColorMap.get(labels[i].t));
+      nodeCommunity.push(labels[i].t);
     }
     view.colors(colors);
     // set size
     var sizes = view.sizes();
-    var max = parseFloat(labels[0].pg);
+    var max = parseFloat(labels[0].or);
     for (var i = 1; i < labels.length; i++) {
-      if (max < parseFloat(labels[i].pg)) max = parseFloat(labels[i].pg);
+      if (max < parseFloat(labels[i].or)) max = parseFloat(labels[i].or);
     }
     for (var i = 0; i < sizes.length; ++i) {
-      sizes[i] = (180 * parseFloat(labels[i].pg) / max) + 8;
+      sizes[i] = (180 * parseFloat(labels[i].or) / max) + 8;
     }
     view.sizes(sizes);
   }

diff --git a/src/galaxy/nodeDetails/nodeDetailsStore.js b/src/galaxy/nodeDetails/nodeDetailsStore.js
@@ -9,6 +9,8 @@ import getBaseNodeViewModel from '../store/baseNodeViewModel.js';
 
 import eventify from 'ngraph.events';
 
+import isRepoName from '../utils/isRepoName.js';
+
 export default nodeDetailsStore();
 
 function nodeDetailsStore() {
@@ -38,6 +40,13 @@ function nodeDetailsStore() {
     if (degreeVisible) {
       currentConnectionType = connectionType;
       var rootInfo = scene.getNodeInfo(id);
+      // ignore existing code to change `currentConnectType` or `connectionType`,
+      // however to use node name to decide whether it is 'in' or 'out'.
+      if (isRepoName(rootInfo.name)) {
+        currentConnectionType = connectionType = 'in';
+      } else {
+        currentConnectionType = connectionType = 'out';
+      }
       var conenctions = scene.getConnected(id, connectionType);
 
       var viewModel = new DegreeWindowViewModel(rootInfo.name, conenctions, connectionType, id);

diff --git a/src/galaxy/nodeDetails/templates/default.jsx b/src/galaxy/nodeDetails/templates/default.jsx
@@ -1,34 +1,67 @@
-import React from 'react';
-import intl from 'react-intl-universal';
+import React from "react";
+import intl from "react-intl-universal";
+
+import isRepoName from "../../utils/isRepoName";
 
 export default function template(props) {
   var model = props.model;
 
   return (
-    <div className='container-fluid row'>
-      <div className='hidden-xs'>
-        <div className='col-xs-9'>
-          <h4 title={model.name}>{model.name}</h4>
+    <div className="container-fluid row">
+      <div className="hidden-xs no-pads">
+        <div className="col-xs-2">
+          <a href={`https://github.com/${model.name}`} target="_blank">
+            <img
+              width="50px"
+              height="50px"
+              src={`https://avatars.githubusercontent.com/${
+                model.name.split("/")[0]
+              }`}
+              alt="logo"
+            ></img>
+          </a>
         </div>
-        <div className="col-xs-3">
-          <div className="row">
-            <h2 id={model.id} className='in-degree'>{model.inDegree}</h2>
-          </div>
-          <div className="row small">{intl.get('RELATED_PROJECT')}</div>
+        <div className="col-xs-7 text-center">
+          <a
+            href={`https://github.com/${model.name}`}
+            target="_blank"
+            className="deco-none"
+          >
+            <h4 title={model.name}>{model.name}</h4>
+          </a>
         </div>
-        {/* <div className="col-xs-3"> */}
-        {/*   <div className="row"> */}
-        {/*     <h2 id={model.id} className='out-degree'>{model.outDegree}</h2> */}
-        {/*   </div> */}
-        {/*   <div className="row small">{model.outDegreeLabel}</div> */}
-        {/* </div> */}
+        {isRepoName(model.name) ? (
+          <div className="col-xs-3">
+            <h2 id={model.id} className="in-degree">
+              {model.inDegree}
+            </h2>
+            <div className="small">{intl.get("RELATED_DEVELOPER")}</div>
+          </div>
+        ) : (
+          <div className="col-xs-3">
+            <h2 id={model.id} className="out-degree">
+              {model.outDegree}
+            </h2>
+            <div className="small">{intl.get("RELATED_PROJECT")}</div>
+          </div>
+        )}
       </div>
 
-      <div className='visible-xs-block'>
-        <div className='row info-block'>
-          <div className='col-xs-6 no-overflow'><h5>{model.name}</h5></div>
-          <div id={model.id} className='in-degree col-xs-3'>{model.inDegree}</div>
-          {/* <div id={model.id} className='out-degree col-xs-3'>{model.outDegree}</div> */}
+      {/* when window size is too small */}
+      <div className="visible-xs-block">
+        <div className="row info-block">
+          <div className="col-xs-6 no-overflow">
+            <h5>{model.name}</h5>
+          </div>
+          {isRepoName(model.name) ? (
+            <div id={model.id} className="in-degree col-xs-3">
+              {model.inDegree}
+            </div>
+          ) : (
+            <div id={model.id} className="out-degree col-xs-3">
+              {model.outDegree}
+            </div>
+          )}
         </div>
       </div>
     </div>

diff --git a/src/galaxy/store/hover.js b/src/galaxy/store/hover.js
@@ -4,6 +4,7 @@ import eventify from 'ngraph.events';
 import appEvents from '../service/appEvents.js';
 import scene from './scene.js';
 import getBaseNodeViewModel from './baseNodeViewModel.js';
+import isRepoName from '../utils/isRepoName.js';
 
 export default hoverStore();
 
@@ -43,10 +44,13 @@ function createDefaultTemplate(viewModel) {
   };
 
   return (
-      <div style={style} className='node-hover-tooltip'>
-        {viewModel.name}
-        <span className='in-degree'>{viewModel.inDegree}</span>
-        {/* <span className='out-degree'>{viewModel.outDegree}</span> */}
-      </div>
-    );
+    <div style={style} className="node-hover-tooltip">
+      {viewModel.name}
+      {isRepoName(viewModel.name) ? (
+        <span className="in-degree">{viewModel.inDegree}</span>
+      ) : (
+        <span className="out-degree">{viewModel.outDegree}</span>
+      )}
+    </div>
+  );
 }
diff --git a/src/galaxy/utils/isRepoName.js b/src/galaxy/utils/isRepoName.js
@@ -0,0 +1,4 @@
+export default function isRepoName(nodeName) {
+  // A repo name should be xxx/xxx
+  return nodeName.includes("/");
+}
diff --git a/src/galaxy/windows/nodeInfoRow.jsx b/src/galaxy/windows/nodeInfoRow.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import formatNumber from '../utils/formatNumber.js';
 
+import isRepoName from '../utils/isRepoName.js';
+
 export default function windowTitle(props) {
   var item = props.viewModel;
   var image = '';
@@ -9,19 +11,22 @@ export default function windowTitle(props) {
   }
 
   return (
-      <div className='row'>
-        <div className='no-oveflow col-md-9 col-xs-9'>
+    <div className="row">
+      <div className="no-oveflow col-md-9 col-xs-9">
         {image}
-         <span id={item.id} className='node-focus'>
-            {item.name}
-          </span>
+        <span id={item.id} className="node-focus">
+          {item.name}
+        </span>
+      </div>
+      {isRepoName(item.name) ? (
+        <div id={item.id} className="in-degree col-md-3 col-xs-3 text-center">
+          {formatNumber(item.in)}
         </div>
-        <div id={item.id} className='in-degree col-md-3 col-xs-3'>
-         {formatNumber(item.in)}
+      ) : (
+        <div id={item.id} className="out-degree col-md-3 col-xs-3 text-center">
+          {formatNumber(item.out)}
         </div>
-        {/* <div id={item.id} className='out-degree col-md-3 col-xs-3'> */}
-        {/*  {formatNumber(item.out)} */}
-        {/* </div> */}
-      </div>
+      )}
+    </div>
   );
 }
diff --git a/src/galaxy/windows/windowTitle.jsx b/src/galaxy/windows/windowTitle.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import resource from '../utils/resources.js';
 import intl from 'react-intl-universal';
 
+import isRepoName from "../utils/isRepoName.js";
+
 registerDataTemplates();
 
 class windowTitle extends React.Component {
@@ -46,12 +48,13 @@ function registerDataTemplates() {
             <span className="node-name node-focus" id={this.props.id}>
               {this.props.nodeName}
             </span>
-            {/* <span className={this.props.connectionClassName === 'in' ? 'window-indegree' : 'window-outdgree'}> */}
-            {/*   {this.props.degreeKindName} */}
-            {/* </span> */}
-            {intl.getHTML("COUNT_FOR_RELATED_PROJECTS", {
-              count: this.props.degreeNumber,
-            })}
+            {isRepoName(this.props.nodeName)
+              ? intl.getHTML("COUNT_FOR_RELATED_DEVELOPORS", {
+                  count: this.props.degreeNumber,
+                })
+              : intl.getHTML("COUNT_FOR_RELATED_PROJECTS", {
+                  count: this.props.degreeNumber,
+                })}
           </h4>
         );
       }