added content provider info into Headstart

Author: Konstiman

vis/js/components/ContextLine.js

@@ -53,8 +53,10 @@ class ContextLine extends React.Component {
         </NumArticles>
         {defined(params.dataSource) && (
           <DataSource
-            value={params.dataSource}
             label={localization.source_label}
+            source={params.dataSource}
+            contentProvider={params.contentProvider}
+            popoverContainer={this.props.popoverContainer}
           />
         )}
         {defined(params.timespan) && <Timespan>{params.timespan}</Timespan>}

vis/js/reducers/contextLine.js

@@ -38,6 +38,7 @@ const contextLine = (state = {}, action) => {
           typeof config.service_name !== "undefined"
             ? config.service_name
             : config.service_names[context.service],
+        contentProvider: context.params ? context.params.repo_name : null,
         paperCount:
           config.create_title_from_context_style === "viper"
             ? papers.filter((p) => p.resulttype.includes("publication")).length

vis/js/templates/contextfeatures/DataSource.jsx

@@ -1,13 +1,38 @@
 import React from "react";
+import { shorten } from "../../utils/string";
+import HoverPopover from "../HoverPopover";
+
+const MAX_CONTENT_PROVIDER_LENGTH = 20;
+
+const DataSource = ({ label, source, contentProvider, popoverContainer }) => {
+  if (contentProvider) {
+    const content = (
+      shorten(contentProvider, MAX_CONTENT_PROVIDER_LENGTH) + ` via ${source}`
+    ).replace("... via ", "...via ");
+
+    return (
+      // html template starts here
+      <span id="source" className="context_item">
+        {label}:{" "}
+        <HoverPopover
+          id="doctypes-popover"
+          container={popoverContainer}
+          content={`${contentProvider} (via ${source})`}
+        >
+          <span className="context_moreinfo">{content}</span>
+        </HoverPopover>
+      </span>
+      // html template ends here
+    );
+  }
 
-const DataSource = ({ label, value }) => {
   return (
     // html template starts here
     <span
       id="source"
       className="context_item"
       dangerouslySetInnerHTML={{
-        __html: `${label}: ${value}`,
+        __html: `${label}: ${source}`,
       }}
     ></span>
     // html template ends here

vis/js/templates/modals/infomodal/subcomponents/DataSource.jsx

@@ -1,12 +1,24 @@
 import React from "react";
 
-const DataSource = ({ source, description, logo }) => {
+const DataSource = ({ source, contentProvider, description, logo }) => {
+  const getDataSource = () => {
+    if (!contentProvider) {
+      return <strong>{source}</strong>;
+    }
+
+    return (
+      <>
+        {contentProvider} (via {source})
+      </>
+    );
+  };
+
   return (
     // html template starts here
     <>
       <h3>Data source</h3>
       <p>
-        The data is taken from <strong>{source}</strong>. {description}
+        The data is taken from {getDataSource()}. {description}
       </p>
       {!!logo && <p className="datasource-logo">{logo}</p>}
     </>

vis/js/templates/modals/infomodal/subcomponents/StandardKMInfo.jsx

@@ -8,7 +8,7 @@ const StandardKMInfo = ({
   serviceName,
   serviceDesc,
   serviceLogo,
-  params: { query, customTitle },
+  params: { query, customTitle, repo_name },
 }) => {
   return (
     // html template starts here
@@ -72,6 +72,7 @@ const StandardKMInfo = ({
         {!!serviceName && (
           <DataSource
             source={serviceName}
+            contentProvider={repo_name}
             description={serviceDesc}
             logo={serviceLogo}
           />

vis/js/templates/modals/infomodal/subcomponents/StandardSGInfo.jsx

@@ -8,7 +8,7 @@ const StandardSGInfo = ({
   serviceName,
   serviceDesc,
   serviceLogo,
-  params: { query, customTitle },
+  params: { query, customTitle, repo_name },
 }) => {
   return (
     // html template starts here
@@ -44,6 +44,7 @@ const StandardSGInfo = ({
         {!!serviceName && (
           <DataSource
             source={serviceName}
+            contentProvider={repo_name}
             description={serviceDesc}
             logo={serviceLogo}
           />