OpenKnowledgeMaps · jaels · Apr 9, 2018 · Apr 12, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/BubblesList.js b/src/components/BubblesList.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Bubble from './Bubble';
+import Bubble from './mainHtmlCarriers/Bubble';
 import {observer} from 'mobx-react';
 
 
@@ -22,4 +22,4 @@ const BubblesList =
     }
   );
 
-export default BubblesList;
+export default BubblesList;
diff --git a/src/components/Chart.js b/src/components/Chart.js
@@ -67,6 +67,7 @@ const Chart = observer(
       <Papers store={store} papers={hoveredEntity.filter((paper) => hasSubstring(paper, searchString))}/>;
 
     return (
+        /* HTML starts here */
         <div className="vis-col">
 
           <SubTitle store={store}/>
@@ -90,6 +91,7 @@ const Chart = observer(
             </svg>
           </div>
       </div>
+      /* HTML ends here */
   )
   }
 });

diff --git a/src/components/Filter.js b/src/components/Filter.js
@@ -47,6 +47,7 @@ const Filter = observer(
         <Glyphicon id='searchclear' glyph="remove-circle" onClick={this.clearSearch.bind(this)} style={{display: this.state.displayClearButton}}/>
         : '';
       return (
+          /* HTML starts here */
         <div className="" id="filter_container" style={{width: '187px', height: "30px"}}>
           <form>
             <FormGroup bsSize="sm">
@@ -63,9 +64,10 @@ const Filter = observer(
           </form>
               {glyphicon}
         </div>
+        /* HTML ends here */
 
       );
     }
 });
 
-export default Filter;
+export default Filter;
diff --git a/src/components/Papers.js b/src/components/Papers.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Paper from './Paper';
+import Paper from './mainHtmlCarriers/Paper';
 import {observer} from 'mobx-react';
 
 /**

diff --git a/src/components/SortButtons.js b/src/components/SortButtons.js
@@ -24,6 +24,7 @@ const SortButtons = observer(class List extends React.Component {
     const {store} = this.props;
     const {sortOptions} = store.config;
     return (
+        /* HTML starts here */
       <div className="" id="sort_container" style={{display: "block"}}>
         <span id="sortby">sort by:</span>
         <ToggleButtonGroup type="radio" name="sortbyoptions" defaultValue={1} id="sort-buttons" bsSize="sm">
@@ -34,8 +35,9 @@ const SortButtons = observer(class List extends React.Component {
           })}
         </ToggleButtonGroup>
       </div>
+      /* HTML ends here */
     );
   }
 });
 
-export default SortButtons;
+export default SortButtons;
diff --git a/src/components/SubTitle.js b/src/components/SubTitle.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import Modal from './InfoModal';
+import Modal from './mainHtmlCarriers/InfoModal';
 
 /**
  * SubTitle component
@@ -33,4 +33,4 @@ const SubTitle =
     }
   );
 
-export default SubTitle;
+export default SubTitle;
diff --git a/src/components/Visualization.js b/src/components/Visualization.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Chart from './Chart';
-import List from './List';
+import List from './mainHtmlCarriers/List';
 import { observer } from 'mobx-react';
 /* eslint-disable react/no-direct-mutation-state */
 
@@ -21,4 +21,4 @@ const Visualization =
     )
   );
 
-export default Visualization;
+export default Visualization;
diff --git a/src/components/Bubble.js → src/components/mainHtmlCarriers/Bubble.js b/src/components/Bubble.js → src/components/mainHtmlCarriers/Bubble.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {observer} from 'mobx-react';
-import HighlightableText from './HighlightableText';
-import {onBubbleMouseEnter, onBubbleMouseLeave, onBubbleClick, onBubbleDoubleClick} from '../eventhandlers/BubbleEvents';
+import HighlightableText from '../HighlightableText';
+import {onBubbleMouseEnter, onBubbleMouseLeave, onBubbleClick, onBubbleDoubleClick} from '../../eventhandlers/BubbleEvents';
 
 /**
  * Bubble component
@@ -53,6 +53,7 @@ const Bubble =
 
       const areaName = (node.area.length > 55) ? node.area.slice(0,55) + "..." : node.area;
       return (
+          /* HTML starts here */
         <g onMouseEnter={onBubbleMouseEnter.bind(this, store, node)}
            onMouseLeave={onBubbleMouseLeave.bind(this, store)}
            onClick={onBubbleClick.bind(this, store, node)}
@@ -84,7 +85,8 @@ const Bubble =
             </div>
           </foreignObject>
         </g>
+        /* HTML ends here */
       );
     }
   );
