minor UI changes

Author: Konstiman

examples/project_website/data-config_base.js

@@ -48,4 +48,5 @@ var data_config = {
   show_cite_button: true,
 
   highlight_query_terms: true,
+  show_context_oa_number: false,
 };

examples/project_website/data-config_pubmed.js

@@ -46,6 +46,7 @@ var data_config = {
 
     show_cite_button: true,
 
-    highlight_query_terms: true
+    highlight_query_terms: true,
+    show_context_oa_number: false,
 
 };

vis/js/components/Headstart.js

@@ -48,10 +48,10 @@ const Headstart = ({
           </div>
         )}
         {renderList && <List />}
+        <Footer />
       </div>
       <Toolbar />
       <Modals />
-      <Footer />
     </LocalizationProvider>
   );
 };

vis/js/default-config.js

@@ -548,10 +548,10 @@ var config = {
             embed_button_text: 'Copy',
             embed_title: 'embed map',
             embed_body_text: 'You can use this code to embed the visualization on your own website or in a dashboard.',
-            high_metadata_quality: "High metadata quality",
+            high_metadata_quality: "Data quality",
             high_metadata_quality_desc_base: "This knowledge map only includes documents with an abstract (min. 300 characters). High metadata quality significantly improves the quality of your knowledge map.",
             high_metadata_quality_desc_pubmed: "This knowledge map only includes documents with an abstract. High metadata quality significantly improves the quality of your knowledge map.", 
-            low_metadata_quality: "Low metadata quality",
+            low_metadata_quality: "Data quality",
             low_metadata_quality_desc_base: "This knowledge map includes documents with and without an abstract. Low metadata quality may significantly reduce the quality of your knowledge map. ",
             low_metadata_quality_desc_pubmed: "This knowledge map includes documents with and without an abstract. Low metadata quality may significantly reduce the quality of your knowledge map. ",
             area_streamgraph: "Stream",
@@ -573,7 +573,7 @@ var config = {
             search_placeholder: "Search within visualization...",
             show_list: "Show list",
             hide_list: "Hide list",
-            intro_label: "more info",
+            intro_label: "More info",
             relevance: "relevance",
             readers: "readers",
             tweets: "tweets",

vis/js/templates/Paper.jsx

@@ -3,14 +3,14 @@ import Highlight from "../components/Highlight";
 import Hyphenate from "../components/Hyphenate";
 
 import { select } from "d3-selection";
+import { formatPaperDate } from "./listentry/Title";
 
 class Paper extends React.Component {
   constructor(props) {
     super(props);
     // TODO rewrite this using https://www.npmjs.com/package/core-decorators#autobind ?
-    this.getCoordinatesAndDimensions = this.getCoordinatesAndDimensions.bind(
-      this
-    );
+    this.getCoordinatesAndDimensions =
+      this.getCoordinatesAndDimensions.bind(this);
     this.isAnimated = this.isAnimated.bind(this);
     this.animate = this.animate.bind(this);
     this.animatePath = this.animatePath.bind(this);
@@ -104,10 +104,8 @@ class Paper extends React.Component {
     const { x, y, width: baseWidth, height: baseHeight } = this.state;
     const { path: basePath, dogEar: baseDogEar } = this.state;
 
-    let {
-      width: realWidth,
-      height: realHeight,
-    } = this.getCoordinatesAndDimensions();
+    let { width: realWidth, height: realHeight } =
+      this.getCoordinatesAndDimensions();
 
     const handleMouseOver = () => {
       let newEnlargeFactor = null;
@@ -227,7 +225,12 @@ class Paper extends React.Component {
                   <Hyphenate>
                     <Highlight hyphenated queryHighlight>
                       {title}
+                    </Highlight>{" "}
+                    (
+                    <Highlight queryHighlight>
+                      {formatPaperDate(year)}
                     </Highlight>
+                    )
                   </Hyphenate>
                 </p>
                 <p id="details" className={sizeModifierClass}>
@@ -248,10 +251,6 @@ class Paper extends React.Component {
                       </Hyphenate>
                     </>
                   )}
-                  <span className="pubyear">
-                    {" "}
-                    (<Highlight queryHighlight>{year}</Highlight>)
-                  </span>
                 </p>
               </div>
               {!!readersLabel &&
@@ -455,10 +454,10 @@ const getMetadataHeight = (realHeight, hasReaders, isZoomed) => {
   }
 
   const height = realHeight - readersHeight;
-  
+
   if (height >= 20) {
     return height;
   }
 
   return 20;
-}
+};

vis/js/templates/listentry/Title.jsx

@@ -8,7 +8,7 @@ import { getDateFromTimestamp } from "../../utils/dates";
 import { mapDispatchToListEntriesProps } from "../../utils/eventhandlers";
 import useMatomo from "../../utils/useMatomo";
 
-const MAX_TITLE_LENGTH = 150;
+const MAX_TITLE_LENGTH = 160;
 
 const Title = ({
   paper,
@@ -37,7 +37,7 @@ const Title = ({
 
   const rawTitle = paper.title ? paper.title : loc.default_paper_title;
 
-  const formattedDate = ` (${formatDate(paper.year)})`;
+  const formattedDate = ` (${formatPaperDate(paper.year)})`;
   const formattedTitle = isSelected
     ? rawTitle
     : formatTitle(rawTitle, MAX_TITLE_LENGTH - formattedDate.length);
@@ -62,7 +62,7 @@ const mapStateToProps = (state) => ({
 
 export default connect(mapStateToProps, mapDispatchToListEntriesProps)(Title);
 
-const formatDate = (date) => {
+export const formatPaperDate = (date) => {
   const strDate = date.toString();
   let format = "yyyy-mm-dd";
   if (strDate.match(/^\d{4}(-\d{2})?$/)) {

vis/js/utils/dimensions.js

@@ -1,7 +1,7 @@
 import $ from "jquery";
 
 // these constants are hardcoded dimensions of various headstart parts
-const TITLE_HEIGHT = 54.7;
+const TITLE_HEIGHT = 57;
 const TOOLBAR_HEIGHT = 66;
 const TITLE_IMAGE_HEIGHT = 70;
 const SHOW_HIDE_BTN_HEIGHT = 34;

vis/stylesheets/modules/list/_entry.scss

@@ -572,7 +572,6 @@ img#preview_page {
 
     .list_metadata .list_title {
         font-size: 13px;
-        max-width: 72%;
     }
 
     #list_abstract {

vis/stylesheets/modules/map/_header.scss

@@ -57,7 +57,7 @@
 }
 
 #context {
-    font-size: 11px;
+    font-size: 12px;
     color: $black;
     .context_moreinfo {
         border-bottom: 1px solid $link-gray;
@@ -302,6 +302,7 @@
     display: inline-block;
     margin-right: 1%;
     height: 15px;
+    margin-bottom: 3px;
 }
 
 //.context_metadata_high {