Show ranks.

src/content-scripts/twitter/js/HiveAPI.js

@@ -14,27 +14,31 @@ export class HiveAPI {
     this.cache = _cache;
   }
 
-  async getTwitterUserScore(id, cluster = this.defaultCluster) {
+  async getTwitterUserScore(id, clusterName = this.defaultCluster) {
     const { data, status } = await this.getTwitterUserData(id);
 
     let score = 0;
-    let name = cluster;
+    let name = clusterName;
     let indexed = false;
+    let rank = null;
 
     if (status === HIVE_API_FETCH_DATA_STATUS.SUCCESS) {
-      if (cluster === 'Highest') {
+      if (clusterName === 'Highest') {
         const highestScoreCluster = data.clusters.slice().sort((a, b) => b.score - a.score)[0];
 
         name = highestScoreCluster.abbr;
         score = highestScoreCluster.score;
+        rank = highestScoreCluster.rank;
       } else {
-        score = data.clusters.find(item => item.abbr === cluster).score;
+        const cluster = data.clusters.find(item => item.abbr === clusterName);
+        score = cluster.score;
+        rank = cluster.rank;
       }
 
       indexed = true;
     }
 
-    return { name, score, indexed };
+    return { name, score, rank, indexed };
   }
 
   async getTwitterUserClusters(id) {

src/content-scripts/twitter/js/ProfileScore.js

@@ -40,37 +40,66 @@ export class TwitterProfileScoreExtension {
     const {
       score: defaultClusterScore,
       name: defaultClusterName,
+      rank: defaultClusterRank,
       indexed: accountIndexed
     } = await this._api.getTwitterUserScore(userTwitterId);
 
-    this.displayUserScore(defaultClusterScore, defaultClusterName, accountIndexed);
+    this.displayUserScore(
+      defaultClusterScore,
+      defaultClusterRank,
+      defaultClusterName,
+      accountIndexed
+    );
   }
 
-  async displayUserScore(defaultClusterScore, defaultClusterName, accountIndexed) {
-    const roundedDefaultClusterScore = accountIndexed
-      ? Math.round(defaultClusterScore)
-      : CONFIG.NO_SCORE_TEXT;
-
+  async displayUserScore(
+    defaultClusterScore,
+    defaultClusterRank,
+    defaultClusterName,
+    accountIndexed
+  ) {
     let tooltip = CONFIG.NO_SCORE_TOOLTIP;
+    let label = '';
+    let value = CONFIG.NO_SCORE_TEXT;
+
+    const option = await this._settings.getOptionValue('displaySetting');
+
+    if (
+      accountIndexed &&
+      ['showRanksWithScoreFallback', 'showRanks'].includes(option) &&
+      defaultClusterRank
+    ) {
+      value = `${defaultClusterRank}`;
+      label = `${defaultClusterName} Rank`;
+      tooltip = `${defaultClusterName} Rank ${defaultClusterRank}`;
+    } else if (option !== 'showRanks') {
+      label = `${defaultClusterName} Score`;
 
       if (accountIndexed) {
-      tooltip = `${defaultClusterName} Score ${roundedDefaultClusterScore}`;
+        value = Math.round(defaultClusterScore);
+        tooltip = `${defaultClusterName} Score ${value}`;
+      }
     }
 
     const displayElement = document.createElement('div');
     displayElement.classList.add('ProfileNav-item');
     displayElement.classList.add(PROFILE_SCORE_EXTENSION_CLASS_NAME);
+
     displayElement.innerHTML = `
             <div class="ProfileNav-stat ProfileNav-stat--link u-borderUserColor u-textCenter js-tooltip js-nav u-textUserColor" href="#" data-original-title="${tooltip}">
-                  <span class="ProfileNav-label">${defaultClusterName} Score</span>
-                  <span class="ProfileNav-value" data-count="${roundedDefaultClusterScore}" data-is-compact="false">${roundedDefaultClusterScore}</span>
+                  <span class="ProfileNav-label">${label}</span>
+                  <span class="ProfileNav-value" data-count="${value}" data-is-compact="false">${value}</span>
             </div>
         `;
 
+    if (label) {
       if (accountIndexed) {
         const popup = new ProfilePopup(this.getUserId(), this._api, this._settings);
         popup.showOnClick(displayElement);
       }
+    } else {
+      displayElement.style.display = 'none';
+    }
 
     document
       .querySelector('.ProfileNav-item:nth-of-type(4)')

src/content-scripts/twitter/js/Settings.js

@@ -2,4 +2,10 @@ export class ExtensionSettings {
   get isDarkTheme() {
     return Boolean(document.querySelector('.js-nightmode-icon.Icon--crescentFilled'));
   }
+
+  getOptionValue(name) {
+    return new Promise(resolve => {
+      chrome.storage.sync.get([name], result => resolve(result[name]));
+    });
+  }
 }

src/content-scripts/twitter/js/TweetsAuthorScore.js

@@ -76,14 +76,17 @@ export class TwitterTweetsAuthorScoreExtension {
       const authorId = tweet.getAttribute('data-user-id');
 
       const {
-        name: clusterName,
+        name: defaultClusterName,
         score: userScore,
-        indexed: userIndexed
+        rank: defaultClusterRank,
+        indexed: accountIndexed
       } = await this._api.getTwitterUserScore(authorId);
 
       const tweetIsThread =
         Boolean(tweet.querySelector('.self-thread-tweet-cta')) ||
-        tweet.parentElement.parentElement.classList.contains('ThreadedConversation-tweet');
+        tweet.parentElement.parentElement.classList.contains('ThreadedConversation-tweet') ||
+        tweet.parentElement.classList.contains('conversation-first-visible-tweet') ||
+        tweet.classList.contains('conversation-tweet');
 
       let threadClass = TWEET_AUTHOR_SCORE_CLASS + '_display-in-thread';
 
@@ -91,21 +94,37 @@ export class TwitterTweetsAuthorScoreExtension {
         threadClass += '-dark';
       }
 
-      let roundedScore = CONFIG.NO_SCORE_TEXT;
+      const option = await this._settings.getOptionValue('displaySetting');
+
+      let value = CONFIG.NO_SCORE_TEXT;
       let tooltip = CONFIG.NO_SCORE_TOOLTIP;
 
-      if (userIndexed) {
-        roundedScore = Math.round(userScore);
-        tooltip = `${clusterName} Score ${roundedScore}`;
+      if (
+        accountIndexed &&
+        ['showRanksWithScoreFallback', 'showRanks'].includes(option) &&
+        defaultClusterRank
+      ) {
+        value = `${defaultClusterRank}`;
+        tooltip = `${defaultClusterName} Rank ${defaultClusterRank}`;
+      } else if (accountIndexed && option !== 'showRanks') {
+        value = Math.round(userScore);
+        tooltip = `${defaultClusterName} Score ${value}`;
+      } else if (option === 'showRanks' && !accountIndexed) {
+        value = '';
+        tooltip = '';
+      }
+
+      if (!value || !tooltip) {
+        return;
       }
 
       const userScoreDisplay = document.createElement('div');
       userScoreDisplay.classList.add(TWEET_AUTHOR_SCORE_CLASS);
       userScoreDisplay.innerHTML = `<b class="${TWEET_AUTHOR_SCORE_CLASS}_display ${
         tweetIsThread ? threadClass : ''
-      } js-tooltip" data-original-title="${tooltip}">${roundedScore}</b>`;
+      } js-tooltip" data-original-title="${tooltip}">${value}</b>`;
 
-      if (userIndexed) {
+      if (accountIndexed) {
         const popup = new ProfilePopup(authorId, this._api, this._settings);
         popup.showOnClick(userScoreDisplay);
       }

src/content-scripts/twitter/js/index.js

@@ -27,18 +27,13 @@ const observeDOM = (() => {
   };
 })();
 
-function getOptionValue(name) {
-  return new Promise(resolve => {
-    chrome.storage.sync.get([name], result => resolve(result[name]));
-  });
-}
-
 (async () => {
-  const clusterToDisplay = await getOptionValue('clusterToDisplay');
+  const settings = new ExtensionSettings();
+
+  const clusterToDisplay = await settings.getOptionValue('clusterToDisplay');
 
   const cache = new CustomCache();
   const api = new HiveAPI(CONFIG.API_HOST, clusterToDisplay, cache);
-  const settings = new ExtensionSettings();
 
   const twitterProfileScore = new TwitterProfileScoreExtension(api, settings);
   const twitterTweetsAuthorScoreExtension = new TwitterTweetsAuthorScoreExtension(api, settings);

src/content-scripts/twitter/styles/twitter.scss

@@ -101,7 +101,6 @@
   }
 
   &_tweet-author-score {
-    color: #4ab3f4;
     text-align: center;
     display: block;
     float: left;
@@ -115,6 +114,11 @@
       display: block;
       position: relative;
       user-select: none;
+      color: #657786;
+
+      &:hover {
+        color: #4ab3f4;
+      }
 
       &-in-thread {
         background: white;