-export default Bubble;
+export default Bubble;
diff --git a/src/components/InfoModal.js → src/components/mainHtmlCarriers/InfoModal.js b/src/components/InfoModal.js → src/components/mainHtmlCarriers/InfoModal.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {Button, Modal} from 'react-bootstrap';
-import top100 from '../static/top100.png';
-import textSimliarity from '../static/textsimilarity.png';
-import headstartSearch from '../static/headstart-search.png';
+import top100 from '../../static/top100.png';
+import textSimliarity from '../../static/textsimilarity.png';
+import headstartSearch from '../../static/headstart-search.png';
 
 /**
  * Renders the "What's this?" button, opens a modal when clicked.
@@ -37,6 +37,7 @@ class InfoModal extends React.Component
   render()
   {
     return (
+        /* HTML starts here */
       <div style={{display: "inline"}}>
         <Button
           bsStyle="danger"
@@ -48,7 +49,7 @@ class InfoModal extends React.Component
 
         <Modal show={this.state.showModal} onHide={this.close.bind(this)}>
           <Modal.Header closeButton>
-            <h3 id="info-title" className="modal-title" style={{fontSize : "20px"}}>What's this?</h3>
+            <h3 id="info-title" className="modal-title" style={{fontSize : "20px"}}>{"What's this?"}</h3>
           </Modal.Header>
           <Modal.Body>
             <div className="description-headstart" style={{maxWidth: "1000px"}}>
@@ -81,8 +82,9 @@ class InfoModal extends React.Component
           </Modal.Footer>
         </Modal>
       </div>
+      /* HTML ends here */
     );
   }
 }
 
-export default InfoModal;
+export default InfoModal;
diff --git a/src/components/List.js → src/components/mainHtmlCarriers/List.js b/src/components/List.js → src/components/mainHtmlCarriers/List.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import ListEntry from './ListEntry';
-import Filter from './Filter';
-import SortButtons from './SortButtons';
-import {toggleList} from '../eventhandlers/ListEvents';
+import Filter from '../Filter';
+import SortButtons from '../SortButtons';
+import {toggleList} from '../../eventhandlers/ListEvents';
 import { observer } from 'mobx-react';
-import { hasSubstring } from './Helpers';
+import { hasSubstring } from '../Helpers';
 
 /**
  * List component
@@ -54,6 +54,7 @@ const List = observer(class List extends React.Component {
     }
 
     return (
+        /* HTML starts here */
       <div className="list-col">
         <div id="list_exporer">
           <div className="col-xs-12" id="explorer_header">
@@ -64,14 +65,10 @@ const List = observer(class List extends React.Component {
               </div>
               <div className="col-xs-2 text-right">{showHideIcon}</div>
             </div>
-
-
             <div id="explorer_options" className="row">
               <Filter store={this.props.store}/>
               {sortButtons}
             </div>
-
-
           </div>
           <div id="papers_list" className="col-xs-12" style={papersListStyle}>
             {filteredPapers
@@ -81,8 +78,9 @@ const List = observer(class List extends React.Component {
           </div>
         </div>
       </div>
+      /* HTML ends here */
     );
   }
 });
 
-export default List;
+export default List;
diff --git a/src/components/ListEntry.js → src/components/mainHtmlCarriers/ListEntry.js b/src/components/ListEntry.js → src/components/mainHtmlCarriers/ListEntry.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PDFModal from './PDFModal';
 import PDFPreviewModal from './PDFPreviewModal';
-import HighlightableText from './HighlightableText';
+import HighlightableText from '../HighlightableText';
 import { observer } from 'mobx-react';
-import { onListClick } from '../eventhandlers/ListEvents';
+import { onListClick } from '../../eventhandlers/ListEvents';
 import {Button} from 'react-bootstrap';
 
 /* eslint-disable jsx-a11y/href-no-hash */
@@ -28,23 +28,20 @@ const ListEntry =
       const pdfLink = paper.oa ? <PDFModal link={paper.oa_link_pdf}/> : '';
       const listTitleClass = paper.oa ? 'list_title oa' : 'list_title';
       const highlightStrings = store.searchString.split(' ');
-      let titleLink =
-        <div className={listTitleClass} onClick={onListClick.bind(this, paper, store)}>
-          {openAccessLogo}&nbsp;
-          <a href="#" id="paper_list_title" className="highlightable">
-            <HighlightableText highlightStrings={highlightStrings} value={paper.title}/></a>
-        </div>;
-
       const preview = (paper.clicked && paper.oa)?
         <PDFPreviewModal link={paper.oa_link_pdf}/> : '';
-
       return (
+          /* HTML starts here */
         <div id="list_holder">
           <div className={listEntryClassName}>
 
             <div className="list_metadata">
 
-              {titleLink}
+            <div className={listTitleClass} onClick={onListClick.bind(this, paper, store)}>
+              {openAccessLogo}&nbsp;
+              <a href="#" id="paper_list_title" className="highlightable">
+                <HighlightableText highlightStrings={highlightStrings} value={paper.title}/></a>
+            </div>
 
               <div className="list_links">
                 {htmlLink}
@@ -83,8 +80,10 @@ const ListEntry =
         </div>
           {preview}
       </div>
+      /* HTML ends here */
+
         );
     }
   );
 
