LB-1102, LB-1610, LB-945: Revamp Top Entity stats pages

frontend/css/listens-page.less

@@ -7,6 +7,7 @@
 @card-shadow-color: #c0c0c0;
 @listen-small-break: @screen-sm;
 @cover-art-thumbnail-size: 66px;
+@listen-card-margin-bottom: 7px;
 
 #dashboard {
   .side-column > *:not(:last-child) {
@@ -44,7 +45,7 @@
   &.card {
     height: initial;
   }
-  margin-bottom: 7px;
+  margin-bottom: @listen-card-margin-bottom;
   a:focus,
   a:hover {
     text-decoration: underline;

frontend/css/stats.less

@@ -24,3 +24,87 @@
     position: relative;
   }
 }
+
+@bar-height: 4.5em;
+.bar-chart {
+  position: relative;
+  width: 100%;
+  margin-bottom: 1em;
+  min-height: calc(25 * @bar-height); // 25 items on the graph
+  > * {
+    position: absolute;
+    width: 100%;
+  }
+  .graph-tooltip {
+    z-index: 100;
+    background: white;
+    padding: 9px 12px;
+    border: 1px solid #ccc;
+    width: 300px;
+  }
+  foreignObject {
+    //default width and height, they are overwritten in the CustomBarComponent
+    width: 95%;
+    height: @bar-height;
+    padding: 0.5em;
+    overflow: visible;
+    .graph-bar {
+      height: 100%;
+      gap: 0.6em;
+      .position {
+        margin: 0;
+        flex: 0;
+        border-right: 1px solid grey;
+        padding-right: 0.6em;
+        font-size: smaller;
+        white-space: nowrap;
+        text-align: center;
+      }
+      align-items: center;
+      > .graph-bar-text {
+        overflow: auto;
+        min-width: 150px;
+      }
+      .graph-bar-entity {
+        font-weight: bold;
+        color: darken(@light-grey, 30%);
+      }
+      .graph-bar-artist {
+        color: @light-grey;
+        font-size: 0.8em;
+      }
+    }
+    @media (max-width: @screen-phone) {
+      // On mobile, show the position to the right of the bar to leave more space for the text
+      .graph-bar {
+        position: relative;
+        .position {
+          position: absolute;
+          border: none;
+          left: calc(100% + 1.2em);
+        }
+      }
+    }
+  }
+  @media (max-width: @screen-tablet) {
+    width: calc(100vw - 2em);
+  }
+}
+
+.top-entity-listencards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 @listen-card-margin-bottom;
+  .listen-card {
+    flex: 1;
+    flex-basis: 360px;
+    max-width: 100%;
+    .main-content .right-section {
+      flex: 0;
+    }
+  }
+}
+.release-cards-grid.top-entity-grid {
+  grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
+  place-content: space-evenly;
+}

frontend/js/src/explore/fresh-releases/components/ReleaseCard.tsx

@@ -141,9 +141,14 @@ export default function ReleaseCard(props: ReleaseCardProps) {
     }
   }, [releaseMBID, releaseGroupMBID, caaID, caaReleaseMBID, setCoverartSrc]);
 
-  const linkToEntity = releaseGroupMBID
-    ? `/album/${releaseGroupMBID}/`
-    : `/release/${releaseMBID}/`;
+  let linkToEntity: string;
+  if (releaseGroupMBID) {
+    linkToEntity = `/album/${releaseGroupMBID}/`;
+  } else if (releaseMBID) {
+    linkToEntity = `/release/${releaseMBID}/`;
+  } else {
+    linkToEntity = `/search/?search_type=album&search_term=${releaseName}+${artistCreditName}`;
+  }
 
   const coverArtElement = coverartSrc ? (
     <>
@@ -233,7 +238,7 @@ export default function ReleaseCard(props: ReleaseCardProps) {
           </div>
         </div>
       )}
-      {showArtist && isArray(artistCredits) && (
+      {showArtist && isArray(artistCredits) && artistCredits.length && (
         <div className="release-artist" title={artistCreditName}>
           {artistCredits.map((ac) => (
             <span key={ac.artist_mbid}>
@@ -247,7 +252,15 @@ export default function ReleaseCard(props: ReleaseCardProps) {
       )}
       {showArtist && !isArray(artistCredits) && (
         <div className="release-artist" title={artistCreditName}>
-          <Link to={`/artist/${artistMBIDs[0]}/`}>{artistCreditName}</Link>
+          <Link
+            to={
+              artistMBIDs.length
+                ? `/artist/${artistMBIDs[0]}/`
+                : `/search/?search_type=artist&search_term=${artistCreditName}`
+            }
+          >
+            {artistCreditName}
+          </Link>
         </div>
       )}
     </div>