feat: show more data (in an embeded way)

package.json

@@ -18,9 +18,6 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@antv/g6": "^4.6.4",
-    "@antv/graphin": "^2.5.1",
-    "@antv/graphin-components": "^2.4.0",
     "@fluentui/react": "^8.62.0",
     "@fluentui/react-hooks": "^8.3.13",
     "@hot-loader/react-dom": "^17.0.2",
@@ -34,7 +31,8 @@
     "office-ui-fabric-react": "^7.183.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hot-loader": "^4.13.0"
+    "react-hot-loader": "^4.13.0",
+    "react-tooltip": "^4.2.21"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",

src/Perceptor.tsx

@@ -47,7 +47,9 @@ export class Perceptor extends PerceptorBase {
   public async loadFeatures(): Promise<void> {
     //
     Perceptor.Features.forEach(async (Feature, name) => {
-      const featureId = name.replace(name[0], name[0].toLowerCase());
+      const featureId = name
+        .replace(name[0], name[0].toLowerCase())
+        .replace('Anchor', '');
       logger.info('trying to load ', featureId);
       if (this.settings.toJson()[featureId] === false) {
         logger.info(featureId, 'is disabled');

src/anchors/DeveloperNetworkAnchor.tsx

@@ -26,10 +26,7 @@ class DeveloperNetworkAnchor extends PerceptorBase {
       .trim();
     const settings = await loadSettings();
     render(
-      <DeveloperNetworkView
-        currentDeveloper={this._currentDeveloper}
-        graphType={settings.graphType}
-      />,
+      <DeveloperNetworkView currentDeveloper={this._currentDeveloper} />,
       DeveloperNetworkDiv
     );
     profileArea.after(DeveloperNetworkDiv);

src/anchors/ProjectNetworkAnchor.tsx

@@ -23,10 +23,7 @@ class ProjectNetworkAnchor extends PerceptorBase {
     this._currentRepo = utils.getRepositoryInfo(window.location)!.nameWithOwner;
     const settings = await loadSettings();
     render(
-      <ProjectNetworkView
-        currentRepo={this._currentRepo}
-        graphType={settings.graphType}
-      />,
+      <ProjectNetworkView currentRepo={this._currentRepo} />,
       ProjectNetworkDiv
     );
     perceptorContainer.prepend(ProjectNetworkDiv);

src/anchors/RepoDetailForkAnchor.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render } from 'react-dom';
+import $ from 'jquery';
+import PerceptorBase from '../PerceptorBase';
+import { runsWhen, isPublicRepo } from '../utils/utils';
+import { utils } from 'github-url-detection';
+import RepoDetailForkView from '../views/RepoDetailForkView/RepoDetailForkView';
+
+@runsWhen([isPublicRepo])
+class RepoDetailForkAnchor extends PerceptorBase {
+  private _currentRepo: string;
+
+  constructor() {
+    super();
+    this._currentRepo = '';
+  }
+
+  public async run(): Promise<void> {
+    // Ideally, we should do nothing if the container already exists. But
+    // when I try to navigate back from profile page, I find tooltip won't
+    // show though the related element exists. I think there might be something
+    // else in javascript context, which is broken after navigation between
+    // pages. So instead of doing nothing, I remove the container and reload
+    // it again. At least this way works.
+    if ($('#fork-tooltip-container').length > 0) {
+      $('#fork-tooltip-container').remove();
+    }
+
+    this._currentRepo = utils.getRepositoryInfo(window.location)!.nameWithOwner;
+
+    $('a[data-ga-click*="show fork modal"]').attr({
+      'data-tip': '',
+      'data-for': 'fork-tooltip',
+      'data-place': 'bottom',
+      'data-type': 'dark',
+      'data-effect': 'solid',
+      'data-delay-hide': 500,
+      'data-delay-show': 500,
+    });
+
+    const tooltipContainer = document.createElement('div');
+    tooltipContainer.id = 'fork-tooltip-container';
+    $('#repository-container-header').append(tooltipContainer);
+    render(
+      <RepoDetailForkView currentRepo={this._currentRepo} />,
+      tooltipContainer
+    );
+  }
+}
+
+export default RepoDetailForkAnchor;

src/anchors/RepoDetailIssueAnchor.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render } from 'react-dom';
+import $ from 'jquery';
+import PerceptorBase from '../PerceptorBase';
+import { runsWhen, isPublicRepo } from '../utils/utils';
+import { utils } from 'github-url-detection';
+import RepoDetailIssueView from '../views/RepoDetailIssueView/RepoDetailIssueView';
+
+@runsWhen([isPublicRepo])
+class RepoDetailIssueAnchor extends PerceptorBase {
+  private _currentRepo: string;
+
+  constructor() {
+    super();
+    this._currentRepo = '';
+  }
+
+  public async run(): Promise<void> {
+    // Ideally, we should do nothing if the container already exists. But
+    // when I try to navigate back from profile page, I find tooltip won't
+    // show though the related element exists. I think there might be something
+    // else in javascript context, which is broken after navigation between
+    // pages. So instead of doing nothing, I remove the container and reload
+    // it again. At least this way works.
+    if ($('#issue-tooltip-container').length > 0) {
+      $('#issue-tooltip-container').remove();
+    }
+
+    this._currentRepo = utils.getRepositoryInfo(window.location)!.nameWithOwner;
+
+    $('#issues-tab').attr({
+      'data-tip': '',
+      'data-for': 'issue-tooltip',
+      'data-place': 'bottom',
+      'data-type': 'dark',
+      'data-effect': 'solid',
+      'data-delay-hide': 500,
+      'data-delay-show': 500,
+    });
+
+    const tooltipContainer = document.createElement('div');
+    tooltipContainer.id = 'issue-tooltip-container';
+    $('#repository-container-header').append(tooltipContainer);
+    render(
+      <RepoDetailIssueView currentRepo={this._currentRepo} />,
+      tooltipContainer
+    );
+  }
+}
+
+export default RepoDetailIssueAnchor;

src/anchors/RepoDetailPRAnchor.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render } from 'react-dom';
+import $ from 'jquery';
+import PerceptorBase from '../PerceptorBase';
+import { runsWhen, isPublicRepo } from '../utils/utils';
+import { utils } from 'github-url-detection';
+import RepoDetailPRView from '../views/RepoDetailPRView/RepoDetailPRView';
+
+@runsWhen([isPublicRepo])
+class RepoDetailPRAnchor extends PerceptorBase {
+  private _currentRepo: string;
+
+  constructor() {
+    super();
+    this._currentRepo = '';
+  }
+
+  public async run(): Promise<void> {
+    // Ideally, we should do nothing if the container already exists. But
+    // when I try to navigate back from profile page, I find tooltip won't
+    // show though the related element exists. I think there might be something
+    // else in javascript context, which is broken after navigation between
+    // pages. So instead of doing nothing, I remove the container and reload
+    // it again. At least this way works.
+    if ($('#pr-tooltip-container').length > 0) {
+      $('#pr-tooltip-container').remove();
+    }
+
+    this._currentRepo = utils.getRepositoryInfo(window.location)!.nameWithOwner;
+
+    $('#pull-requests-tab').attr({
+      'data-tip': '',
+      'data-for': 'pr-tooltip',
+      'data-place': 'bottom',
+      'data-type': 'dark',
+      'data-effect': 'solid',
+      'data-delay-hide': 500,
+      'data-delay-show': 500,
+    });
+
+    const tooltipContainer = document.createElement('div');
+    tooltipContainer.id = 'pr-tooltip-container';
+    $('#repository-container-header').append(tooltipContainer);
+    render(
+      <RepoDetailPRView currentRepo={this._currentRepo} />,
+      tooltipContainer
+    );
+  }
+}
+
+export default RepoDetailPRAnchor;

src/anchors/RepoDetailStarAnchor.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render } from 'react-dom';
+import $ from 'jquery';
+import PerceptorBase from '../PerceptorBase';
+import { runsWhen, isPublicRepo } from '../utils/utils';
+import { utils } from 'github-url-detection';
+import RepoDetailStarView from '../views/RepoDetailStarView/RepoDetailStarView';
+
+@runsWhen([isPublicRepo])
+class RepoDetailStarAnchor extends PerceptorBase {
+  private _currentRepo: string;
+
+  constructor() {
+    super();
+    this._currentRepo = '';
+  }
+
+  public async run(): Promise<void> {
+    // Ideally, we should do nothing if the container already exists. But
+    // when I try to navigate back from profile page, I find tooltip won't
+    // show though the related element exists. I think there might be something
+    // else in javascript context, which is broken after navigation between
+    // pages. So instead of doing nothing, I remove the container and reload
+    // it again. At least this way works.
+    if ($('#star-tooltip-container').length > 0) {
+      $('#star-tooltip-container').remove();
+    }
+
+    this._currentRepo = utils.getRepositoryInfo(window.location)!.nameWithOwner;
+
+    const attributes = {
+      'data-tip': '',
+      'data-for': 'star-tooltip',
+      'data-place': 'left',
+      'data-type': 'dark',
+      'data-effect': 'solid',
+      'data-delay-hide': 500,
+      'data-delay-show': 500,
+    };
+    // The data-ga-click attribute differs after starring, so there are 2 cases
+    $('button[data-ga-click*="click star button"]').attr(attributes);
+    $('button[data-ga-click*="click unstar button"]').attr(attributes);
+
+    const tooltipContainer = document.createElement('div');
+    tooltipContainer.id = 'star-tooltip-container';
+    $('#repository-container-header').append(tooltipContainer);
+    render(
+      <RepoDetailStarView currentRepo={this._currentRepo} />,
+      tooltipContainer
+    );
+  }
+}
+
+export default RepoDetailStarAnchor;

src/anchors/RepoHeaderLabelsAnchor.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render } from 'react-dom';
+import $ from 'jquery';
+import PerceptorBase from '../PerceptorBase';
+import { runsWhen, isPublicRepo } from '../utils/utils';
+import { utils } from 'github-url-detection';
+import RepoHeaderLabelsView from '../views/RepoHeaderLabelsView/RepoHeaderLabelsView';
+
+@runsWhen([isPublicRepo])
+class RepoHeaderLabelsAnchor extends PerceptorBase {
+  private _currentRepo: string;
+
+  constructor() {
+    super();
+    this._currentRepo = '';
+  }
+
+  public async run(): Promise<void> {
+    this._currentRepo = utils.getRepositoryInfo(window.location)!.nameWithOwner;
+
+    let container = null;
+
+    // if not the first time to enter this code
+    if (document.getElementById('repo-header-labels') == null) {
+      container = document.createElement('div');
+      container.id = 'repo-header-labels';
+
+      render(
+        <RepoHeaderLabelsView currentRepo={this._currentRepo} />,
+        container
+      );
+
+      $('#repository-container-header')
+        .find('span.Label.Label--secondary')
+        .after(container);
+    }
+  }
+}
+
+export default RepoHeaderLabelsAnchor;

src/api/repo.ts

@@ -19,3 +19,7 @@ export const getDevelopersByRepo = async (repo: string) => {
 export const getRepoActiInfl = async (repo: string) => {
   return await request(`${OSS_XLAB_ENDPOINT}/hypercrx_repo/${repo}.json`);
 };
+
+export const getRepoDetail = async (repo: string) => {
+  return await request(`${OSS_XLAB_ENDPOINT}/repo_detail/${repo}.json`);
+};

src/components/Graph/Echarts/index.tsx

@@ -21,7 +21,13 @@ interface EChartsWrapperProps {
   /**
    * bind events, default is `{}`
    */
-  readonly onEvents?: Record<string, Function>;
+  readonly onEvents?: Record<
+    string,
+    {
+      query?: string | Object;
+      handler: Function;
+    }
+  >;
 }
 
 const EChartsWrapper: React.FC<EChartsWrapperProps> = ({
@@ -59,11 +65,6 @@ const EChartsWrapper: React.FC<EChartsWrapperProps> = ({
    * render and return a new echart instance
    */
   const renderNewEcharts = () => {
-    const bindEvent = (eventName: string, func: Function) => {
-      instance.on(eventName, (param: any) => {
-        func(param.data);
-      });
-    };
     const instance = getEchartsInstance();
     instance.setOption(option);
     window.addEventListener('resize', () => {
@@ -72,7 +73,17 @@ const EChartsWrapper: React.FC<EChartsWrapperProps> = ({
     // loop and bind events
     for (const eventName in onEvents) {
       if (Object.prototype.hasOwnProperty.call(onEvents, eventName)) {
-        bindEvent(eventName, onEvents[eventName]);
+        const query = onEvents[eventName].query;
+        const handler = onEvents[eventName].handler;
+        if (query) {
+          instance.on(eventName, query, (param: any) => {
+            handler(param.data);
+          });
+        } else {
+          instance.on(eventName, (param: any) => {
+            handler(param.data);
+          });
+        }
       }
     }
   };