-export default ListEntry;
+export default ListEntry;
diff --git a/src/components/PDFModal.js → src/components/mainHtmlCarriers/PDFModal.js b/src/components/PDFModal.js → src/components/mainHtmlCarriers/PDFModal.js
@@ -31,6 +31,7 @@ class PDFModal extends React.Component
     viewer = viewer + "?file=" + process.env.PUBLIC_URL + '/mockpdf.pdf';
 
     return (
+        /* HTML starts here */
       <div style={{display: "block"}}>
         <Button
           bsStyle="danger"
@@ -41,8 +42,6 @@ class PDFModal extends React.Component
         >
           PDF <span id="whatsthis">&#xf05a;</span>
         </Button>
-
-
         <Modal show={this.state.showModal} onHide={this.close.bind(this)} bsSize="large" aria-labelledby="contained-modal-title-lg" id="iframe_modal">
           <Modal.Header style={{ paddingBottom: '0px', borderBottom: '0px' }}>
             <button className="btn btn-default pull-right" onClick={this.close.bind(this)}>&times;</button>
@@ -54,8 +53,9 @@ class PDFModal extends React.Component
           </Modal.Body>
         </Modal>
       </div>
+      /* HTML ends here */
     );
   }
 };
 
-export default PDFModal;
+export default PDFModal;
diff --git a/src/components/PDFPreviewModal.js → ...nents/mainHtmlCarriers/PDFPreviewModal.js b/src/components/PDFPreviewModal.js → ...nents/mainHtmlCarriers/PDFPreviewModal.js
@@ -40,6 +40,7 @@ class PDFPreviewModal extends React.Component
     let viewer = process.env.PUBLIC_URL + "/pdfjs-hypothesis/web/viewer.html";
     viewer = viewer + "?file=" + process.env.PUBLIC_URL + '/mockpdf.pdf';
     return (
+        /* HTML starts here */
       <div style={{display: "block"}}>
         <div
           id="preview_image"
@@ -52,8 +53,6 @@ class PDFPreviewModal extends React.Component
             Click here to open preview
           </div>
         </div>
-
-
         <Modal show={this.state.showModal} onHide={this.close.bind(this)} bsSize="large" aria-labelledby="contained-modal-title-lg" id="iframe_modal">
           <Modal.Header style={{ paddingBottom: '0px', borderBottom: '0px' }}>
             <button className="btn btn-default pull-right" onClick={this.close.bind(this)}>&times;</button>
@@ -65,8 +64,9 @@ class PDFPreviewModal extends React.Component
           </Modal.Body>
         </Modal>
       </div>
+      /* HTML ends here */
     );
   }
 };
 
-export default PDFPreviewModal;
+export default PDFPreviewModal;
diff --git a/src/components/Paper.js → src/components/mainHtmlCarriers/Paper.js b/src/components/Paper.js → src/components/mainHtmlCarriers/Paper.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import {onPaperMouseEnter, onPaperMouseLeave, onPaperClick} from '../eventhandlers/PaperEvents';
+import {onPaperMouseEnter, onPaperMouseLeave, onPaperClick} from '../../eventhandlers/PaperEvents';
 
-import HighlightableText from './HighlightableText';
+import HighlightableText from '../HighlightableText';
 
 /**
  * Paper component.
@@ -98,6 +98,7 @@ const Paper =
       }
 
       return (
+          /* HTML starts here */
         <g
           onMouseEnter={onPaperMouseEnter.bind(this, store, paper)}
           onMouseLeave={onPaperMouseLeave.bind(this, store, paper)}
@@ -106,7 +107,6 @@ const Paper =
           style={displayStyle}
           transform={translateString}
         >
-
           <path
             id="region"
             d={pathD}
@@ -144,21 +144,19 @@ const Paper =
                     </span>
                   </span>
                 </p>
-
               </div>
-
               <div className="readers" style={readersDivStyle}>
                 <p id="readers" className={textClassName}>
                   <span id="num-readers">{readers}</span>
                   <span className="readers_entity" style={{fontSize: citationsFontSize}}> citations</span>
                 </p>
               </div>
-
             </div>
           </foreignObject>
         </g>
+        /* HTML ends here */
       )
     }
   );
 
-export default Paper;
+export default Paper;