widget with logo grid on options page

FAIR-biomed · Jan 15, 2020 · a68e654 · a68e654
1 parent 3a85aaa
commit a68e654
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 15 deletions.
diff --git a/src/app/css/fair.css b/src/app/css/fair.css
@@ -292,6 +292,20 @@ div.fair-options img.fair-logo {
     max-width: 100%;
 }
 
+/** library grid **/
+#fair-library-grid .fair-library-grid-element {
+    display: inline-block;
+    max-width: 13%;
+    width: 13%;
+    text-align: center;
+    margin: 4px;
+}
+#fair-library-grid img {
+    max-width: 100%;
+    max-height: 45px;
+}
+
+
 /**
  * Styles for on/off switch - copied from https://www.w3schools.com/howto/howto_css_switch.asp
  **/
@@ -638,3 +652,4 @@ div.fair-result p.examples, #fair-library p.examples {
     margin: 1em 0em 1.5em 0em;
 }
 
+
diff --git a/src/app/html/options.html b/src/app/html/options.html
@@ -19,6 +19,8 @@ <h1 class="fair-options">FAIR-biomed</h1>
         <code>Ctr+Shift+Z</code> on the keyboard. A popup window will show a collection of data resources that may have
         additional information pertaining to the query.</p>
 
+    <p>Additional information can be found on the <a href="https://fair-biomed.github.io">FAIR-biomed website</a>.</p>
+
     <h2>Plugin library</h2>
     <div id="fair-library"></div>
 
@@ -31,22 +33,17 @@ <h2>Settings</h2>
     load results using the last-used component.</p>
     <div id="fair-auto-last"></div>
 
+
     <h2>References</h2>
-    <ul>
-        <li>Each plugin uses a dedicated online data resources. Those resources should be cited by each plugin. </li>
-        <li>Icons in this app originate from <a href="https://fontawesome.com/icons?d=gallery">Fontawesome</a> free collection.</li>
-        <li>Parts of this apps' software uses third-party libraries, including
-            <a href="https://babeljs.io/">Babel</a>,
-            <a href="http://browserify.org/">browserify</a>,
-            <a href="https://github.com/jprichardson/node-fs-extra">fs-extra</a>,
-            <a href="https://mochajs.org/">mocha</a>,
-            <a href="https://www.npmjs.com/package/nyc">nyc</a>,
-            <a href="https://reactjs.org/">React</a>,
-            <a href="https://www.npmjs.com/package/sanitize-html">sanitize-html</a>,
-            <a href="https://www.npmjs.com/package/uglify-es">uglify-es</a>,
-            <a href="https://www.npmjs.com/package/utf8">utf8</a>.
-        </li>
-    </ul>
+
+    <p>Thank you to the primary data resources for providing APIs to access their data.</p>
+
+    <div id="fair-library-grid"></div>
+
+    <p>Details about these sources should be cited within the plugins.</p>
+
+    <p>Thank you to web technology projects for providing many of the components that make FAIR-biomed work. Details about
+        these components are listed on the <a href="https://fair-biomed.github.io/references/">project website</a>.</p>
 
 </div>
 </body>

diff --git a/src/app/js/options.js b/src/app/js/options.js
@@ -247,6 +247,38 @@ class LibraryList extends React.Component {
 }
 
 
+/**
+ * A grid/matrix showing all available plugin logos
+ */
+class LibraryGrid extends React.Component {
+    constructor(props) {
+        super(props);
+        console.log("LibraryGrid constructor");
+
+    }
+
+    render() {
+        console.log("LibraryGrid render");
+        let plugins = this.props.plugins;
+        let plugin_names = this.props.names
+        console.log("names: "+JSON.stringify(plugin_names));
+        //console.log("plugins: "+JSON.stringify(this.props.plugins));
+        let logo_filenames = new Set()
+        let logos = plugin_names.map(function(id) {
+            let plugin = plugins[id];
+            if (logo_filenames.has(plugin.logo)) {
+                return(null);
+            }
+            logo_filenames.add(plugin.logo);
+            return (<div className="fair-library-grid-element fair-center-center">
+                <PluginLogo id={plugin.id} src={plugin.logo} namespace={plugin.namespace}/>
+            </div>);
+        });
+        return (<div>{logos}</div>);
+    }
+}
+
+
 /** assess each plugin state, update the count values back to DARK_COUNT **/
 function resetAllPluginCounts() {
     library["names"].map(function (id) {
@@ -294,6 +326,13 @@ document.addEventListener("DOMContentLoaded", function () {
                 document.getElementById('fair-library')
             );
     }, 0);
+    setTimeout(() => {
+        console.log("rending grid");
+        ReactDOM.render(
+            <LibraryGrid names={library['names']} plugins={library['plugins']} className="container"/>,
+            document.getElementById('fair-library-grid')
+        );
+    }, 0);
     ReactDOM.render(
         <BooleanSetting setting={"auto_last"}/>,
         document.getElementById("fair-auto-last")